vue&react中的副作用

前言

副作用（side effect）是指在函数或组件中，除了返回值或渲染结果之外，对外部产生的影响。即一个动作引起的其他关联的动作，例如，修改全局变量、发送网络请求、操作DOM、打印日志等，都是副作用。

vue和react是两种流行的前端框架，它们都使用虚拟DOM来提高渲染性能，但是它们对副作用的处理方式有所不同。

vue的思想是响应式的：

它通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式地更新对应的虚拟DOM。它的数据流是发散的，即从变动的位置，发散到子父组件的任何相关联的地方；vue提供了一些生命周期钩子（hook），让开发者可以在不同的阶段执行副作用。例如，created钩子可以用来获取数据，mounted钩子可以用来操作DOM，destroyed钩子可以用来清理资源等。vue还提供了watch和computed属性，让开发者可以根据依赖的变化执行副作用或计算值。

优点：

• 简单易用，自动优化，不需要特别的优化就能达到很好的性能。
• 适合小型和中型应用，对新手友好，学习成本低。
• 提供了模板系统，可以使用普通的HTML，更容易升级和维护。

缺点：

• 当状态特别多的时候，Watcher会很多，会导致卡顿。
• 不够灵活，难以适应复杂的场景和需求。
• 对于函数式编程和不可变数据的支持不够好。

react的思想是函数式的

它推崇使用纯函数来构建组件，纯函数是指没有副作用的函数，它的输出只取决于输入。react使用单向数据流，即从父到子单向流动，结合immutable来实现数据的不可变性。react也提供了一些生命周期方法（method），让开发者可以在不同的阶段执行副作用。例如，

• componentDidMount方法可以用来获取数据，
• componentDidUpdate方法可以用来操作DOM，
• componentWillUnmount方法可以用来清理资源等。

react还提供了setState方法，让开发者可以更新组件的状态，并触发重新渲染。在react的函数组件中，还可以使用useEffect、useMemo、useCallback等自定义钩子，来执行副作用或优化性能。

优点：

• 灵活性和响应性，可以适应各种复杂的场景和需求。
• 适合大型和高性能的应用，对于函数式编程和不可变数据的支持很好。
• 有丰富的生态系统和社区，提供了很多优秀的库和工具。

缺点：

• 需要手动优化，否则可能导致不必要的渲染和性能损失。
• 对于新手不够友好，学习成本高。
• 需要使用JSX语法，不是标准的HTML，有些人可能不喜欢。

总的来说，vue和react都有自己的方式来处理副作用，它们的区别主要在于数据的可变性和更新机制。