javascript - 使用shouldComponentUpdate优化react redux组件

Question

这是我第一次尝试使用 React 和 Redux 创建一些东西。 所以我的目标是建立一个数据表。 (我可能可以使用一些现有的，但我想用这个挑战自己)。

表格呈现的行仅在屏幕上可见，您可以显示/隐藏/交换/固定/调整列大小，并且像这样的每个操作也会将配置文件保存在本地存储中。可以对行进行过滤、编辑和“检查”以对其执行一些其他操作。 所以该组件非常全面，具有很多功能。 我基本上已经做到了，并且有效。

但是我使用了 redux，并且通过遵循任何在线示例 - 他们说“为每个‘逻辑’组件创建一个连接的组件”。

所以我做到了 - 我为整个表准备了 1 个 reducer 。但直到现在，我才注意到严重的滞后。

当我尝试在 1 个过滤器输入中输入“aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa”时，它挂起得非常严重。

输入单元相当简单 -

<input ref={el => this.input = el} className="form-control" type="text" value={this.props.value} onChange={this.handleChange} />

并且handleChange()将此事件分派(dispatch)给reducer

handleChange(evt) {
    this.props.onFilterInputChange({fieldName: this.props.fieldName, value: this.input.value});
}

reducer 也很简单

case types.ON_FILTER_INPUT_CHANGE: {
    const spec = {
        currentFilter: {
            [action.params.fieldName]: { $set: action.params.value }
        }
    };
    return update(state, spec);
}

Chrome 性能工具将这件可怕的事情记录如下:

从例子来看 - 许多人这样说:

React-redux rerenders only the things that change

但事实并非如此。它为组件中的所有内容调用 render() ，这就是我的表运行如此缓慢的原因。 我尚未将 shouldComponentUpdate() 添加到我的任何组件中。

我的问题是:如何让它运行得更快？

将其添加到我的所有组件中会使其变得更好吗？

shouldComponentUpdate(newProps, newState) {
    let keys = Object.keys(this.props);
    let result = false;
    for (let i = 0; i < keys.length; i++) {
        if (this.props[keys[i]] !== newProps[keys[i]]) {
            result = true;
            break;
        }
    }
    return result;
}

这似乎让它的响应速度更快了。

但在此之前我对 redux 有所怀疑 - 将所有状态存储在单个原子中..

Answer 1

这是一个有点复杂的主题，但值得付出努力。我之前的一些建议answer :

除此之外

1)仅当react-perf显示较少渲染时才使用shouldComponentUpdate/React.PureComponent，否则您的应用程序可能会出现难以调试的错误

2) 对于获得更多渲染(V-DOM 渲染)的组件，请使用 componentWillUpdate 通过比较新旧 props 和状态来检查原因。尝试先减少父组件的渲染，然后再转向子组件，就像父组件渲染一样，子组件一定会渲染，不管它的 props 或 state 是否改变。

3) 使用去抖动 onchange 处理程序 ref

4) 虽然很简单，但如果您可以通过 redux-batched-middleware 批量操作，将会注意到非常好的改进。

请记住，无论物理 dom 是否发生变化，react 始终运行其比较算法并在每次渲染时生成新的 V-DOM。您可以通过我的指导来帮助减少这些渲染。