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

您不需要为componentShouldUpdate提供额外的逻辑，因为您不希望您的组件永远重新渲染。

仅添加此项就足以防止组件重新渲染：

shouldComponentUpdate(nextProps, nextState) {
    return false
}

Answer 2

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

将React constant elements transformer添加到您的构建系统。根据{{3}}，变压器将：

将元素创建提升到完全子树的顶层 static，它减少了对React.createElement的调用以及结果分配。更重要的是，它告诉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

您可以使用Immutable JS将数组道具转换为Lists并将对象道具转换为Maps，从而使您的道具在React中不可变。使用此库，您可以使用简单检查来检查数组/对象的相等性（而不是通过键/值进行相等）：

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

但由于你的组件没有任何道具 - 这看起来不是正确的问题。在您的情况下，我会使用Ori Drori回答。

如何使道具不可变，以防止在React中重新渲染？

3 个答案: