React 16.7 has added support for hooks. Hooks embody the idea of logic reuse because they are simple and flexible enough to be used quickly, just as JS is flexible enough to be written gracefully or rudely by different developers:

Why use the Hooks component

  • Make Component writing more elegant. Hooks provide state management capabilities previously available to Class Components, reduce coupling between code, and improve business reuse
  • Make Component writing more elegant. Hooks provide state management capabilities previously available to Class Components, reduce coupling between code, and improve business reuse
  • FC’s better support for typescript allows explicit declaration of component property inputs, better hints during code writing, and fewer errors and unexpected bugs during code execution
  • Functions are better for V8 engines to optimize operations
  • Functional component development also makes it easier for front-end engineers who have no experience with OOP
  • FC is more tree-shaking friendly than Class Component when it comes to Webpack packaging

React-hooks fix the problem

  • A function component cannot have its own state. Function components were stateless before hooks and used props to obtain the state of the parent component, but hooks provide useState to maintain state inside function components.
  • You cannot listen to the lifecycle of a component in a function component. UseEffect aggregates multiple lifecycle functions.
  • The life cycle in class components is more complex (it changed from version 15 to version 16).
  • Class component logic is difficult to reuse (HOC, render props).

Please read: hooks official website.

May you also be able to be like Chen 11, not forget the original heart, heart to the sun