React Hooks

React Hooks have been learning to use them for some time, but they haven’t formed their own system of knowledge in my head, and my notes are chaotic. Review your notes.

This article is just a study note, a summary of several blog documents I have read, with a link to the original text at the end of the article. Of course, it is better to see the original text of the big guys, I just facilitate their learning and memory.

Problems with Class Component

(Click to expand for details)

Component data sharing: One-way data flow Flux solution. Component reuse: The previous class Component combined with Render Props and Higher Order Component(HOC) has defects. Nested hell, each HOC call will generate a component instance that wraps too many layers, which can cause problems with props overrides: The Render Props nature is based on closures, and a lot of use for component reuse will inevitably introduce a callback hell problem that loses the context of the component, so there is no this. Props property, and it cannot access this.props. Children like HOCCopy the code

The compiler size and performance of a Javascript implementation are not good enough. There is no such concept as Java/C++ multiple inheritance, and logical reuse of classes is a problemCopy the code

Functional components are themselves stateless components and cannot be used without class components. It cannot handle the state itself and needs to rely on the Handle passed by the props to respond to the state change. Hooks fix this.Copy the code

The use of Hooks

Note: The Hooks API can only be called from functional components.

useState

const [state, setState] = useState(initialState);
Copy the code

Function: Returns a state and setters that can modify the state. Once mounted, only the state can be modified using this setter.

Setters can change the state of the component and cause the component to re-render.

Q: Why must the Hooks API be called at the top of the function component scope?

In the class component, state is an object corresponding to FiberNode's memoizedState property, which is updated when setState() is called. But in function components, hooks are stored as linked lists. The Hook API call generates a corresponding Hook instance appended to the Hooks chain, but returns state and the corresponding setter to the component. Re-render does not tell the framework which Hooks instance that setter corresponds to. It executes the entire Hooks chain sequentially, starting with the first line of code. Also, after first render, the corresponding memoizedState of the Hook can only be modified with the dispatch returned by useState, and the order of each Hooks is guaranteed only when called at the top level.Copy the code

Q: How does useState Hook update its data?

State is updated with the dispatchAction function, which generates an UPDATE that is mounted to the Hooks queue and submits a React update schedule. The rest is the same as the class component. It's theoretically possible to call Dispatch multiple times at the same time, but only the last time will work (because React executes the entire update queue on the hook objects in sequence, with the last pointer pointing to the state of the last update). In the Update phase, state changes, parent re-render, and so on all cause component state updates, but initialState is not used. UseState updates data differently from setState: whereas setState merges with the old state and just passes in the changes, useState overwrites it directly.Copy the code

UseState Hook Update process

function App() {
  const [n1, setN1] = useState(1);
  const [n2, setN2] = useState(2);
  const [n3, setN3] = useState(3);

  useEffect(() = > {
    setN1(10);
    setN1(100); } []);return (<button onClick={()= > setN2(20)}>click</button>);
}

Copy the code

SetState returns a setter execution that causes re-render. For first rendering, n1,n2, and N3 have state values of 1, 2, and 3, respectively. The first time to re-render, execute the setter inside useEffect, only for the last time, n1 is 100. When I hit button for the second rendering, n2 is 20.Copy the code

I am one of the world 鈥 檚 remaining world “s buoyeds.

Refer to the link

React Hooks Complete tutorial

The React principle of Hooks

Intensive reading the React Hooks