Question

最近我一直在开发React应用。

在其中一个加载缓慢的页面中，我发现有一些状态更新，并且这些变量本不希望向最终用户显示，因此稍后会在发生某些事件时检查它们

由于这些是数组，因此我直接对状态和事件进行了变异，而没有“ setState”对其进行更改（我知道根本不建议对变量进行变异！）。后来在引发Event时，状态变量具有正确的数据，并且由于删除了多余的“ setState”，因此页面的速度有了显着提高，问题得以解决。

有人对“ setState”有类似的反应吗？您对此有何看法？

Answer 1

...我发现状态有一些更新，而那些变量并不打算显示给最终用户...

那么它们就不应该是状态的一部分，它们应该只是实例上的属性（在我假设您正在使用的基于类的组件中；在功能组件中关闭的变量）。 state只应包含更改后会导致重新渲染的内容。因此，您只应通过setState进行更改，以便触发渲染。您正在违反规则，因为您要更改的内容与渲染无关。

切勿直接更改state对象（或其引用的任何对象）。但是您可以更改非状态属性（或您关闭的内容），就可以了。

Answer 2

如果您需要将这些变量存储在实际状态中，但是它们不必触发渲染，则可能需要实现shouldComponentUpdate lyfecycle回调：

shouldComponentUpdate(nextProps, nextState) {
        return nextState.myPropertyThatTriggersRender != this.state.myPropertyThatTriggersRender;
    }

这样做，如果选中了所有触发渲染的状态属性，其他状态属性将不会触发渲染。但是状态对象中仍然可用。

为了提高性能，您可以对要渲染的子元素（如果它们是组件）进行相同的检查。

shouldComponentUpdate(nextProps, nextState) {
        return nextProps.myPropThatTriggersRender != this.props.myPropThatTriggersRender;
    }

来自React的DOC：

使用shouldComponentUpdate（）来让React知道组件的输出是否不受当前状态或道具变更的影响。默认值行为是在每一个状态变化时以及在广大大多数情况下，您应该依靠默认行为。