Question

如果每次<AnotherComponent/>被调用，我如何阻止this.setState()呈现？下面的简单示例，虽然我的应用程序要复杂得多。我有一堆简单游戏的子组件，即单独的组件A）更新分数，B）显示按钮和C）显示随机图像。

每次调用setState()时它会渲染所有子组件，我想阻止它渲染至少一个特定组件。我试图用shouldComponentUpdate来解决问题，不确定我是否应该在父组件或子组件中使用它：

var App = React.createClass({
   getInitialState: function() {
      return {
         isA: false
      };
   },

    handleClick: function() {
        this.refs.SomeComponent.myAction();
        if ( localStorage.showMsg ) {
            this.setState( {isA: true} );   
        } else {
            this.setState( {isA: false} );
        }

    },

   render: function() {
      return (
        <div>
           <SomeComponent handleClick={this.handleClick} ref="SomeComponent" />
           <AnotherComponent />
         </div>
      );
   } 
});

Answer 1

shouldComponentUpdate应仅用作优化。因为render应该是props和state的函数，如果react想要以随机的间隔重新呈现所有内容，那么你的应用程序应该仍然能够正常运行。

Answer 2

为什么要停止渲染？如果组件的道具和状态尚未改变，那么虽然它将呈现，但DOM将不会更新。如果您的render中有一些非常昂贵的商品，那么您应该使用componentShouldUpdate，同时请注意文档中的警告：

默认情况下，shouldComponentUpdate始终返回true以防止当状态发生变异时会出现微妙的错误，但是如果你小心的话总是将状态视为不可变状态，只能从道具和状态中读取在render（）中，你可以用一个覆盖shouldComponentUpdate 将旧道具和状态与他们的状态进行比较的实现替代品。

如果您担心头重脚轻的状态，您应该查看Flux pattern和Fluxxor以获得良好的实施效果。

每次调用this.setState（）时都停止渲染ReactJS？

2 个答案: