什么是副作用
副作用（Side Effects）在编程中是一个非常常见的概念，特别是在函数式编程和组件化的 UI 开发中。在 React 的上下文中，副作用指的是那些与组件的渲染不直接相关，但可能因组件的渲染、更新或卸载而需要执行的操作。
以下是一些常见的副作用：
- 网络请求 ：例如，当组件挂载时，你可能需要从 API 获取数据。
- 订阅 ：例如，监听某个数据流或事件。
- 手动的 DOM 操作 ：直接操作 DOM 元素，尽管在 React 中这种操作是少见的。
- 计时器 ：如
setTimeout或setInterval。 - 事件监听 ：例如，监听键盘或鼠标事件。
- 写入本地存储 ：如使用
localStorage或sessionStorage。
在类组件中，这些副作用通常在生命周期方法中处理，如 componentDidMount、componentDidUpdate 和 componentWillUnmount。
但在函数组件中，由于没有生命周期方法，React 引入了 useEffect Hook 来帮助我们处理副作用。使用 useEffect，我们可以集中处理与组件渲染相关的所有副作用，而不是将它们分散在多个生命周期方法中。
为什么需要关心副作用？
- 性能 ：不正确地处理副作用可能导致不必要的操作，如多余的网络请求或事件监听，这可能会影响应用的性能。
- 资源泄漏 ：例如，如果你在组件挂载时添加了一个事件监听器，但在组件卸载时忘记移除它，这可能会导致内存泄漏。
- 数据一致性 ：确保组件的状态与外部数据源（如 API 或全局状态）保持同步是很重要的。
总之，副作用是那些与组件的直接渲染不相关，但与组件的生命周期和状态紧密相关的操作。正确地管理和优化这些副作用对于构建高效、可靠的 React 应用至关重要。
副作用这个说法是如何产生的
"副作用"（Side Effects）这个术语在计算机科学和编程中有着深厚的历史。它的起源与函数式编程的概念紧密相关，特别是在纯函数和引用透明性的上下文中。
在函数式编程中，一个函数被认为是"纯的"（Pure）当且仅当它满足以下条件：
- 对于相同的输入，它总是返回相同的输出。
- 它不产生任何观察到的副作用。
所谓的"观察到的副作用"是指函数在执行过程中除了返回值之外对外部世界产生的任何影响。这包括但不限于：
- 修改外部变量或数据结构。
- 写入文件或数据库。
- 修改全局变量或状态。
- 触发网络请求。
- 输出到屏幕或控制台。
这个概念的背后是一个核心思想：纯函数更容易推理和测试，因为它们的行为完全由它们的输入决定，而不是由外部状态或其他不可预测的因素决定。
"副作用"这个术语在函数式编程社区中已经使用了很长时间，但随着前端开发和特别是 React 的兴起，它在前端开发者中变得更加流行。React 和其他现代前端框架鼓励开发者以声明式的方式编写 UI，这种方式与函数式编程的原则非常相似。因此，当我们在 React 中讨论组件的副作用时，我们实际上是在应用这些古老的函数式编程概念。
总的来说，"副作用"这个术语是从函数式编程的世界中借来的，它帮助我们描述和管理那些不纯粹、可能导致不可预测行为的操作。