英文

1. pitfall: 隐患
2. a version of: 变形
3. Reference 参考
4. Caveats 注意事项
5. stress-test 压力测试
6. make sense 合理
7. Alternatively 或者

文章

注意：useLayoutEffect会损伤性能，如果可以的话请使用useEffect

useLayout是userEffect的一种变形，在屏幕重绘之前执行

参考

useLayoutEffect(setup,dependiencies); dependiencies是一个数组，react会用Object.is对每一项进行比对

注意事项

1. useLayoutEffect是一个hook,不能在循环和条件语句里使用
2. 当严格模式下，react将仅会在开发模式下setup执行前额外执行setup+cleanup的生命周期
3. 只在客户端运行，不在服务端运行
4. useLayoutEffect中的代码和状态更新会阻塞浏览器paint
5. 要注意组件内依赖的变量，避免不必要的渲染

用法

在useLayoutEffect里可以提前使用layout的信息来渲染。 整个流程就是：

1. 渲染出初始内容
2. 在页面重绘前处理layout信息
3. 渲染最终的layout信息

文中举了一个tooltip的例子，根据children的高度来改变tooltip的定位，如果使用effect在设备性能不好时会出现闪烁，但用useLayoutEffect就是会先把布局处理好再进行渲染，就是因为useLayoutEffect会阻塞浏览器的渲染，先把top状态设置好。

故障排除

”useLayoutEffect does nothing on the server”

这是因为useLayouteffect不能用于服务端渲染，可以通过以下方式解决

1. 改为useEffect
2. 使用<Suspense>
3. 使用isMount状态初识为false,useEffect改为true,根据该状态渲染所需组件

原文链接