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更复杂，因此稍贵（即使比重新渲染更便宜）。

如果{em>不涉及mapStateToProps()的Redux状态更改不会调用activeList，则可以解决所有问题。

这样的优化是否可行？

Answer 1

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

首先：不，您不能mapState调用未受影响的连接组件＆＃34;。根据定义，Redux只有一个事件发射器，并且不会跟踪调度期间可能状态的哪些部分。由每个订阅者自行检查新状态并查看是否存在相关更改。

第二：是的，为每个单独的击键调度单独的动作并不是特别有效。我在自己的应用程序中通过编写一个高阶组件来处理它，该组件使用其状态来缓冲更改，以便更快地重新呈现输入，同时去除动作调度。我有regex demo - 从那时起做了一些更新，但这是一般的想法。您可能还想查看that component available in a gist，React-Reformed或React-Form这样的库，这些库提供了一些类似的部分，这些部分可能需要更多的工作，然后是我的代码。< / p>

第三：看起来你正在绕过一系列活跃的＆＃34;每个复选框组件的项目，并比较该组件内的索引。这不是一个非常高效的模式。一个更好的方法可能是父组件有一个ID列表，将ID传递给每个连接的子节点，并让每个子节点通过其mapState中的ID查找自己的数据。有关详细信息，请参阅React-Redux-Form上的这些幻灯片。作为High-Performance Redux的一部分，我还在Redux Performance上提供了其他信息。

如何避免无用的mapStateToProps（）？

1 个答案: