javascript - 为什么 React 及其生态系统会采用不变性的概念?

标签 javascript reactjs ecmascript-6

在 ES6 中,还有其他方法来声明变量,例如 letconst

A variable declared with const cannot be re-assigned or re-declared.

为什么 React 应用程序中有这么多 const 声明,以及使用 const 相对于 varlet 有什么独特的好处

最佳答案

第一answer by @Carcigenicate正确解释const的用法。 但仅使用 const 关键字不足以实现不变性。 例如您可以改变 const 数组:

const a = [12,14,15];
a[0] = 13; // allowed. but mutate a value.

为了在属性级别实现对象的不变性,新的 JS 提供使用 Object.freeze().assign() 等,或者您也可以使用像 immutableJS 这样的新库(还有一些更好的可供查看)。

关于 React 中的不变性,React 组件是纯函数。他们接受 Prop 并返回 View 。 纯函数是函数式编程的基础。它们带来了各种各样的好处(实现组合、易于理解函数代码单元、易于测试等等)。纯函数没有任何副作用。它也不能修改参数对象,并将其视为不可变。

enter image description here

React组件创建的DOM形成虚拟DOM,仅通过setState调用检测数据变化。在调用 setState 时,它会使用react并触发其真正的 DOM 更新算法。如果开发者更新了 props,这种情况就不会发生。这篇文章解释了这一点:http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

React 鼓励单向数据流,更新状态作为 props 从上到下流动,对用户操作的 react 作为方法调用向上流动。数据流使调试/理解 react 应用程序变得容易的一种方式。

我创建了下图来理解 official React docs 中所示的示例

enter image description here

关于javascript - 为什么 React 及其生态系统会采用不变性的概念?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44915694/

相关文章:

javascript - 如何获取对象中的数组值?

javascript - Google Maps API 相同示例 : one renders, 一个不

javascript - 获取数据时如何更新@mui/x-data-grid表

reactjs - 关闭应用程序后如何在React Native中实现推送通知

javascript - Babel (gulp-babel) 未捕获的 ReferenceError : require is not defined

javascript - js 中的 ATM 货币面额程序,可以灵活地处理和分配最少的纸币

reactjs - 为什么新的 `Pick<T, K extends keyof T>` 类型允许 React 的 `K` 中的 `setState()` 的子集?

javascript - 获得意外的 token 导出

javascript - Rails Webpacker 和 stage-2 类转换属性不起作用

javascript - React.js 传递 => Prop