ReactJS 控制组件和不可变数据

Question

我想知道如何 controlled components 如果应用的数据基于不可变数据构建并且应用在 shouldComponentUpdate() 中使用“===”相等运算符以实现快速重新渲染，则可以实现（例如输入框）。

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

当使用本地组件状态 (setState()) 作为正常实现时，更改不会被 React 看到，因为组件层次结构渲染过程可能会跳过分支，因为不可变数据没有改变。为避免这种情况，所有本地组件状态都必须存在于应用程序状态中，并且受控组件上的每个事件（例如在输入框中键入）都必须导致更改不可变数据。

虽然这应该可行，但这是使用不可变数据时实现受控组件的（唯一）方式吗？？？使用 flux 来完成这一切（触发一个动作，获取商店数据...）可能需要很多 overhead/round-trips 对于像在输入框中键入这样简单的事情。

Answer 1

组件的状态是放置不需要持久保存或从多个位置访问的数据的好地方。一个常见的例子是未提交的表单。当用户确实提交表单时，您可以向上（道具中的回调）或水平（动作、事件发射器、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

ReactJS controlled component and immutable data