小编典典

什么时候使用React的“ componentDidUpdate”方法?

reactjs

我写了几十个React文件,从不使用componentDidUpdate方法。

是否存在何时需要使用此方法的典型示例?

我想要一些真实的例子,而不是简单的演示。

感谢你的回答!


阅读 1096

收藏
2020-07-22

共1个答案

小编典典

一个简单的示例是一个应用程序,该应用程序从用户收集输入数据,然后使用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更新并且清空更新队列
需要进行操作时,此功能特别有用。这也可能是复杂的最有用的rendersstate或DOM改变,或当你需要的东西是 绝对的
最后一件事要执行。

上面的例子虽然很简单,但是很可能证明了这一点。一种改进可能是限制自动保存可以执行的次数(例如,每10秒最多一次),因为现在它将在每次按键时运行。

我也在这个 小提琴 上做了一个演示,以进行演示。


有关更多信息,请参阅 官方文档

componentDidUpdate()更新发生后立即调用。初始渲染不调用此方法。

当组件已更新时,可借此机会在DOM上进行操作。只要将当前道具与以前的道具进行比较,这也是执行网络请求的好地方(例如,如果道具未更改,则可能不需要网络请求)。

2020-07-22