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都有自己的方式来处理副作用,它们的区别主要在于数据的可变性和更新机制。

你可能感兴趣的:(JavaScript学习记录,技术分享,vue.js,react.js,前端)