ReactJS 控制组件和不可变数据

Posted 2023-02-22

【中文标题】ReactJS 控制组件和不可变数据

【英文标题】：ReactJS controlled component and immutable data

【发布时间】：2015-03-31 17:29:47

【问题描述】：

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

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

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

虽然这应该可行，但这是在使用不可变数据时实现受控组件的（唯一）方式吗？使用 Flux 完成所有这些操作（触发一个动作，获取存储数据......）对于像在输入框中输入这样简单的事情来说可能会产生很多开销/往返。

【参考方案1】：

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

另外，关于不更新，唯一一次调用 setState 不会触发同一组件中的更新是如果您有一个过于否定的shouldComponentUpdate。如果您需要本地状态，shouldComponentUpdate 应该考虑到这一点。

【参考方案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);

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