React中useLayoutEffect和useEffect的区别

重点: 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> ); };

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyxxgp.html