vue 和 react 的不同点

什么是 Mutable 什么是 Immutable对象

• Mutable对象：

在JavaScript中，对象是引用类型的数据，其优点在于频繁地修改对象时都是在原对象的基础上修改，并不需要重新创建，这样就可以有效地利用内存，不会造成内存空间的浪费

• Immutable对象：

每次修改一个immutable对象时都会创建一个新的不可变对象，在新对象上的操作不会影响到原对象的数据

• 区别： Immutable对象在修改数据时并不会复制一整份数据，而是将变化的节点与未变化的节点的父子关系转移到一个新节点上，而Mutable在复制时是“全量”。Immutable对象需要通过set和get来对数据进行读和写

响应式(Reactivity)的不同

• 以 Vue 为代表的 mutable + change tracking(变更追踪)。即可变的数据结构，配合变更追踪，触发更新函数。
• 以 React 为代表的 immutability + referential equality testing(引用相等性)。即不可变的数据结构，配合反复执行的渲染函数，以及在函数执行过程中，通过数据的引用相等性判断，找出变更部分，只应用变化的部分到 UI 上。

文章图参考自: Reactivity with different tradeoffs (opens new window)

1. React 也有 Mutatble

TIP

上面讲到 React 是采用Immutability模式，但是并不意味着所有的数据都是immutablity，React 里也有 mutable 的部分，比如

• 最直观的 useRef。它不但是 mutable 的，甚至是 React 亲自进行 mutate。 useRef(null) 初始值是 null，在渲染到 DOM 之后，React 亲手以 mutable 的方式，将 div 元素赋值给 ref.current，因此我们才得以在 useEffect 内部访问 div 元素。

• useEffect 函数更是明确表明，可以在内部执行命令式风格的 side-effects 副作用代码。

• 在事件处理函数里，我们也可以执行副作用代码。

React 自始至终，都只是致力于让 render 函数/function-component 尽可能没有副作用和可变数据。而不是排斥一切 mutable 和 side-effects。

React 所做的是，延后和隔离副作用，以便更好的管理。

参考

• 打破框架的范式之争 (opens new window)