Writing in the front

For the first two articles,

Juejin. Cn/post / 684490…

Juejin. Cn/post / 684490…

Deep into the Hook source code. This article will mainly focus on useState and useEffect, summarize the related content of Hook, first post sample code:

const App = (a)= > {

    const [title, setTitle] = useState(' ');
    const [fontSize, setFontSize] = useState('13');

    useEffect((a)= > {
       document.title = title;
    },[title]);

    useEffect((a)= > {
        document.body.style.fontSize = `${fontSize}px`;
    }, [fontSize]);

    return<React.Fragment> <input value={title} onChange={e => setTitle(e.target.value)} /> <input value={fontSize} onChange={e =>  setFontSize(e.target.value)} /> <p>Hello World</p> </React.Fragment> };Copy the code

Components are mounted for the first time

When the component is first mounted, four lines of useXXX code are executed successively to generate four hook objects, which form a complete hook chain in sequence and mount it on the memorizedState property of the Fiber object. The memorizedState property on a hook object represents the value of the current hook object. For an effect-hook, the value of the memorizedState property is an object (effect object) that contains a pointer to the effect object next to the effect-hook, forming a circular linked list.

Component updates

For state-hooks, the setState function holds a reference to the corresponding hook object through a closure. Each time setState is called to update the state value, the queue property on the hook object is modified. The queue property holds updates to the hook. After setState is executed, the memorized value on the corresponding hook object is up to date.

For effe-hook, every time the component renders, it enters the logic of effe-hook: it first checks whether the values in the DEPS array have changed since the last time. If there is no change, the effect is tagged with an ignored tag. If there is a change from the last component rendering, the destory function (return in useEffect) is eventually executed, followed by the create function.

For side effects, React generates a new effect chain each time, and if the values in the DEPS array change, the new effect object also assigns the memorizedState property of the effect-hook.

In this example, if we type Hello in the title, after the component is updated, the hook information on the Fiber node is as follows:

conclusion

To recap, here’s what you need to know about React Hook:

1. React Hook uses a large number of linked lists.

2. The writing order of hooks in the code determines the storage order of hooks in Fiber.

3. Every time the component renders, the hook code will be executed once, and the last hook object will be clone again, and return the state of the latest hook and the corresponding update function. In the update function for state, a reference to the corresponding hook object is saved as a closure.

Write in the back

The React Hook source code analysis series is now over. Although I haven’t fully understood many parts and haven’t clearly explained some parts, I have a further understanding of the overall implementation mode of React Hook. As expected. Finally, I recommend a hook related article:

Github.com/shanggqm/bl…