Question

我想知道怎么做如果应用程序的数据构建在不可变数据上，并且应用程序在shouldComponentUpdate（）中使用“===”相等运算符来快速重新呈现，则可以实现controlled components（例如输入框）。

让我们假设深层次嵌套数据和层次结构深处的受控组件：

当使用本地组件状态（setState（））时，正常情况下会执行此操作，因为组件层次结构呈现过程可能会跳过分支，因此不会看到更改，因为不可变数据未更改。为避免这种情况，所有本地组件状态必须处于应用程序状态，受控组件上的每个事件（例如，在输入框中键入）都必须导致更改不可变数据。

虽然这应该有用，但是当使用不可变数据时，这是（唯一的）方式实现受控组件吗？使用flux（触发动作，获取存储数据......）执行此操作可能需要进行大量的开销/往返操作，只需在输入框中输入即可。

Answer 1

组件的状态是放置您不需要持久保存或从多个位置访问的数据的好地方。一个常见的例子是未提交的表单。当用户确实提交表单时，您可以向上传递本地状态（在props中回调）或水平传递（动作，事件发射器，api等）。

此外，关于不更新，调用setState不会在同一组件中触发更新的唯一时间是，如果您的过度负shouldComponentUpdate。如果您需要本地州，shouldComponentUpdate应考虑到这一点。

Answer 2

在将状态放置到商店或在本地保存之间通常需要权衡。这两种方法都适用于不可变集合。

使用setState处理本地状态，没有直接的this.state访问。 JS字符串是不可变的，所以无需关心

onChange: function(event) {
  this.setState({value: event.target.value}); 
}

发送到商店几乎是一样的：

onChange: function(event) {
  var flux = this.getFlux();
  flux.actions.setSomeValue(event.target.value);
}

存储获取操作并在不可变集合中执行update / updateIn