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

A, Hook,

1. The advantages

  1. Reusing state logic between components is difficult and may require itrender propsReact and higher-order components. React needs to provide a better native way to share state logic, and Hooks allow you to reuse state logic without having to modify component structures
  2. Complex components become difficult to understand, and hooks break the interrelated parts of components into smaller functions (such as setting up subscription/request data, etc.)
  3. There is no this that is hard for class to understand, because there is no component instance and performance is much better than class

2. Pay attention to

  1. Call a Hook only from the outermost layer of a function, not from a loop, a conditional judgment, or a child function.
  2. You can only call a Hook in the React function component, not in other JavaScript functions.

Second, the useState

1. Introduction

  1. useStateIt’s a Hook
  2. Add some internal state to the component by calling it inside the function component. React retains this state during repeated rendering
  3. useStateReturns a pair of values:The current state and a function that lets you update itYou can call this function in an event handler or some other place. It is similar to the class componentthis.setState, but it does not merge the new state with the old state
  4. useStateThe only argument is the initial state
  5. Returns a state and a function to update the state
    • During initial rendering, the state returned is the same as the value of the first parameter passed in
    • The setState function is used to update state. It receives a new state value and queues a re-rendering of the component
const [state, setState] = useState(initialState)
Copy the code

Third, train of thought

There may be multiple USestates inside the component, and setState must be triggered each time the state changes, by modifying the value of the current state to be changed. Therefore, we need to use several global variables: hookStates to record the value of the hook, hookIndex to record the index of the current hook, and scheduleUpdate component updates

1. Implement useState

For reference use, useState takes an input parameter initialState as the initial value of the state. Let’s first assign the current hook. There are two cases of assignment:

  1. An initial value
  2. Assign the value modified later

The initial value is the parameter initialState. We need to use our global variable to modify the value later. We store each hook in the hookStates and use the hookIndex index to get the value to be changed. (After each assignment, we need to add the index value +1 so that we can proceed to the next Hook.)

At this point, we use the newState value newState received by setState to update the state. After the status changes, the scheduleUpdate method is executed.

2. Implement scheduleUpdate

Since we record every hook that needs to be changed by index value, we need to reset the hookIndex value to 0 before the page can be reproduced. A full DOM-diff is then performed to trigger component updates

Four,

  1. How the update happens:

After calling useState and internally modifying the state with setState, the scheduleUpdate method is called to perform a complete DOM-diff comparison from the root node to update the component.

  1. Why can’t you use hooks in conditional statements or loops

From an implementation point of view, each hook is executed from the first hook with an index of 0. If a conditional statement or loop is used, the order in which the hooks are executed may be inconsistent with the order in which they are stored in the array. Therefore, you cannot use hooks in conditional statements or loops.

Source is the use of linked list: hook1.next = HOOk2.next === hook2 the same reason, must ensure that the number of hooks each render consistent, and pointer order can not be chaotic.

The implementation of this article and the real source code has a certain difference, after learning fiber, will be one to one in accordance with the source code implementation. 'hookState' global variable to store state, source code in the state of the current node is stored in the fiber object. 2. 'hookState' array, source code using a one-way linked listCopy the code