Question

我有Angular和Vue的经验，并开始学习React。

为什么所有未从父组件传递的变量都存储在状态对象中而不是存储在类的根目录中？另外，为什么React需要一个特殊的方法（setState）来改变变量的值？可以直接更改变量值，但除非使用setState，否则视图不会更新。

在Angular中：

this.variableName = 'new value';

在React中：

this.setState({
  variableName: 'new value'
});

Answer 1

为什么所有变量都不是从存储在状态对象中的父组件而不是在类的根处传递的？

这使得与特定组件相关的所有状态都存储在一个本地位置。 React将状态更改监视为重新呈现虚拟DOM的队列。因此需要致电setState({...})

另外，为什么React需要一个特殊的方法（setState）来改变变量的值？

此方法部分用于防止用类似于this.state.bar = foo的调用直接改变状态。这促进了开发中的良好编码原则。同样，React将使用此方法调用作为催化剂来驱动其执行React组件生命周期，其中包括重新呈现虚拟DOM，这在大多数情况下会导致更新的UI。

Here是Facebook对this.setState()正在做什么的解释。

Answer 2

这似乎是一项设计决定。

首先，状态通常用于保存组件的本地内容，可以通过用户操作或来自服务器的推送更新等进行更改 - 例如是否勾选了复选框，或者输入值是否来自文本框。关键字是它对组件来说是本地的，并且它没有理由在类的根部＆＃34;＆＃34; （无论那意味着什么）。除此之外还有额外的构造，例如redux / flux等，并且这些构造更加全局化，但是常规和小规模的React不需要它。

setState的用法也是如此 - 它是一个设计决定。它不是必需的，React可能使用与Angular相同的方法，即扫描组件状态字段在某些应用程序级事件上的更改。它会变得更加容易，因为所有这些都被认为是＆＃34;状态＆＃34;放入state字段，影响渲染的所有内容都在state或props（以及可能的上下文）中。但是我发现非常明确的setState方法更合理 - 状态变化和渲染被触发的点比Angular＆＃34;未来某个时候更明确定义＆＃34; /神奇的方法。

相关的一点是，在React中只有一个单向数据流。基本上DOM = f(State, Props)。对国家的任何改变都必须明确。因此，对于<input>元素，您提供value属性，但也提供onChange属性。后者是在变化时调用的函数，它将在某个时刻setState并将状态字段更改为value属性（作为渲染的一部分）。将此与Angular对比，其中，AFAIK，您只提供value，并且输入和状态之间将存在双向数据流。它在本地看起来更好，但是在编写组件时使用起来很麻烦 - 以至于我在Angular中经常用来处理它的模式基本上就是React正在做的事情。同样，一个设计约束，它使您编写更多代码，但也提供了更加理智的开发体验。

总体来说React比Angular有更严格的构建UI的方法，甚至是jQuery或者普通的javascript。对于某些人来说，这是一个奖励，对于其他人而言，这是一件令人讨厌的事情。我已经使用了所有三个，我选择React用于所有未来的工作。

为什么React中存在状态对象？

2 个答案: