我有使用 Angular 和 Vue 的经验，并开始学习 React。
为什么不是从父组件传递的所有变量都存储在状态对象而不是类的根目录中？另外，为什么 React 需要一个特殊的方法（setState）来改变一个变量的值？变量值可以直接更改，但除非使用 setState，否则视图不会更新。
在 Angular 中：
this.variableName = 'new value';
在反应中：
this.setState({
variableName: 'new value'
});
【问题讨论】：
setState 需要通知 React 重新渲染 DOM。与 Angular 不同，这种方法更高效、更快速。
标签： javascript reactjs
为什么不是从父组件传递的所有变量都存储在状态对象而不是类的根？
这是为了让与特定组件相关的所有状态都存储在一个本地位置。 React 以队列的形式监控状态变化以重新渲染虚拟 DOM。因此需要致电setState({...})
另外，为什么 React 需要一个特殊的方法（setState）来改变一个变量的值？
此方法部分用于防止通过类似于this.state.bar = foo 的调用直接改变状态。这促进了开发中的良好编码原则。同样，React 将使用此方法调用作为催化剂来驱动其执行 React 组件生命周期，其中包括重新渲染虚拟 DOM，这在大多数情况下会导致更新 UI。
Here 是 Facebook 对this.setState() 在做什么的解释。
【讨论】：
setState 不是纯函数。事实上，它是 React API 中仅有的副作用之一。
this.state = foo; 的调用来操作状态大致相同是一个no no i> 在 React 中。 this.SetState 将请求添加到 react 更新队列并更新 this.state 一旦请求准备好被处理，它通过将新状态与旧 NOT 合并 来完成，方法是完全创建一个新对象其中不是纯函数。感谢您的提醒。
这似乎是一个设计决定。
首先，状态通常用于保存组件的本地内容，这些内容可以通过用户操作或来自服务器的推送更新等进行更改 - 例如复选框是否被勾选，或者来自文本框。关键字是它是组件本地的，没有理由让它成为“类的根”（无论这意味着什么）。除此之外还有一些额外的结构，例如 redux/flux 等，这些结构更具有全局性，但常规和小规模的 React 不需要。
setState 的用法也是如此——这是一个设计决定。这不是必需的，React 可能会使用与 Angular 相同的方法，即扫描组件状态字段在某些应用程序级事件上的更改。这会更容易，因为所有被认为是“状态”的东西都放在了state 字段中，而所有影响渲染的东西都在state 或props（可能还有上下文）中。但我发现非常明确的 setState 方法更合理 - 状态更改和触发渲染的点比 Angular 的“未来某个时间”/魔术方法定义得更好。
一个相关的事情是，在 React 中只有一个单向的数据流。基本上DOM = f(State, Props)。对状态的任何更改都必须是明确的。因此，对于 <input> 元素，您需要提供 value 属性，同时还要提供 onChange 属性。后者是在更改时调用的函数，它会在某些时候 setState 并更改状态字段馈入 value 属性（作为渲染的一部分）。将此与Angular 进行对比，其中，AFAIK，您只需提供value，输入和状态之间将存在双向数据流。它在本地看起来更好，但是在组合组件时使用起来很痛苦——以至于我在 Angular 中最常使用的模式来处理它，基本上就是 React 正在做的事情。同样，设计约束可以让您编写更多代码，但也提供了更明智的开发体验。
总体而言，React 构建 UI 的方法比 Angular 甚至 jQuery 或 plain-ol-javascript 更严格。对于一些人来说，这是一种奖励，对于另一些人来说，这很烦人。我已经使用了所有这三个，并且我会选择 React 来完成所有未来的工作。
【讨论】：