我写了几十个React文件,从不使用componentDidUpdate方法。
React
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改变,或当你需要的东西是 绝对的 最后一件事要执行。
state
renders
上面的例子虽然很简单,但是很可能证明了这一点。一种改进可能是限制自动保存可以执行的次数(例如,每10秒最多一次),因为现在它将在每次按键时运行。
我也在这个 小提琴 上做了一个演示,以进行演示。
有关更多信息,请参阅 官方文档 :
componentDidUpdate()更新发生后立即调用。初始渲染不调用此方法。 当组件已更新时,可借此机会在DOM上进行操作。只要将当前道具与以前的道具进行比较,这也是执行网络请求的好地方(例如,如果道具未更改,则可能不需要网络请求)。
componentDidUpdate()更新发生后立即调用。初始渲染不调用此方法。
componentDidUpdate()
当组件已更新时,可借此机会在DOM上进行操作。只要将当前道具与以前的道具进行比较,这也是执行网络请求的好地方(例如,如果道具未更改,则可能不需要网络请求)。