Introduction to advanced components

The higher-order component, HOC for short, is not part of the React API itself, but is a design pattern based on the composite features of React.

React’s intent is to focus on the view layer, but for the business logic code inside components, React wants to delegate it, which can greatly reduce the performance of the components themselves.

High-order components are an advanced technique React uses to reuse component logic and separate the components themselves from the business logic code. But it has a set set of rules and grammar, which are hard and fast.

  • A higher-order component is itself a function

  • Accept components as parameters

  • This function returns a new class component

Case comparison

Now let’s write two components that are timers.

longhand

// class Clock extends React.Com {constructor(props) {super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hello, world! </h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } class A extends React.Component { render() { return ( <div> <Clock/> </div> ) } } class B extends React.Component { render() { return ( <div> <Clock/> </div> ) } } class App extends React.Component { render() { return ( <div> <A></A> <B></B> </div> ) } } export default AppCopy the code

Through the above code, we can see that, first define A Clock component, then combine it with A component and B component to form A parent component, and then add A and B component to App component, which is the reuse of component Clock component.

High order component writing

function A(props) { // console.log(props) return (<><h2>It is{props.dates.toLocaleTimeString()}</h2></>) } function B(props) { return (<><h2>It is{props.dates.toLocaleTimeString()}</h2></>) } function WithComponent(Oldcomponent) { class  NewComponent extends Component { constructor(props) { super(props) this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <Oldcomponent dates = {this.state.date}></Oldcomponent> </div> ); } } return NewComponent; } const Aco = WithComponent(A) const Bco = WithComponent(B) class App extends React.Component { render() { return ( <div> <Aco></Aco> <Bco></Bco> </div> ) } } export default AppCopy the code

Higher-order components are written not to reuse components, but to reuse business logic. We simply call the higher-order component function and get the timer component we need. When state changes, only the new component is updated during the interface change process, rather than requiring each component to be updated, greatly optimizing the overall application performance experience.