react.jsのParentからchildrenコンポーネントを呼び出す最も効率的な方法

Question

これは私が今まで持っていたものですが、親から子を呼び出すのに最適な構造ですか？

これはアプリケーションの使用中に問題が発生するかどうかですか？

私は以前に親のレンダリングメソッドからクラスを呼び出していましたが、それは良いですか？

var ApiResponseParent = React.createClass({ 

    getInitialState: function() { 
    return { 
     fbResponsesState: [] 
    } 

    }, 

    componentDidMount: function() { 
     console.log("parentMounted"); 
     this.serverRequest = axios.get(`url`) 
      .then(res => { 
      const fbResponsesState = res.data.fb_responses; 
      this.setState({ fbResponsesState }); 
      console.log(this.state.fbResponsesState); 
      }); 
    }, 

    componentDidUpdate: function() { 
    console.debug('componentDidUpdate'); 
    return ReactDOM.render(<App fbResponses={this.state.fbResponsesState}/>, document.getElementById("example")); 
    }, 

    render: function() { 
     return null; 
    } 
}); 

var App = React.createClass({ 

    render: function() { 

     var htmlTables; 
     for (var i = 0; i < this.props.fbResponses.length; i++) 
     { 
      var fbResponse = this.props.fbResponses[i].data; 
      if (fbResponse.length > 0) 
      { 

       htmlTables = (<div> 
        <table> 
        .... 
        </table> 
       </div>); 
      } 
      else 
      { 
       htmlTables = ""; 
      } 

     } 
     return (htmlTables ? htmlTables : null); 
    } 

}); 

ReactDOM.render(<ApiResponseParent />, document.getElementById("root")); 

Answer 1

状態をリセットすると、適切に再描画する方法がわかります。あなたがcomponentDidUpdateに持っているものは、ApiResponseParentのrenderメソッドの中にあるべきです。そして、XHRリクエストが完了し、fbResponsesStateを設定すると、Reactは、新しいfbResponsesを取得するAppコンポーネントでコンポーネントを再レンダリングします。覚えておいて、Reactはシーンの背後に必要最小限の更新しか行いませんが、再レンダリングと呼ばれます。

render: function() { 
    return (<App fbResponses={this.state.fbResponsesState}/>); 
}