useLayoutEffect
- 用法
- 区别
用法
useLayoutEffect 和 useEffect 的使用方式很相似：
- useLayoutEffect 接收一个函数和一个依赖项数组作为参数
- 只有在数组中的依赖项发生改变时才会再次执行副作用函数
- useLayoutEffect 也可以返回一个清理函数
useEffect(()=>{return () => {}
}, 依赖项数组)
区别
| hooks名称 | 执行时机 | 执行过程 |
|---|---|---|
| useEffect | 在浏览器重新绘制屏幕 之后 触发 | 异步 执行，不阻塞浏览器绘制 |
| useLayoutEffect | 在浏览器重新绘制屏幕 之前 触发 | 同步 执行，阻塞浏览器重新绘制 |
export const RandomNumber: React.FC = () => {const [num, setNum] = useState(Math.random() * 200)useEffect(() => {if (num === 0) {setNum(10 + Math.random() * 200)}}, [num])return (<><h1>num 的值是：{num}</h1><button onClick={() => setNum(0)}>重置 num</button></>)
}
将useEffect改成useLayoutEffect后数字不再闪烁
因为点击按钮时，num 更新为 0，但此时页面不会渲染，而是等待 useLayoutEffect 内部状态修改后才会更新页面，所以不会出现闪烁
export const RandomNumber: React.FC = () => {const [num, setNum] = useState(Math.random() * 200)useLayoutEffect(() => {if (num === 0) {setNum(10 + Math.random() * 200)}}, [num])return (<><h1>num 的值是：{num}</h1><button onClick={() => setNum(0)}>重置 num</button></>)
}
