useLayoutEffect
-
useLayoutEffect 执行顺序，组件更新挂载完成 => 执行 useLayoutEffect 回调 => 浏览器 DOM 绘制完成 => 执行 useEffect 回调 。
- 大部分的情况
useEffect 中请求数据即可，useLayoutEffect 代码可能会阻塞浏览器的绘制。
import './App.css';
function App() {
let [num, setNum] = useState(0);
const add = () =>{
setNum(num+1);
}
useLayoutEffect(()=>{
console.log('useLayoutEffect', num);
alert('点击确定后执行 useEffect');
})
useEffect(()=>{
console.log('useEffect', num);
})
return (
<div className="App">
<h1 onClick={add}>{num}</h1>
</div>
);
}
export default App;
