如何使道具不可变化以防止Rerender中的React中的Rerender

Question

我一直在使用react.js创建一个小应用程序。我过度考虑了"绩效"。

所以我有一个名为" Spinner"的简单儿童组件。我的目标是确保此组件永远不会重新租赁。

这是我的组件：

import React, {PureComponent} from 'react';
export default class Spinner extends PureComponent {
render() {
    return (
        <div className="spinner">
            <div className="bounce1"></div>
            <div className="bounce2"></div>
            <div className="bounce3"></div>
        </div>
    )
}
}

在使用" React-Addons-perf"重新渲染时，该组件总是呈现的，我正在使用Purecomponent，因为我希望该组件只渲染一次，我读到我可以使用不可变的支柱，但是我不知道该如何使它成为可能。

如果我对此有所满意：

componentDidMount() {
    this.renderState = false;
}
shouldComponentUpdate(nextProps, nextState) {
    return (this.renderState === undefined) ? true : this.renderState;
}

它仅渲染一次，但我相信有更好的方法。

如何避免重新渲染？或者也许我如何做一个不变的道具？

Answer 1

您不需要组件的额外逻辑，因为您不希望组件恢复。

仅添加它应该足以阻止组件恢复：

shouldComponentUpdate(nextProps, nextState) {
    return false
}

Answer 2

对于不需要道具的无状态组件，我们可以使用功能（无状态）组件的组合和babel的 React constant elements transformer来优化组件创建，并完全防止重新者。ol>

将React constant elements transformer添加到您的构建系统中。根据文档，变压器将：

提升元素创建到最高级别的子树 静态，减少了对React的调用。 分配。更重要的是，它告诉React，子树还没有 更改，因此反应可以在和解时完全跳过。

将旋转器更改为无状态组件。

const Spinner = () => (
  <div className="spinner">
    <div className="bounce1"></div>
    <div className="bounce2"></div>
    <div className="bounce3"></div>
  </div>
);
export default Spinner;

Answer 3

您可以通过使用不可变的JS将数组道具转换为列表和对象props int Maps，使您的道具不可变化。使用此库，您可以使用简单的检查来检查数组/对象的平等性（而不是浏览键/值以获得平等）：

shouldComponentUpdate(nextProps) => {
   this.props.complexObjectAsMap === nextProps.complexObjectAsMap
}

但是，由于您的组件没有任何道具 - 这看起来不是正确的问题。在您的情况下，我会选择ori drori答案。