React useEffect 笔记

137 阅读2分钟

本文是学习 useEffect 的笔记,基于useEffect 完全指南 整理

基本用法

useEffect(didUpdate);

useEffect 第一个参数是更新函数,第二个参数是依赖数组。

更新函数,默认在每轮渲染结束后执行,确切的说是,在渲染结束后,在浏览器布局和绘制后延迟执行,要想同步执行可以用 useLayoutEffect。

依赖数组,控制更新函数条件执行,依赖项应该和函数使用的组件内变量对应,才能保证更新函数正确的执行。

副作用成为数据流的一部分

这里副作用专指那些处理数据的函数。

函数组件每次渲染相当于函数调用,函数组件内部的函数(副作用)和访问的组件内的变量构成了闭包。因此副作用和每次渲染时的数据是绑定在一块的,即副作用成为数据流的一部分。

无需关注生命周期

useEffect 在组件每次渲染后且浏览器绘制之后调用。因此不会阻塞页面的展示。

组件第一次加载还是后续更新都会渲染,useEffect 都会调用。

因此,useEffect 何时渲染?只需关注依赖项,无需关注生命周期

依赖项

简单来说,Effect 函数引用的值都应该在依赖项中出现,这样确保函数在依赖变化时,正确的执行。

但如果在 Effect 函数中更新依赖项,就会造成死循环,这时候就需要消除不必须的依赖项。

消除依赖项

核心是,在 Effect 函数中,只描述如何更新逻辑。有两种描述如何更新的方式

如果用 useState 保存状态,用函数的方式描述如何更新。

如果用 useReducer 保存状态,用 dispatch 描述如何更新,在 reducer 中更新状态。

追踪依赖

考虑到代码是从简单到复杂的过程,那么如何确保在代码复杂时,保证依赖项的完整。有两种方式做到这点。

1,把函数逻辑都写在 useEffect 回调函数里,方便追踪依赖

2,提取逻辑为一个函数, 用 useCallback 包裹它,依赖项为函数依赖的组件内的变量,返回值作为 useEffect 的依赖项