何时使用React"componentDidUpdate"方法？

Question

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

是否需要使用此方法的典型示例？

我想要一些真实世界的例子,而不是一个简单的演示.

谢谢你的回答!

Answer 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更改,它就会自动保存数据.还有其他方法可以实现它.在更新DOM并清空更新队列后componentDidUpdate需要进行操作时,此功能特别有用.它可能对复杂和/ 或DOM更改最有用,或者当您需要某些东西成为绝对最后要执行的东西时.rendersstate

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

我在这个小提琴上做了一个演示以及演示.

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

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

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

Answer 2

有时您可能会在构造函数或 componentDidMount 中添加来自 props 的状态值，您可能需要在 props 更改但组件已经挂载时调用 setState，因此 componentDidMount 不会执行，构造函数也不会执行；在这种特殊情况下，您可以使用 componentDidUpdate，因为道具已更改，您可以使用新道具在 componentDidUpdate 中调用 setState。

Answer 3

一旦更新发生，就会调用此生命周期方法。componentDidUpdate() 方法最常见的用例是更新 DOM 以响应 prop 或状态更改。

\n\n

您可以在此生命周期中调用 setState()，但请记住，您需要将其包装在条件中以检查状态或道具相对于先前状态的更改。setState() 的错误使用可能会导致无限循环。\n请看下面的示例，其中显示了此生命周期方法的典型使用示例。

\n\n

componentDidUpdate(prevProps) {\n //Typical usage, don\'t forget to compare the props\n if (this.props.userName !== prevProps.userName) {\n   this.fetchData(this.props.userName);\n }\n}\n

\n\n

请注意，在上面的示例中，我们将当前的 props 与之前的 props 进行比较。这是为了检查道具是否与当前相比发生了变化。在这种情况下，如果 props 没有更改，则\xe2\x80\x99 不需要进行 API 调用。

\n\n

更多信息请参考官方文档：

\n