从 Vue 到 React：理解作用与副作用

作用 VS 副作用

响应式作用：
响应式作用是 Vue 响应式系统的一部分，它指的是跟踪函数的依赖关系，并在它们的值发生变化时重新运行该函数的过程。watchEffect 是最直接的创建作用的方式（如 watch 和 computed）。

副作用：
副作用（side effect）用于描述超出其局部作用域的操作或函数。当描述一个函数有副作用时，意味着该函数除了返回一个值外，还执行了函数外可以观察到的操作，如更新状态中的值或触发网络请求。该术语通常描述渲染或计算属性。最佳实践是渲染不应该有副作用，同样，计算属性的 getter 函数不应该有副作用。

在函数式编程中，纯函数是指其输出仅依赖于输入参数，没有任何副作用。而副作用是指函数执行过程中对外部状态的修改或者对外部世界的影响。这个概念被引入到响应式框架设计中，用于明确区分哪些仅仅是计算的数据变化的逻辑（作用）和那些影响外部状态的操作。

Vue 中的副作用：
类似于函数式编程的副作用操作，涉及到对外部状态的修改或外部行为的触发。副作用并不是负面的影响。区分：纯粹的计算（作用）和涉及到外部状态或行为（副作用）。利用生命周期钩子 onMounted 和 onUnmounted 管理副作用，确保在加载和卸载时清理外部资源。使用组合式 API，如 watchEffect、watch 和 computed 创建作用，并在需要时处理副作用。

React 中的副作用：
React 中的副作用是指在组件渲染过程中执行的操作，这些操作可能会影响到组件之外的状态或行为。常见的副作用包括数据获取、订阅、手动更改 DOM 以及记录日志等。React 通过 useEffect Hook 来处理副作用。useEffect 接受一个函数，该函数会在组件渲染后执行，可以在函数中返回一个清理函数，以便在组件卸载或副作用重新执行前清理资源。

React 提供了 “严格模式”，在严格模式下开发时，它将会调用每个组件函数两次（但是丢弃第二个结果）。通过重复调用组件函数，严格模式有助于找到违反这些规则的组件。

如需引入严格模式，你可以用 <React.StrictMode> 包裹根组件。

哪些地方可能引发副作用

函数式编程在很大程度上依赖于纯函数，但某些事物在特定情况下不得不发生改变。这是编程的要义！

这些变动包括更新屏幕、启动动画、更改数据等，它们被称为 副作用。它们是 “额外” 发生的事情，与渲染过程无关。

在 React 中，副作用通常属于 事件处理程序。事件处理程序是 React 在你执行某些操作（如单击按钮）时运行的函数。即使事件处理程序是在你的组件内部定义的，它们也不会在渲染期间运行！因此事件处理程序无需是纯函数。

如果你用尽一切办法，仍无法为副作用找到合适的事件处理程序，你还可以调用组件中的 useEffect 方法将其附加到返回的 JSX 中。这会告诉 React 在渲染结束后执行它。然而，这种方法应该是你最后的手段。

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        // 副作用：更新文档标题
        document.title = `You clicked ${count} times`;

        // 清理函数：在组件卸载或副作用重新执行前清理
        return () => {
            document.title = 'React App';
        };
    }, [count]); // 仅在 count 变化时执行副作用

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

React VS Vue

作用与副作用对比

Vue

• 作用：
  • Vue 的响应式系统会自动跟踪依赖关系，并在依赖变化时重新计算。
  • 使用 watchEffect、watch 和 computed 来创建作用。
• 副作用：
  • 副作用是指对外部状态的修改或外部行为的触发。
  • 使用生命周期钩子如 onMounted 和 onUnmounted 来管理副作用，确保在加载和卸载时清理外部资源。
  • 组合式 API（如 watchEffect、watch 和 computed）可以处理副作用。

React

• 作用：
  • React 没有内置的响应式系统，依赖于组件的状态和属性来触发重新渲染。
• 副作用：
  • 副作用是指在组件渲染过程中执行的操作，可能会影响组件之外的状态或行为。
  • 使用 useEffect Hook 来处理副作用。
  • useEffect 接受一个函数，该函数会在组件渲染后执行，可以返回一个清理函数，以便在组件卸载或副作用重新执行前清理资源。

以上 →🐒