javascript - 多个 setState 排队并导致一切都感觉很慢

Question

我有一个带有 4 个按钮的 ReactJS 菜单组件，它触发我页面的右侧，还有一堆过滤器在点击时重新加载。

render: function() {
    return (
        <div className="menu">
            {
                this.state.items.map(function(menuNode) {
                    return (
                        <MenuItem item={menuNode} onClick={this.handleClick} key={menuNode.name} />
                    );
                }, this)
            }
        </div>
    );
},
handleClick: function(selected) {
    this.state.items.forEach(function(item) {
        item.selected = false;
    });
    selected.selected = true;
    this.setState({
        items: this.state.items
    });

    resetReact.BoxStructure(selected);
    resetReact.Filter(selected);
}

resetReact.BoxStructure() 和 resetReact.Filter() 触发 setProps()/setState() 在我的页面 (BoxStructure) 和过滤器组件中添加了新内容。

它们在每个组件的 componentDidMount 中设置，如下所示:

var BoxStructure = React.createClass({

    ...

    componentDidMount: function() {
        if(this.props.callback)
            this.props.callback();

        resetReact.BoxStructure = function(selected) {
            this.state.boxes = selected.content;
            this.setProps({
                color: selected.color,
                callback: selected.callback,
                key: selected.name
            });
        }.bind(this);
}
});

这行得通，但菜单感觉真的很慢，就像在更改所选菜单项之前等待整个页面加载一样。 BoxStructure 需要几秒钟的时间来加载，这很好并且是预期的，但我不希望菜单在更改所选项目之前等待它。从用户的 Angular 来看，当我点击按钮时，感觉就像什么都没有发生。

这可以通过添加 setTimeout 1ms 来解决:

handleClick: function(selected) {
    this.state.items.forEach(function(item) {
        item.selected = false;
    });
    selected.selected = true;
    this.setState({
        items: this.state.items
    });
    setTimeout(function() {
        resetReact.BoxStructure(selected);
        resetReact.Filter(selected);
    }, 1);
}

现在菜单会立即更改，然后页面可能会根据需要呈现多长时间，这正是我想要的方式，但问题是为什么以及我是否做错了根本性的事情？我认为 setTimeout 强制重新加载是异步的，但我觉得这不是实现我想要的目标的正确方法，也许 ReactJS 在某处内置了更好的方法。

Answer 1

您应该努力使您的 BoxStructure 和 Filter 代码更高效。您可能想要分析它们、打印毫秒时间戳以及执行其他类似操作。

如果您知道这些调用会很慢，并且您想向用户反馈正在发生的事情，您可能希望延迟这些繁重的调用，直到之前的状态更新完成并呈现。

做到这一点的方法是使用 setState 的回调:

handleClick: function(selected) {
    ...
    this.setState({
        items: ...
    }, function() {
        resetReact.BoxStructure(selected);
        resetReact.Filter(selected);
    });
}

来自文档:

The second (optional) parameter is a callback function that will be executed once setState is completed and the component is re-rendered.

同样来自文档:

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

您通过改变 this.state 然后将其反馈给 setState() 来绕过一条细线。不要那样做。

作为替代方案，您可以在您的状态中存储单个 selectedItem 索引(0 到 之间的整数)，而不是在每个项目中存储一个 selected 标志items.length - 1) 所以你只需要更新那个单一的变量。

此外，为什么您的菜单项处于开头状态？是否允许用户更改它们？如果答案是否定的，那么您应该将它们放在 props 或类常量中。