【React】常见疑问的整理

1. React渲染一个列表,需要为每一项指定key?

        列表的key主要是为了react渲染阶段更好的协调(reconciliation),diff时更好的识别react元素,减少dom的创建和操作,提升效率。

设定key值方式:

  • 来自数据库的数据,最好是主键(Primary Key)
  • 如果数据是本地产生,可以生成唯一的ID作为key

key需满足条件:

  • key值在兄弟节点之间必须唯一
  • key值不能改变
2. 为什么一定要在函数组件(FC)顶层调用Hook函数?

        以useState举例来说,state和修改state的操作队列一起存在Fiber节点的hooks数组中,形式类似。

fiber.hooks = [
    {
        state: '', // 第0个hook的当前状态值
        queue: [], // 第0个hook待执行的操作队列
    },
    {
        state: '', // 第1个hook的当前状态值
        queue: [], // 第1个hook待执行的操作队列
    },
    {
        memorizedState: [...,...]
    }
    ...
];

渲染时,函数组件作为函数执行时,函数内每执行一个hook函数,就按顺序从fiber.hooks取出hook的对应状态和操作队列。如果hook函数不是在函数组件顶层,可能会打乱获取hook对应状态和操作队列的顺序。

3.React运行过程是怎样的?
3.1 render阶段

一、基本过程

  • render
  • performSyncWorkOnRoot 同步(performConcurrentWorkOnRoot 异步)
  • wookLoopSync(workLoopCurrent)
  • performUnitOfWork:创建下一个Fiber节点,并赋值给workInProcess,将workInProcess与已创建的FIber节点连接起来,构成Fiber树
  • beginWork(递):根据传入的Fiber节点创建子Fiber节点,并将这两个Fiber节点连接起来
  • completeWork(归):当某个Fiber节点执行完completeWork,如果其存在兄弟Fiber节点(fiber.sibling !== null),会进入其兄弟Fiber的‘递’阶段;如果不存在兄弟Fiber,会进入父级Fiber的‘归’阶段。
  • ‘递’和‘归’阶段交错执行直到‘归’到rootFiber,至此渲染工作结束。
  • 深度优先:child -> sibling -> return(parent),一直child到叶节点,再到sibling兄弟节点,处理完了再到return父节点

二、beginWork(current | null, workInProgress, renderLanes)

  • update:current.memorizedProps(oldProps)和workInProgress.pendingProps(newProps)
  • mount:根据Fiber.tag不同,进入不同类型的Fiber的创建逻辑

最终,都会进入reconcileChildren方法

  • update:reconcileChildren会将当前组件与该组件上次更新对应的Fiber节点比较(diff算法),将比较的结果生成新Fiber节点
  • mount:reconcileChildren会创建新的子Fiber节点

最后会执行moutChildFibers或reconcileChildFibers,workInProgress.child = moutChildFibers(...)或reconcileChildFibers(...),其中reconcileChildFibers会为生成的Fiber节点带上effectTag属性,moutChildFibers则不会。

fiber.stateNode会在completeWork中创建,mount时只有rootFiber会赋值Placement effectTag,在commit阶段直接一次插入操作。

三、completeWork(current | null, workInProgress, renderLanes)

类似beginWork,completeWork也是针对不同fiber.tag调用不同的处理逻辑

  • update:Fiber节点已存储对应DMO节点,不需要再生成DOM节点
  1. onClick、onChange等回调函数的注册
  2. 处理style prop
  3. 处理DANGEROUSLY_SET_INNER_HTML prop
  4. 处理children prop

fiber.tag为HostComponent时,最主要的逻辑是调用updateHostComponent,在updateHostComponent内部,被处理完的props会赋值给workInProgress.updateQueue,并最终会在commit阶段渲染到页面上。

  • mount
  1. 为Fiber节点生成对应DOM节点
  2. 将子孙DOM节点插入刚生成的DOM节点中
  3. 与update逻辑中的updateHostComponent类似的处理props的过程

mount时,只会在rootFiber存在Placement effectTag,那么commit阶段是如何通过一次插入DOM操作的?原因是completeWorkd中appendAllChildren方法,由completeWork属于‘归’阶段调用函数,每次调用appendAllChildren时都会将已生成的子孙DOM节点插入当前生成的DOM节点下,‘归’到rootFiber时,已经构建好了离屏DOM树。

在completeWork的上层函数completeUnitOfWork中,每执行完completeWork且存在effectTag的Fiber节点会被保存在一条被称为effectList的单向链表中。

在‘归’阶段,所有有effectTag的Fiber节点都会被追加在effectList中,最终形成一条以rootFiber.firstEffect为起点的单向链表。rootFiber.firstEffect.nextEffect.nextEffect....

结尾:render全部工作完成,在performSyncWorkOnRoot函数中,fiberRootNode被传递给commitRoot方法,开启commit阶段工作流程。

3.2 commit阶段

commitRoot(root) commit阶段的起点。

一、commit阶段主要工作

  • before mutation阶段(执行DOM操作前)
  • mutation阶段(执行DOM操作)
  • layout阶段(执行DOM操作后)

before mutation阶段之前 和 layout阶段之后,还有一些额外工作:useEffect的触发、优先级相关的重置、ref的绑定/解绑

before mutation阶段之前:主要做一些变量赋值,状态重置的工作

layout阶段之后:

  • useEffect相关的处理。
  • 性能追踪相关。
  • 在commit阶段会触发一些生命周期钩子(如 componentDidXXX)和hook(如useLayoutEffect、useEffect)

各阶段的工作

  • before mutation阶段

        整个过程就是遍历effectList并调用commitBeforeMutationEffects函数处理,

  1. 处理DOM节点渲染/删除后的 autoFocus、blur 逻辑
  2.  调用getSnapshotBeforeUpdate生命周期钩子
  3. 调度useEffect
  • mutation阶段

        mutation阶段也是遍历effectList,执行函数。这里执行的是commitMutationEffects

  1. 根据ContentReset effectTag重置文字节点
  2. 更新ref
  3. 根据effectTag分别处理,其中effectTag包括(Placement | Update | Deletion | Hydrating)
  • layout阶段

        与前两个阶段类似,layout阶段也是遍历effectList,执行函数。 具体执行的函数是commitLayoutEffects

  1. commitLayoutEffectOnFiber(调用生命周期钩子和hook相关操作):componentDidMount、componentDidUpdate、useEffect的销毁和回调(先高度,layout结束后再异步执行)、useLayoutEffect回调(mutation阶段调用useLayoutEffect的销毁函数、layout阶段同步执行回调)
  2. commitAttachRef(赋值 ref)

结束:root.current = finishedWork;

3.3 Diff算法
  • 只对同级元素进行Diff,如果一个DOM节点在前后两次更新跨越层级,React则不利用它。
  • 两个不同类型的元素产生不同的树,如果元素由p变成p,React会销毁div及其子孙节点,并新建p及其子孙节点
  • 开发者可通过key prop来暗示哪些子元素在不同的渲染下能保持稳定。

reconcileChildFibers

  • 当newChild类型为object、number、string,代表同级只有一个节点 - reconcileSingleElement
  • 当newChild类型为Array,同级有多个节点 - reconcileChildFibers

参见文-章:

Build your own React (pomb.us)

React技术揭秘 (iamkasong.com)

注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~

你可能感兴趣的:(前端开发,react.js,前端,javascript)