componentDidMountまたはcomponentWillMountどちらかを使用する必要があります

Question

私は反応を使ってtwitterに似たボックスを作成しました。私は反応文書を見て、いくつかのコンポーネントライフサイクルを見出しましたが、コードパフォーマンスを向上させるためにどちらを使用すべきかはわかりません：componentDidMountまたはcomponentWillMount？

テキストボックスに何かを入力すると、コンソールにテキストボックスの値を表示する更新が表示されます。誰にどのような方法を使用するか、この場合いつ理解するのを助けることができますか？

https://jsfiddle.net/c9zv7yf5/2/

class TwitterBox extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { enteredTextBoxvalue : '' }; 
     this.handleChange = this.handleChange.bind(this); 

    } 

    handleChange(event) { 
    this.setState({enteredTextBoxvalue: event.target.value}); 

    if((event.target.value).length > 3) { 

     this.setState({className : 'wholeContainer'}); 
     //console.log("long characters"); 
    } 
    } 

    render() { 
     return (<div>Hello {this.props.name} 
       <textarea className={this.state.className} 
       value={this.state.enteredTextBoxvalue} 
       onChange = {this.handleChange}> 
       there should be only 140 characters 
      </textarea> 
     </div>); 
    } 
} 

ReactDOM.render(
    <TwitterBox name="World" />, 
    document.getElementById('container') 
); 

Answer 1

componentWillMountは、コンポーネントがレンダリングされる直前に呼び出されます。 componentDidMountは、コンポーネントがレンダリングされた直後に呼び出されます。

データを準備する必要がある場合は、componentWillMountを使用します。componentDidMountは、コンポーネントをレンダリングした直後にapi呼び出しやグラブデータを送信する場合に広く使用されており、その使用を強く推奨します。

Answer 2

componentWillMount：一目見ただけで、ロジック

componentDidMountをフェッチしたデータを置くのに最適な場所であるように思われるので

この関数は、右のコンポーネントの最初のレンダリングの前に呼び出されます。

componentDidMountを使用すると、初期レンダリング後までデータがロードされないことが明確になります。これは初期状態を適切に設定することを思い出させるため、エラーの原因となる未定義状態に終わらないようにします。

Answer 3

あなたの質問の一部は、shouldComponentUpdateからavoid reconciliationまで見ることもできるパフォーマンスに関するものです。

componentWillMountは、マウントが行われる直前に呼び出されます。 render（）の前に呼び出されます。

componentDidMountは、コンポーネントのマウント直後に呼び出されます。

Answer 4

componentWillMount

• コンポーネントは、レンダリングしようとしている、constructor
• と同じ役割を果たしているDOMにはコンポーネントを使用すると、同期しますsetState()を呼び出してDOM 操作
• を含む何もできないまだありませんトリガーしない コンポーネントがまだレンダリングされていないので再レンダリング
• 私はしないここでは非同期/apiリクエストを呼び出すお勧めします（技術的に部品が実装される前に、彼らは終了します何の保証は、あなたのコンポーネントが、これらのデータを適用するために再描画されることはありません、この場合には、ありません）

componentDidMount

• コンポーネントは既にレンダリングされていますが、DOM内に既に配置されています。
• ここでDOM要素を含む操作を実行できます。 ）サードパーティ製のプラグインを初期化
• など/api要求の非同期呼び出し、