reactjs - ReactJS 控制组件和不可变数据

Question

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

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

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

在将 state 放置到 store 或将其保存在本地之间通常需要权衡取舍。这两种方法都适用于不可变集合。

本地状态是使用 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

2 回答 2