[React] 源码解析二

hooks

简介

背景：

1. class组件， 代码量比较大， 需要绑定this。
2. 函数组件， 如果后续需要使用state，受限制。

hooks解决什么问题：

1. 函数组件可以定义state。
2. 可以模拟大部分生命周期。
3. 解偶
4. 可以帮助我们让代码更简洁。

   基本使用

   memo+useCallback

• useState()
• useContext()
• useReducer()
• useEffect()
  • 容易出现死循环

    useEffect(() => {
    fetch().then(res => {
     setCount(res.count)
    })
    }, [count])

    useReducer+useContext+createCount = hooksRedux
    useRef
    依赖+循环

    const changeName = () => {
    ref.current = name+1
    setTimeout(() => {
     consoe.log('name', name)
    }, 1000)
    setName(ref.current)
    }

    源码解析

useState的逻辑分3部分：

1. 执行mountState
   1. 判断deps是否为undefined
   2. 打上fiberEffectTag
   3. 创建一个effect的链表
   4. 把effect添加到链表的最后quene
2. 执行dispatch

3. 执行updateState

4. 初次执行App()构建Fiber阶段

5. 执行
6. pushEffect 到componentUpdateQuene里， callback在这个阶段是没有执行
7. commitRoot 调用commitLayoutEffects， 调用commitLifeCycles， commitHookEffectListMount执行effect.create, 把结果赋值给distory
8. 调用setCount导致App()， 重新构建Fiber
9. 执行useEffect， 调用updateEffect
10. 对比依赖的值和原本的值。如果有变化， 需要push一个新的effect
11. 同4逻辑

事件机制

关键： 事件委托

1. 事件挂载在根组件
2. 冒泡方式， target、currentTarget找到对应的callback
3. 执行对象的callback

执行onclick的callback前， 会先执行interactiveUpdates
onclick={() => {}}

参考：

https://pomb.us/build-your-own-react/

https://react.iamkasong.com/