UseEffect

143 阅读1分钟

useEffect官方文档

一个简单的useEffect示例如下,它会在每次render之后执行,包括首次的render以及每次更新后的render。

  • useEffect是一个Hook,因此只能在组件的顶层或自己的Hook中调用它,而不能在循环或条件内部调用。
  • Effect只在客户端上运行,在服务端渲染中不会运行。
  • 接受第二个参数来控制跳过执行
  • useEffect是在render之后浏览器已经渲染结束才执行。

useEffect(setup, dependencies?)

  • dependencies:值是可以选的
  1. 不传参数时,默认的行为,会每次render后都执行 界面有任何变化都会执行
useEffect(()=>{
console.log("useEffect no dependencies")
})
  1. 传个空数组,只有第一次会执行
  useEffect(() => {
    console.log("useEffect no array");
  },[]);
  1. 传入一个值,值有变化,就会执行一次
  const [num, setNum] = useState(0);

  useEffect(() => {
    console.log("useEffect no array");
  },[num]);

juejin.cn/post/725925…

useEffect和useLayoutEffect触发时机

  1. useEffect:组件首先渲染或者每次依赖变更重新渲染后异步执行
  2. useLayoutEffect的:在浏览器重新绘制屏幕前同步执行

useLayoutEffect的触发一定在useEffect之前。

浏览器重新绘制之前应该是生成等待绘制的真实DOM的时间点,useLayoutEffect触发是在生成真实并且等待绘制真实dom之后触发的。