Question

这是我第一次尝试使用react和redux创建一些东西。所以我的目标是构建一个数据表。（我可能已经使用了一些现有的，但我想用这个来挑战自己。）

该表呈现仅在屏幕上可见的行，您可以显示/隐藏/交换/固定/调整列大小，并且像这样的每个操作也会在localstorage中保存配置文件。可以对行进行过滤，编辑和检查＆＃34;与他们做一些其他的行动。因此该组件非常全面，具有许多功能。我基本上已经完成了它，并且它可以工作。

但是我使用了redux，并且通过在线跟踪任何示例 - 他们说＆＃34;按照逻辑＆＃39;制作一个连接的组件。成分＆＃34;

所以我做到了 - 整张桌子都有1个减速机。但直到现在，我注意到了一个严重的滞后。

当我尝试输入＆＃34; aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa＆＃34;在1个滤波器输入中，它非常严重地挂起。

输入单元格相当简单 -

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

handleChange()将此事件调度到reducer

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

还原剂是一个简单的还是

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

Chrome性能工具记录了这个可怕的事情：

从例子中 - 许多人说：

React-redux只会重新发送变化的内容

但事实并非如此。它为组件中的所有东西调用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通过区分旧的和新的道具和状态来检查原因。尝试首先减少父组件的渲染，然后移向子组件，就像父渲染一样，无论子道具或状态是否发生变化，子组件肯定会渲染。

3）使用debouncing onchange handler ref

4）虽然可以注意到简单但非常好的改进，如果你可以通过redux-batched-middleware批量处理你的行动

记住，反应总是运行其差异算法，并在每次渲染时生成一个新的V-DOM，无论物理dom是否发生变化。您可以使用我的指针帮助减少这些渲染。

使用shouldComponentUpdate

1 个答案: