一个简单的示例是一个应用程序，该应用程序从用户收集输入数据，然后使用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改变，或当你需要的东西是 绝对的@H_404_16@ 最后一件事要执行。
上面的例子虽然很简单，但是很可能证明了这一点。一种改进可能是限制自动保存可以执行的次数（例如，每10秒最多一次），因为现在它将在每次按键时运行。
componentDidUpdate()更新发生后立即调用。初始渲染不调用此方法。
当组件已更新时，可借此机会在DOM上进行操作。只要将当前道具与以前的道具进行比较，这也是执行网络请求的好地方（例如，如果道具未更改，则可能不需要网络请求）。
602392714
清零编程群