重点: 1.二者函数签名相同,调用方式是一致的
2. 怎么简单进行选择: 无脑选择useEffect,除非运行效果和你预期的不一致再试试useLayoutEffect
区别详解:
useEffect是异步执行,而且是在渲染被绘制到屏幕之后执行。
流程如下:
你以某种方式触发了rerender(改变state,或者父组件发生rerender)
React渲染你的组件(调用组件函数)
屏幕在视觉上更新(真实dom操作)
然后useEffect运行
useLayoutEffect是同步执行,时机在渲染之后但在屏幕更新之前。
流程如下:
你以某种方式触发了rerender(改变state,或者父组件发生rerender)
React渲染你的组件(调用组件函数)
useLayoutEffect运行,React等待它完成
屏幕在视觉上更新(真实dom操作)
代码实战:
const BlinkyRender = () => { const [value, setValue] = useState(0); useLayoutEffect(() => { if (value === 0) { setValue(10 + Math.random() * 200); } }, [value]); console.log('render', value); return ( <div onClick={() => setValue(0)}> value: {value} </div> ); };