一个简单的useEffect示例如下,它会在每次render之后执行,包括首次的render以及每次更新后的render。
useEffect是一个Hook,因此只能在组件的顶层或自己的Hook中调用它,而不能在循环或条件内部调用。Effect只在客户端上运行,在服务端渲染中不会运行。- 接受第二个参数来控制跳过执行
useEffect是在render之后浏览器已经渲染结束才执行。
useEffect(setup, dependencies?)
- dependencies:值是可以选的
- 不传参数时,默认的行为,会每次
render后都执行 界面有任何变化都会执行
useEffect(()=>{
console.log("useEffect no dependencies")
})
- 传个空数组,只有第一次会执行
useEffect(() => {
console.log("useEffect no array");
},[]);
- 传入一个值,值有变化,就会执行一次
const [num, setNum] = useState(0);
useEffect(() => {
console.log("useEffect no array");
},[num]);
useEffect和useLayoutEffect触发时机
useEffect:组件首先渲染或者每次依赖变更重新渲染后异步执行useLayoutEffect的:在浏览器重新绘制屏幕前同步执行
useLayoutEffect的触发一定在useEffect之前。
浏览器重新绘制之前应该是生成等待绘制的真实DOM的时间点,useLayoutEffect触发是在生成真实并且等待绘制真实dom之后触发的。