javascript - 如何在不调用 setState 或不使 componentWillUpdate 在 React 中执行的情况下呈现组件？

Question

所以，假设我有 2 个 React 组件，如下所示:

var Parent = React.createClass({
   getInitialState: function(){
      return ({
       child: <Children state="someState" />      
      });      
   },

  parentFunction: function() {
     this.setState({
       child: <Children state="otherState" />
     });
  },

  render: function() {
      return (
              <div>
              {this.state.child}                  
              </div>
      );
  }

  //...other methods
});

var Children = React.createClass({
   componentWillMount: function() {
      this.getData();
   },

   componentWillUpdate: function() {
      this.getData();
   }

   getData: function() {
      var that = this;

      $.getJSON("https://some.url", function(result){
           //Do something with result         

           that.setState();
      }); 


   }

   //other methods ....

});

Parent第一次渲染时，Children也第一次渲染。因此，执行 Children 的 componentWillMount，然后调用 Children 的 getData。由于 getData 调用 getJSON 是异步函数，因此它无法“按时”返回结果以供 Children 首次渲染。因此，我的解决方案是在 getJSON 处理完结果后调用 setState() 以使 Children 再次呈现。目前看来一切正常。

但是当我调用 parentFunction 来更新 Children 时，问题就出现了。由于 Children 已更新，因此将执行其 componentWillUpdate，因此将调用 getData()。但是 getData() 在处理完结果后又调用 setState() 。并且 setState() 使 componentWillUpdate 被执行。这就是我陷入无限循环的原因。

我正在寻找一种无需调用 setState 或执行 componentWillUpdate 即可呈现组件的方法。但是我还没有找到。我不确定如何解决这个问题。任何帮助，将不胜感激。

Answer 1

无需调用 setState 即可找到渲染方法。

要避免循环，只需使用 componentWillReceiveProps() 代替 componentWillUpdate，如 React documentation 中所述.

但是，您甚至可以测试组件是否真的应该更新，方法是使用如下模式:

var Children = React.createClass({
    componentWillMount: function() {
        this.getData();
    },

    componentWillReceiveProps: function(nextProps) {
        // some sort of logic that defines if new 
        // props are different than the previous ones
        if(nextProps.data !== this.props.data)
        {
            this.getData();
        }
    }

    getData: function() {
        var that = this;

        $.getJSON("https://some.url", function(result){
            //Do something with result         

            that.setState();
        }); 
    }
}

根据我的说法，您还以错误的方式使用了父级的状态。

状态应该包含关于组件本身的数据和属性，而不是其他组件。

这样重写它会很有帮助:

var Parent = React.createClass({
   getInitialState: function(){
      return ({
       something: [] // example
      });      
   },

  parentFunction: function() {
     this.setState({
       something: [12] // example
     });
  },

  render: function() {
      return (
              <div>
                   <Children state={this.state.something} />
              </div>
      );
  }

  //...other methods
});

希望这对您有所帮助。