React Hooks use summary

React Hooks are officially recommended to open React. After using it repeatedly on the project, I found that Hooks are cool, but there were a number of bugs that I had to learn to use, so here are some tips on how to use them.

The introduction

The Hooks component is the more powerful functional component. Functional components you have all used, or have used without realizing it. Here are a few examples:

  • In class components, we often abstract out some modules in the Render method, such as: loop list, we can write directly in the Render method JSX, but extract a method, pass the list data, in the method loop generated JSX back, the code is clearer, better reuse.
  • Further, we can put common rendering methods into the parent component for reuse by all children.
  • Further, it is written as a pure function, which is more reusable and can be reused by other components. The standalone render function in React is a functional component. It is a component, but it has no object instance, object properties, or object methods.

The Hooks component is essentially a functional component, but it is an enhanced version that has stateful and can do something in response to state changes.

Important features of the Hooks component

After reading the introduction, I don’t know if you got the point, but LET me summarize (personal experience) :

  • First, the fundamental difference: Functional components have no object instances, object properties, and object methods. This is important, and many of the Hooks components are special because of it.
  • Second, Hooks components differ from functional components: Hooks have stateful and can define stateful response logic, called effects in Hooks.
  • However, the Hooks component does not have lifecycle Hooks, but we can achieve the same effect as most hook functions with state responses (see official documentation).
  • Finally, notice the closures in the Hooks component. It’s easy to drop pits here!

Hooks why

Hooks were the main concern when they first came out, and there are two official explanations, but they require a lot of practice and summary to be fully felt.

Reusing state logic between components is difficult

The introduction talked about reuse: extracting class methods, extracting superclass methods, extracting pure function components.

  • The problem with extracting class and superclass methods is that only this type of component, or this type of parent component, can be reused. In addition, the extraction of the parent class method will also face the problem of error overwriting when subclass inheritance.
  • Extraction of pure function components is fine, but only for pure logic extraction, because it has no state, only props, and many scenarios do not meet the requirements. If I wanted to write a timer and the user had to define the count state, this would not be decoupled, and without lifecycle hooks, I would not be able to turn off the timer when the component unloads.

However, Hooks solve these problems with purely functional components while retaining the benefits of purely suggestive components.

Class components also have solutions: Render props and higher-order components, but they are cumbersome to use and difficult to understand.

Complex components become difficult to understand

The usual approach for class components is to do data requests, event listener bindings, timer initialization, and so on in didMount, and then remove them in willUnmount. This irrelevant logic is forced into lifecycle hook functions, which makes testing and reading difficult.

There are no lifecycle hook functions in Hooks, you can structure your logic yourself!

Welcome to communicate

Personal reading public number, welcome to exchange!