网站服务器的费用,做网站投放广告,用jsp做网站主界面,在线html5制作网站我们先看下 React 官方文档对这两个 hook 的介绍#xff0c;建立个整体认识
useEffect(create, deps): 该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内#xff08;这里指在 React 渲染阶段#xff09;改变 DOM、添加订阅、设置定时器、记录日志以…我们先看下 React 官方文档对这两个 hook 的介绍建立个整体认识
useEffect(create, deps): 该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内这里指在 React 渲染阶段改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。 useLayoutEffect(create, deps): 其函数签名与 useEffect 相同但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前useLayoutEffect 内部的更新计划将被同步刷新。 注意加粗的字段React 官方的文档其实把两个 hook 的执行时机说的很清楚下面我们深入到 react 的执行流程中来理解下
问题
useEffect 和 useLayoutEffect 的区别useEffect 和 useLayoutEffect 哪一个与 componentDidMountcomponentDidUpdate 的是等价的useEffect 和 useLayoutEffect 哪一个与 componentWillUnmount 的是等价的为什么建议将修改 DOM 的操作里放到 useLayoutEffect 里而不是 useEffect
流程 react 在 diff 后会进入到 commit 阶段准备把虚拟 DOM 发生的变化映射到真实 DOM 上 在 commit 阶段的前期会调用一些生命周期方法对于类组件来说需要触发组件的 getSnapshotBeforeUpdate 生命周期对于函数组件此时会调度 useEffect 的 create destroy 函数 注意是调度不是执行。在这个阶段会把使用了 useEffect 组件产生的生命周期函数入列到 React 自己维护的调度队列中给予一个普通的优先级让这些生命周期函数异步执行
// 可以近似的认为React 做了这样一步实际流程中要复杂的多setTimeout(() {const preDestory element.destroy;if (!preDestory) prevDestroy();const destroy create();element.destroy destroy;
}, 0);随后就到了 React 把虚拟 DOM 设置到真实 DOM 上的阶段这个阶段主要调用的函数是 commitWorkcommitWork 函数会针对不同的 fiber 节点调用不同的 DOM 的修改方法比如文本节点和元素节点的修改方法是不一样的。 commitWork 如果遇到了类组件的 fiber 节点不会做任何操作会直接 return进行收尾工作然后去处理下一个节点这点很容易理解类组件的 fiber 节点没有对应的真实 DOM 结构所以就没有相关操作 但在有了 hooks 以后函数组件在这个阶段会同步调用上一次渲染时 useLayoutEffect(create, deps) create 函数返回的 destroy 函数 注意一个节点在 commitWokr 后这个时候我们已经把发生的变化映射到真实 DOM 上了 但由于 JS 线程和浏览器渲染线程是互斥的因为 JS 虚拟机还在运行即使内存中的真实 DOM 已经变化浏览器也没有立刻渲染到屏幕上 此时会进行收尾工作同步执行对应的生命周期方法我们说的componentDidMountcomponentDidUpdate 以及 useLayoutEffect(create, deps) 的 create 函数都是在这个阶段被同步执行。 对于 react 来说commit 阶段是不可打断的会一次性把所有需要 commit 的节点全部 commit 完至此 react 更新完毕JS 停止执行 浏览器把发生变化的 DOM 渲染到屏幕上到此为止 react 仅用一次回流、重绘的代价就把所有需要更新的 DOM 节点全部更新完成 浏览器渲染完成后浏览器通知 react 自己处于空闲阶段react 开始执行自己调度队列中的任务此时才开始执行 useEffect(create, deps) 的产生的函数
参考 前端进阶面试题详细解答
解答
useEffect 和 useLayoutEffect 的区别
useEffect 在渲染时是异步执行并且要等到浏览器将所有变化渲染到屏幕后才会被执行。
useLayoutEffect 在渲染时是同步执行其执行时机与 componentDidMountcomponentDidUpdate 一致
对于 useEffect 和 useLayoutEffect 哪一个与 componentDidMountcomponentDidUpdate 的是等价的
useLayoutEffect因为从源码中调用的位置来看useLayoutEffect的 create 函数的调用位置、时机都和 componentDidMountcomponentDidUpdate 一致且都是被 React 同步调用都会阻塞浏览器渲染。
useEffect 和 useLayoutEffect 哪一个与 componentWillUnmount 的是等价的
同上useLayoutEffect 的 detroy 函数的调用位置、时机与 componentWillUnmount 一致且都是同步调用。useEffect 的 detroy 函数从调用时机上来看更像是 componentDidUnmount (注意React 中并没有这个生命周期函数)。
为什么建议将修改 DOM 的操作里放到 useLayoutEffect 里而不是 useEffect
可以看到在流程9/10期间DOM 已经被修改但但浏览器渲染线程依旧处于被阻塞阶段所以还没有发生回流、重绘过程。由于内存中的 DOM 已经被修改通过 useLayoutEffect 可以拿到最新的 DOM 节点并且在此时对 DOM 进行样式上的修改假设修改了元素的 height这些修改会在步骤 11 和 react 做出的更改一起被一次性渲染到屏幕上依旧只有一次回流、重绘的代价。
如果放在 useEffect 里useEffect 的函数会在组件渲染到屏幕之后执行此时对 DOM 进行修改会触发浏览器再次进行回流、重绘增加了性能上的损耗。
