preface

The official document on the definition of Hook is as follows:Copy the code

Hook is a new feature in React 16.8. It lets you use state and other React features without having to write a class.

In simple terms, the function component +hooks do the work of the class component. So we have to contrast class with hooks.

The function component has independent props/state for each rendering, whereas the class component always gets the latest props/state via this

The class component is instantiated once, and the props/state used is obtained via this, which is mutable, so the latest props/state is obtained during the lifecycle.

The function component is executed once per render, and each render has its own props/state corresponding to the render.

So in some special cases, the class component may behave incorrectly, such as clicking on a button to delay the output of the state and changing the state before the output of the delayed state is delayed. The result is always the latest modified state, not the state when the delayed state was clicked. Like Dan’s article how is a functional component different from a class component? The example given in.

The function component logic is aggregated, while the class component logic is scattered

The similarities and differences between the two mentioned above do not refer to hooks, they are simply the difference between the function component and the class component, and now the function component with hooks added.

The life cycle of a class component is mostly about dealing with side effects at various points in time, and functions need a mechanism to deal with side effects during component interactions: useEffect.

A class component may split the logic of the same function into different life cycles, such as incomponentWillUnMountTo uninstall the timerFor example, to perform a side effect each time the passed props changes, you need to perform a side effect incomponentDidMountandcomponentDidUpdateWrite the corresponding logic in both life cyclesIn the function component, the same logic above uses useEffect to deal with side effects, which makes the logic very aggregated and does not scatter the logic of the same module in different places.

Function component logic is easy to reuse, while class component logic is difficult to reuse

In class components, logic reuse schemes include HOC and Render props, but these schemes encapsulate logic into components of an abstraction layer, creating a “nested hell” of abstraction layer components when multiple reuse logic is used.

For example, if a component needs to reuse the logic of mouse position and the logic of window size changes, let’s compare the logic reuse between HOC, Render props, and hooks

1. render props

React DevTools components

2. HOC

React DevTools components

3. hooks

React DevTools components

HOC and Render props change the structure of the component, while hooks allow you to reuse state logic without modifying the structure of the component. In cases where multiple reuse logic is used on a single component, hooks provide clear and concise logic extraction and use.

Reference Address:

  1. www.zhihu.com/question/34…
  2. Zh-hans.reactjs.org/docs/hooks-…