This is the 17th day of my participation in the August More text Challenge. For details, see:August is more challenging

Q: What is your understanding of React Hooks? What problem was solved?

What is it

Hooks are new in React 16.8. It lets you use state and other React features without having to write a class

As for the reason why hook is introduced, the official motivation is to solve the problems often encountered in the process of using and maintaining React for a long time, such as:

  • It is difficult to reuse and share state-related logic in components
  • Components with complex logic are difficult to develop and maintain. When our components need to deal with multiple unrelated local states, each lifecycle function may contain various unrelated logic
  • This in the class component increases the cost of learning, and the class component has some problems optimizing based on existing tools
  • Because of business changes, function components have to be changed to class components, and so on

In the past, function components were also known as stateless components, taking care of only some of the work of rendering

As a result, function components can now be stateful components, internally maintaining their own state and doing some logical processing

Two, what are the

As mentioned above, Hooks give our function components the properties of class components, such as state and lifecycle within the component

The most common hooks are as follows:

  • useState
  • useEffect
  • other

useState

Here is an example:

import React, { useState } from 'react';

function Example() {
  // Declare a state variable called "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p >
      <button onClick={()= > setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
Copy the code

In the function component, the function maintains state internally through useState. The argument is the default value of state, and the return value is an array with the first value being the current state and the second value being the function that updates the state

This function component is equivalent to the class component of:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p >
        <button onClick={()= > this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>); }}Copy the code

From the above two code analysis, we can see the difference between the two:

  • State: obtained directly from function components using useState, and set from class components using constructor
  • State is read by using variables directly in function components, and by class componentsthis.state.countTo obtain
  • State is updated by setCount in function components, and by this.setstate () in class components.

Overall, useState is cleaner to use, reducing the ambiguity of this

useEffect

UseEffect allows you to perform operations with side effects in a function component

Here’s another example of a timer:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked The ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked The ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p >
        <button onClick={()= > this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>); }}Copy the code

As you can see above, the component does the same during the load and update phases

If you use useEffect, you can pull out the same logic, which is not available to class components

The following is an example of useEffect:

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
 
  useEffect(() = > {    document.title = `You clicked ${count} times`;  });
  return (
    <div>
      <p>You clicked {count} times</p >
      <button onClick={()= > setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
Copy the code

UseEffect takes a callback function as the first argument. By default, useEffect is executed after both the first rendering and the first update, equivalent to executing a callback in both componentDidMount and componentDidUpdate lifecycle functions

If certain values do not change between rerenders, you can skip the effect call and just pass the second argument, as follows:

useEffect(() = > {
  document.title = `You clicked ${count} times`;
}, [count]); // Update only when count changes
Copy the code

After passing the second argument above, if the count value is 5 and our component is rerendered with the count equal to 5, React will compare the previous render [5] with the last render [5], and skip effects if they are equal

This is effect’s optional cleanup mechanism. It is equivalent to the componentwillUnmount life cycle function in the class. It can do some cleanup operations, as follows:

useEffect(() = > {
    function handleStatusChange(status) {
        setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () = > {
        ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
});
Copy the code

Therefore, useEffect corresponds to a combination of componentDidMount, componentDidUpdate, and componentWillUnmount

Other hooks

UseContext can be used for component communication, and useRef is also used for refs learning to obtain the DOM structure……

There are also many additional hooks, such as:

  • useReducer
  • useCallback
  • useMemo
  • useRef

Third, solve what

From a primer on the above, you can see that hooks make it easier to solve the problem of state-related reuse:

  • Each call to useHook generates a separate state
  • Custom hooks can better encapsulate our functions

Write hooks for functional programming, each function is wrapped in a function, the overall style is cleaner, more elegant

With the introduction of hooks, the functionality of functional components is expanded and has similar functionality to that of class components. In our daily use, hooks can solve most problems and also have a code reuse mechanism, so hooks are a priority