Since react16.8, hooks have been used by more and more people, and inevitably will be asked in interviews. So what exactly are hooks? What advantages does it have over traditional class components?

1. What are React hooks?

React 16.8 is a new feature that allows you to use state and other React features without writing classes. All React apis that start with use are Hooks, such as useState, useEffect, useContext, etc.

What are the advantages of React hooks?

The first thing to understand is what are the problems with traditional class components?

1. Say goodbye to Class

Class is “hard to understand,” with this and lifecycle pain points behind it. In order to solve the problems that this can cause, the use of bind and the current promotion of the arrow function are essentially using practical constraints to solve design problems. Function components do not need to care about this after Hooks.

class App extends React.Component<any.any> {
         handleClick2;
         constructor(props) {
             super(props);
             this.state = {
                 num: 1.title: " react study"};this.handleClick2 = this.handleClick1.bind(this);
         }
         
         handleClick1() {
          this.setState({
            num: this.state.num + 1}); } handleClick3 =() = > {
          this.setState({
            num: this.state.num + 1}); };render() {
           return (
             <div>
              <h2>Ann, {this.state.num}</h2>{/* Bind this in the render function, because bind returns a new function, so every parent refresh causes the child refresh, except for the other props of the operator component. * /}<button onClick={this.handleClick1.bind(this)}>btn1</button>{/* Bind this inside the constructor, and every time the parent component refreshes, if the other props passed to the child component doesn't change, the child component doesn't refresh. * /}<button onClick={this.handleClick2}>btn2</button>{/* With the arrow function, a new arrow function is generated each time the parent component refreshes, and the child component does not refresh if the other props passed to the child component remain unchanged */}<button onClick={()= > this.handleClick1()}>btn3</button>{/* Use the arrow function defined in the class, the same principle as handleClick2, but more concise */}<button onClick={this.handleClick3}>btn4</button>
             </div>); }}Copy the code

As for the life cycle, it causes two major problems: the cost of learning and the unreasonable way of planning logically

2. Solve the problem that the service logic is difficult to split

In a Class component, logic was once coupled to the lifecycle. There are many things you can do in a life cycle, such as fetching data in componentDidMount, updating the DOM in componentDidUpdate based on data changes, and so on. It might be acceptable to say that you only do one thing in one lifecycle, but React projects tend to do more than one thing in one lifecycle. In addition, for example, setting up the listener and adding the timer, we need to complete the registration and destruction in two life cycles, and it is likely to leak memory due to missing write.

componentDidMount() {
   const timer = setInterval(() = > {});
   this.setState({timer})
}

componentWillUnmount() {
   if (this.state.timer) {
       clearInterval(this.state.timer); }}Copy the code

3. Make reuse of state logic easy and feasible

In class components, if the logic of state between components is reused, it is basically solved by higher-order components. This would solve the problem, but we might need to wrap another layer of elements around the component, which would lead to a very redundant hierarchy, creating a “nested hell” phenomenon.

In the past we used to reuse state logic, relying on HOC and Render Props to design patterns for components, because React at the native level didn’t provide us with a way to do it. However, these design patterns are not a panacea. While realizing logical reuse, they also destroy the structure of components and form “nested hell”.

Hooks can be seen as a native approach to reusing state logic provided by React. Now we can customize hooks to achieve logical reuse without breaking the component structure.

3. React hooks

  1. Call a Hook only from the outermost layer inside a function, never from a loop, conditional judgment, or nested function

  2. You can only call a Hook in the React function component, not in other JavaScript functions

Reference:

  1. The react Chinese website
  2. React
  3. React-hooks Design motivation and working mode