javascript - 如何避免无用的mapStateToProps()？

Question

假设一个 React + Redux 应用程序的页面包含 ~100 MUI checkboxes .

所有这些都是使用 Redux 状态控制的，如下所示:

let CheckboxComponent = React.createClass({

  shouldComponentUpdate(nextProps) {
    return nextProps.activeList !== this.props.activeList;
  }

  render() {

    let isChecked = this.props.activeList.indexOf(this.props.myId) >= 0;

    return <Checkbox
      checked={isChecked}
    />;
  }

});

function mapStateToProps(state) {
  return {
    activeList: state.form.myForm.values.activeList;
  };
}

CheckboxComponent = connect(mapStateToProps)(CheckboxComponent);

现在，假设我还有一个受控 <input>在同一页面上，使用相同的 Redux 存储。输入中的每次按键都会导致 Redux 状态发生变化。因此，虽然输入此内容会导致许多更改，但不适用于 activeList 。

我担心的是 - 如果我没记错的话 - mapStateToProps结果shouldComponentUpdate每个<CheckboxComponent>每次击键都会调用 - 这是几百次无用的函数调用。

幸运的是，shouldComponentUpdate将避免无用的重新渲染，但实际上我的 shouldComponentUpdate更复杂，因此稍微昂贵(即使比重新渲染便宜)。

如果mapStateToProps()，所有这些都可以解决不会为不涉及 activeList 的 Redux 状态更改调用.

这样的优化是否可以通过某种方式实现？

Answer 1

这个问题有几个不同的答案。

首先:不，您无法避免对“不受影响”的连接组件进行 mapState 调用。根据定义，Redux 只有一个事件发射器，并且不跟踪状态的哪些部分在调度期间可能发生了变化。由每个订阅者检查新状态并查看是否有相关更改。

第二:是的，为每个单独的击键分派(dispatch)单独的操作并不是特别有效。我在自己的应用程序中通过编写一个高阶组件来处理这个问题，该组件使用其状态来缓冲更改，以便更快地重新渲染输入，同时消除 Action 调度。我有that component available in a gist - 此后进行了一些更新，但这就是总体思路。您可能还想查看诸如 React-Reformed 之类的库, React-Form ，或React-Redux-Form ，其中提供了一些类似的部分，这些部分可能比我的代码投入了更多的工作。

第三:看起来您正在将一组“事件”项目传递给每个单独的复选框组件，并比较该组件内的索引。这不是一个非常高效的模式。更好的方法可能是让父组件拥有一个 ID 列表，将 ID 传递给每个连接的子组件，并让每个子组件在其 mapState 中通过 ID 查找自己的数据。请参阅 High-Performance Redux 上的这些幻灯片了解更多信息。我还有关于 Redux Performance 的其他信息作为我的 React/Redux links list 的一部分.