在没有 setState 的情况下反应推送到状态变量

Question

最近我一直在研究 React 应用程序。

在其中一个加载缓慢的页面中，我发现有一些状态更新，以及那些不打算向最终用户显示的变量，并且稍后在引发某些事件时检查它们。

因为那些是数组，所以我直接改变状态和事件而不“设置状态”（我知道根本不推荐改变变量！）。 后来当事件被引发时，状态变量有正确的数据，并且由于删除了冗余的“setState”，页面速度有了显着的提升，问题得到了解决。

任何人都对“setState”有类似的反应？ 你怎么看待这件事？

Answer 1

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

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

永远不要直接改变state对象（或它引用的任何对象）。 但是你可以改变非状态属性（或者你关闭的东西），这很好。

Answer 2

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

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

这样做，如果所有触发渲染的状态属性都被检查，其他状态属性将不会触发渲染。 但仍将在 state object 中可用。

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

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

来自 React 的文档：

使用 shouldComponentUpdate() 让 React 知道组件的输出是否不受当前 state 或 props 变化的影响。 默认行为是在每次状态更改时重新渲染，在绝大多数情况下，您应该依赖默认行为。