[解決済み] componentDidUpdate'メソッドはいつ使用するのですか？

質問

Reactjsのファイルを何十個も書いたが、一度も componentDidUpdate メソッドを使用します。

このメソッドを使用する典型的な例はありますか？

簡単なデモではなく、実例を知りたいのですが。

どのように解決するのですか？

簡単な例としては、ユーザーから入力データを収集し、Ajaxを使ってそのデータをデータベースにアップロードするようなアプリがあります。以下は簡単な例です（まだ実行していないので、構文の間違いがあるかもしれません）。

export default class Task extends React.Component {
  
  constructor(props, context) {
    super(props, context);
    this.state = {
      name: "",
      age: "",
      country: ""
    };
  }

  componentDidUpdate() {
    this._commitAutoSave();
  }

  _changeName = (e) => {
    this.setState({name: e.target.value});
  }

  _changeAge = (e) => {
    this.setState({age: e.target.value});
  }

  _changeCountry = (e) => {
    this.setState({country: e.target.value});
  }

  _commitAutoSave = () => {
    Ajax.postJSON('/someAPI/json/autosave', {
      name: this.state.name,
      age: this.state.age,
      country: this.state.country
    });
  }

  render() {
    let {name, age, country} = this.state;
    return (
      <form>
        <input type="text" value={name} onChange={this._changeName} />
        <input type="text" value={age} onChange={this._changeAge} />
        <input type="text" value={country} onChange={this._changeCountry} />
      </form>
    );
  }
}

そのため、コンポーネントが state を変更すると、そのデータが自動保存されます。他にも実装方法はあります。それは componentDidUpdate は、ある操作が必要な場合に特に有効です 後 DOM が更新され、更新キューが空になったときです。おそらく最も有用なのは、複雑な renders と state や DOM の変更、あるいは何かが必要なときに 絶対に 最後に実行されるものです。

上の例はかなり単純ですが、おそらくポイントを証明しています。改善点としては、オートセーブの実行回数を制限することです（例：最大10秒ごと）。

このデモを作りました フィドル もデモしています。

詳しくは 公式ドキュメント :

componentDidUpdate() は、更新が発生した直後に呼び出されます。このメソッドは、最初のレンダリングでは呼び出されません。

コンポーネントが更新されたときに、DOMに対して操作を行う機会として使用します。これは、現在のプロップと以前のプロップを比較する限り、ネットワークリクエストを行うのに適した場所でもあります（例えば、プロップが変更されていない場合はネットワークリクエストは必要ない場合があります）。