componentDidUpdate内部動作が混乱している

Question

Reactコンポーネントの1つにJSONの配列が渡されます。コンポーネントにはcomponentDidUpdateが含まれています。私はレンダリングの直前にこの関数が実行されていることを知っており、nextPropsとnextStateを見ることができるので、それらを現在のものと比較することができます。しかし、内側の作業はここで

---

は私のプログラムのステップである私を混乱させる：

：
1. 親コンポーネントこのコンポーネントはcomponentDidUpdateを実行し、このコンポーネントへ

2. を新しく更新されたリストを渡します

3. 古いリストとこの新しい更新リストを比較します。このコンポーネントは、そのI私はconsole.logが続きdifferenceList

---

に従ってレンダリング

に（配列コール differenceList）このコンポーネントの状態に押し込み、新しく追加されたアイテムを探しますすべてが置かれている。私が見つけたユニークなアイテムComponentWillUpdate

入力リスト

1. の更新をトリガした後

   は//：「1336」とコードの次の行を

2. が持つべき配列にそれをプッシュするだけで、それをプッシュself.setState({differenceList: self.state.differenceList.concat(item.id)});
3. がComponentWillUpdateの最後に達した場合、this.state.differenceListは次のようになります。[] // what ??
4. this.state.differenceListは、描画関数を入力すると次のようになります。[]
5. ComponentWillUpdateを入力する//もう一度やり直してください。
6. ComponentWillUpdate、this.state.differenceListの終わりである：[]
7. 機能をレンダリング入力、this.state.differenceListは：[ "1336"]

理由#4が空で表示されています？

#6なぜ再びcomponentWillUpdateに入ったのですか？それは私がcomponentWillUpdate内の状態を更新したからですか？何故なら#5が空の状態を示しているのですか#8レンダリング機能を再度入力した後、突然変更された状態が表示されます。

Answer 1

setStateは非同期です。<Child list={[1, 2, 1336]}/>をレンダリングする

1. <Parent/>試行（バッチ0）
   • willUpdate()がwillUpdate()のnextProps = {list: [1, 2, 1336]}
   • self.setState({differenceList: self.state.differenceList.concat(['1336'])}) // This code is asynchronous, creating Batch 1
   • Endで呼び出され、this.stateはまだ同じ
   • render()
   です
2. はアイムnextState = { ... differenceList: ['1336'] }
3. this.stateまだ新しい状態でwillUpdate()
4. render()の
5. エンドを更新していない

でバッチ1（あなたのsetState()コール）

• willUpdate()の治療私は非常に明確であることを確信していない、少し疲れました。
  とにかくyou should not be using this.setState in componentWillUpdate().
  componentWillReceiveProps()をご使用ください。