字数

849 字

阅读时间

4 分钟

在 React 中，副作用函数（Side Effect Functions）是指在组件的渲染过程中，除了渲染 UI 之外执行的操作。副作用通常指那些不直接影响渲染输出的操作，比如 数据获取、订阅、计时器、手动操作 DOM 等。

副作用的定义比较广泛，任何不直接影响组件的渲染输出的行为都可以视为副作用。它们通常需要在组件渲染后执行，因此 React 提供了 useEffect 和 useLayoutEffect 这两个 Hook 来管理副作用。

常见的副作用类型

1. 数据获取：在组件加载时从服务器获取数据。

2. 订阅和事件监听：在组件挂载时设置订阅或事件监听器，在卸载时清理。

   定时器：设置定时器、计时器或轮询等操作。

   手动操作 DOM：直接修改 DOM 元素或触发浏览器的 API 调用。

   日志记录和调试：例如，记录组件的渲染或用户行为。

React 的核心目标是提供一个高效、声明式的 UI 更新框架。通常情况下，组件的状态和 UI 是直接绑定的——状态变化会导致视图的更新。而副作用操作则超出了这一范畴，它们并不直接影响渲染输出，但又是应用程序所需要的重要功能（如获取数据、设置订阅等）。

例如，当你从服务器加载数据时，加载数据 是一个副作用操作，因为它不直接影响 UI 的渲染输出，而是在后端进行异步操作。如果你直接在组件函数中执行这样的操作，会打破 React 的渲染流程。

React 如何管理副作用？

React 通过 useEffect 和 useLayoutEffect 两个 Hook 来处理副作用。

1. useEffect：用于处理 非阻塞 的副作用操作。它的默认行为是异步执行，通常用于处理异步操作（如数据获取、事件监听、定时器等）。useEffect 会在组件渲染完成后执行副作用操作，确保不阻塞浏览器的渲染。 useLayoutEffect：与 useEffect 类似，但它会 同步 执行副作用，在浏览器绘制屏幕之前进行。useLayoutEffect 常用于需要 同步 DOM 更新 或 强制布局计算 的场景，如测量 DOM 元素的大小或位置。大多数副作用操作应该使用 useEffect，只有在特别需要同步执行副作用时才使用 useLayoutEffect。

   如何使用副作用函数？

副作用函数通常放在 useEffect 中。useEffect 可以接收两个参数：

1. 副作用函数：执行副作用的函数，它会在组件挂载后执行。
2. 依赖数组：告诉 React 什么时候重新运行副作用函数。它是一个可选参数，数组中的值会告诉 React 在特定状态变化时重新运行副作用。

贡献者

sunchengzhi

文件历史

最后编辑于 大约 2 个月前查看完整历史

de5fa-fix:修改文件名