一个简单的示例是一个应用程序，该应用程序从用户收集输入数据，然后使用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上进行操作。只要将当前道具与以前的道具进行比较，这也是执行网络请求的好地方（例如，如果道具未更改，则可能不需要网络请求）。