聊聊React中的useEffect

最新推荐文章于 2024-11-17 17:13:30 发布

凌晨哥哥

最新推荐文章于 2024-11-17 17:13:30 发布

阅读量1.4k

点赞数 1

分类专栏： react.js 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45240168/article/details/126525048

版权

react.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

·useEffect

官方解释：

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做
componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

哪里会使用useEffect：

使用场景：
不需要清除副作用：发送网络请求、调用接口、手动更改 React 组件中的 DOM
需要清除副作用：例如订阅外部数据源，这种情况下，清除工作是非常重要的，可以防止引起内存泄露

useEffect参数：
参数一：effect，该参数是一个函数，必传项。
参数二：deps（依赖项），非必传项，可为空、为[ ]、为基本类型或引用数据类型组成的数组[ number, array ]

不添加任何依赖项：（不建议）
第一次渲染且每次render都会进行执行调用
因为每次调用setState都会触发render

添加依赖项：
a. [ ]: 只在初始化执行一次，因为依赖项为 [ ]，不会触发render
b. [ number ]: 会在第一次渲染后执行，且每当依赖项number更新渲染后都重新执行（若依赖项为多个值，只要有一个依赖项更新，就会执行）
//若频繁操作state，会报错“超过最大更新深度”，推荐使用useRef，它每次返回的都是同一个ref（且是最新值）
c. [ Function || Object ]：依赖项为函数，会在第一次渲染及每次更新渲染后执行
// 若频繁的调用setState(如内部有一个定时器：number++)，会报“超过最大更新深度”的错，推荐使用useCallback来进行缓存

对应的声明周期

  useEffect(() => {
    console.log("挂载","componentDidMount");
  },[])
  
  useEffect(() => {
    console.log("更新操作","componentDidUpdate");
  },[number])
  
  useEffect(() => { 
  	// return 用来清除副作用
    return () => {
      console.log("注销操作","componentWillUnmount");
    }
  },[])

·useLayoutEffect

useLayoutEffect 的执行时机比useEffect执行更早，区别在于：
useEffect在Dom更新之后执行
useLayoutEffect在Dom更新之前执行
关于它们俩个如何使用看官方文档怎么说：

如果你正在将代码从 class 组件迁移到使用 Hook 的函数组件，则需要注意 useLayoutEffect 与 componentDidMount、componentDidUpdate 的调用阶段是一样的。但是，我们推荐你一开始先用 useEffect，只有当它出问题的时候再尝试使用 useLayoutEffect。
如果你使用服务端渲染，请记住，无论 useLayoutEffect 还是 useEffect 都无法在 Javascript 代码加载完成之前执行。这就是为什么在服务端渲染组件中引入 useLayoutEffect 代码时会触发 React 告警。解决这个问题，需要将代码逻辑移至 useEffect 中（如果首次渲染不需要这段逻辑的情况下），或是将该组件延迟到客户端渲染完成后再显示（如果直到 useLayoutEffect 执行之前 HTML 都显示错乱的情况下）。
若要从服务端渲染的 HTML 中排除依赖布局 effect 的组件，可以通过使用 showChild && 进行条件渲染，并使用 useEffect(() => { setShowChild(true); }, []) 延迟展示组件。这样，在客户端渲染完成之前，UI 就不会像之前那样显示错乱了。

react官网