React使用useEffect与useLayoutEffect的区别

时间:2021-2-20 作者:admin

useEffect 是每次render之后就会调用的函数,可以代替之前的三个钩子

useEffect可以接受两个参数

案例

要想知道 +1操作这个app什么时候第一次渲染,可以使用useEffect,第二个参数必须是空数组,这样只在第一次调用时执行,第二三次不执行

//使用useEffect之前要先引入
import React, { useEffect,useState } from 'react'
import ReactDOM from 'react-dom'

function App(){
  const [n,setN] = useState(0);
  const add=()=>{
    setN(i=>i+1);
  };

  // 第一次渲染,只执行这一次,[]要在第二个参数
useEffect(()=>{
      console.log('这是第一次渲染执行这句话');
    },[]);

  return(
    <div>
      n:{n}
      <button onClick={add}>+1</button>
    </div>
  )
}

ReactDOM.render(<App />,document.getElementById('root'));

每次渲染都要执行,只要有一个数据变化了就执行,不用写第二个参数

useEffect(()=>{
      console.log('这是第一次渲染执行这句话');
    });

当某一个数据变化了就执行,例如当n变化了就执行

useEffect(()=>{
      console.log('n变化了');
    },[n])

使用useEffect是为了干什么呢?

当代码有副作用了,用于清除副作用,清除定时器等

对环境的改变即为副作用,如修改document.title,但我们不一定非要把副作用放在useEffect里

useLayoutEffect和useEffect的用法一样,但也有区别

  • useEffect是按照顺序执行代码的,改变屏幕像素之后执行(先渲染,后改变DOM),当改变屏幕内容时可能会产生闪烁

  • useLayoutEffect是改变屏幕像素之前就执行了(会推迟页面显示的事件,先改变DOM后渲染),不会产生闪烁

注意:

  • useLayoutEffect总是比useEffect先执行
  • useLayoutEffect里的任务最好影响了Layout
  • 为了用户体验,优先使用useEffect(优先渲染)
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。