React's transition from Class to Hooks

React Hooks

Preface

In the previous three years of work, I have been using classes to write front-end functional pages. In fact, I have been exposed to hooks for some time. The first time I came into contact with it was when I was watching a course about electron+react projects. At that time, I was mainly looking at electron, so I didn't pay special attention to hooks. It may also be because of my long-term familiarity with classes, and at that time I had some resistance to the functional writing style of hooks. However, due to the industry's positive reviews of hooks, I once wanted to use hooks to start a project. However, due to the project cycle at the time and the existing technology stack, I never had the opportunity to put it into practice.

Because I have been using react hooks+ts for new projects recently. So, we have to start using hooks. In fact, as far as functional development is concerned, there is nothing wrong with just copying others. However, since there has been no systematic and in-depth understanding of hooks, in many cases, it is not clear why to use them in this way. So recently I found "React Hooks Core Principles and Practice" to study.

Re-examine the use of hooks and why they should be used at the usage and reason level. Further thinking is done on the benefits of functional writing. In fact, to a certain extent, I have only scratched the surface. Here I am just recording what I have learned during this period.

Why Hooks?

A big highlight of Hooks is that business logic can be reused. This is especially evident in hooks. For example, if you want to monitor changes in window size in a normal class, you have to add a monitoring event in the component after mounting. However, if this window size monitoring function is needed in another place, this logic code cannot be reused and can only be rewritten in that component. However, in hooks, we can encapsulate this part of the monitoring logic code in hooks mode, and fully achieve logical reuse.

For Class

• When using Class as the carrier of React:
• Components do not inherit from each other and do not take advantage of the class inheritance feature. The UI is state-driven, and all methods are called internally or automatically as lifecycle methods. The feature that instance methods of a class can be called is not used

For Function

One of the core of React is to realize a binding from State data to View level. Using functions is actually a better way to solve the mapping problem from State to View. However, using functions as the carrier of React will cause two problems: the preservation of state in the function and the life cycle methods .

• How Hooks solves the above two problems: bind external data to the execution of a function. Enable functions to automatically re-execute when data changes. In this way, any external data that affects the UI presentation can be bound to React's function components through this mechanism.
• Understanding of Hooks: Hook a target result to a data source or event source that may change. Then when the hooked data or event changes, the code that generates the target result will be re-executed to produce an updated result.

Illustration: An execution process (Execution), such as the function component itself, can be bound to (hooked into) the traditional State, or URL, or even the size of the window. In this way, when the State, URL, or window size changes, a function will be re-executed to produce updated results.

Classes vs Hooks

• Compared with Class components, function components are more suitable to express the execution of React components because they are more in line with the logical relationship of State => View. However, due to the lack of status, life cycle and other mechanisms, its functions have always been limited. Hooks solves the limited problems of the state lifecycle of function components as React carriers, allowing their functions to be fully utilized
• The object hooked in Hooks can be an independent data source or the result of another Hook execution, which brings the biggest benefit of Hooks: logic reuse
• Simplifies logic reuse
  • In the Class method: Use the design pattern of high-order components for logic reuse. For example, if we want to reuse a window resize function, we need to define an outer component without UI, write the relevant resize logic definition, and then pass the data result to the child component in the form of attributes. If a component wants to reuse this logic, it must be wrapped with this component and returned. As a whole, in order to pass an external state, we have to define an outer component without UI, and this component is just to encapsulate a reusable logic. **Frequent use will add an extra layer of nodes for each high-level component, which will bring a great burden to debugging, etc.

//High-level components in Class implement resize method reuse //1. Declaration of high-level components const withWindowSize = Component => {
  // Generate a high-level component WrappedComponent, which only contains the logic of monitoring window size class WrappedComponent extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        size: this.getSize()
      };
    }
    componentDidMount() {
      window.addEventListener("resize", this.handleResize); 
    }
    componentWillUnmount() {
      window.removeEventListener("resize", this.handleResize);
    }
    getSize() {
      return window.innerWidth > 1000 ? "large" : "small";
    }
    handleResize = () => {
      const currentSize = this.getSize();
      this.setState({
        size: this.getSize()
      });
    }
    render() {
      // Pass the window size to the real business logic component return <Component size={this.state.size} />;
    }
  }
  return WrappedComponent;
};
//2. Component MyComponent uses the resize function in the high-order component class MyComponent extends React.Component{
  render() {
    const { size } = this.props;
    if (size === "small") return <SmallComponent />;
    else return <LargeComponent />;
  }
}
// Use withWindowSize to generate a high-order component to generate the size attribute and pass it to the real business component export default withWindowSize(MyComponent); 

• In the Hooks method: if resize is implemented, the window size is just an external data state. We use hooks to encapsulate it, and simply turn it into a bindable data source. When the window size changes, the component will also re-render the code, which will be more concise and intuitive, and will not generate additional component nodes.

//Hooks uses the hooks method to reuse the resize logic //Define the useWindowSize hook
const getSize = () => {
  return window.innerWidth > 1000 ? "large" : "small";
}
const useWindowSize = () => {
  const [size, setSize] = useState(getSize());
  useEffect(() => {
  const handler = () => {
      setSize(getSize())
    };
    window.addEventListener('resize', handler);
    return () => {
      window.removeEventListener('resize', handler);
    };
  }, []);
  return size;
};
//Use this hook in the function component
const Demo = () => {
  const size = useWindowSize();
  if (size === "small") return <SmallComponent />;
  else return <LargeComponent />;
};

• Helps with separation of concerns

Hooks can aggregate the code for the same business logic as much as possible. In the Class component, the same business logic code has to be scattered in different life cycle methods of the class component.

Illustration: The left side is the Class component, and the right side is the function component combined with Hooks. Blue and yellow represent different business functions

How do Hooks save component state and use lifecycle?

React provides a total of 10 Hooks , useState , useEffect , useCallback , useMemo , useRef , useContext , etc.

1. useState: Allow functions to maintain state

One principle we should follow is that the state should never store values ​​that can be calculated, for example:

• The value passed from props. Sometimes the value passed by props cannot be used directly, but must be displayed on the UI after certain calculations, such as sorting. So what we need to do is to re-sort the results each time we use them, or use some cache mechanism instead of putting the results directly into the state.
• The value read from the URL. For example, sometimes you need to read the parameters in the URL and use it as part of the component state. Then we can read it from the URL every time we need it, instead of reading it out and putting it directly into the state.
• Values ​​read from cookies and localStorage. Generally speaking, it is read directly each time it is needed, rather than reading it out and putting it in the state.

2. useEffect: Execute side effects

A side effect is a piece of code that has no effect on the outcome of the current execution. For example, if you want to modify a variable outside a function, you need to initiate a request. Format: useEffect(callback, dependencies) . It covers three life cycle methods: componentDidMount , componentDidUpdate , and componentWillUnmount . In short, useEffect determines the dependency and executes it every time the component is rendered.

Points to note when using useEffect:

If there are no dependencies, it will be re-executed after each render

useEffect(()=>{
	console.log('re-render') //Execute every time render is completed})

• If an empty array is used as a dependency, it will only be triggered at the first execution, and the corresponding Class component is componentDidMount

useEffect(()=>{
  console.log('did mount') //equivalent to componentDidMount
},[])

• You can return a function to do some cleanup when the component is destroyed.

const [size,setResize] = useState({})
useEffect(()=>{
	const handler = () => {
    setResize()
	}
	window.addEventListener('resize',handler)
	return ()=>{
		window.removeEventListener('resize',handler)
	}
},[])

Summarize

• The four scenarios used by useEffect are executed after each render: No second dependency parameter is provided. For example, useEffect(() => {}).
• Only executed after the first render: provide an empty array as dependencies. For example, useEffect(() => {}, []).
• Executed the first time and after dependencies have changed: Provide an array of dependencies. For example, useEffect(() => {}, [deps]).
• Executed after the component is unmounted: returns a callback function. For example, useEffect() => { return () => {} }, []).

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!