何时使用 React “componentDidUpdate"方法? [英] When to use React "componentDidUpdate" method?

问题描述

我写了几十个 React 文件，从来没有使用过 componentDidUpdate 方法.

有什么典型的例子什么时候需要使用这种方法吗?

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

感谢您的回答！

解决方案

一个简单的例子是一个应用程序，它从用户那里收集输入数据，然后使用 Ajax 将所述数据上传到数据库.这是一个简化的示例(尚未运行 - 可能有语法错误):

导出默认类 Task extends React.Component {构造函数(道具，上下文){超级(道具，上下文)；this.state = {名称:",年龄:"，国家:"};}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', {名称:this.state.name，年龄:this.state.age，国家:this.state.country});}使成为() {让 {name, age, country} = this.state;返回 (<表格><输入类型=文本"value={name} onChange={this._changeName}/><输入类型=文本"value={age} onChange={this._changeAge}/><输入类型=文本"value={country} onChange={this._changeCountry}/></表单>);}}

因此，只要组件有 state 更改，它就会自动保存数据.还有其他方法可以实现它.componentDidUpdate 当操作需要在 DOM 更新和更新队列清空之后发生时特别有用.它可能在复杂的 renders 和 state 或 DOM 更改时最有用，或者当您需要绝对最后执行的事情时.>

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

我也做了一个关于这个 fiddle 的演示来演示.>

---

有关详细信息，请参阅官方文档:

<块引用>

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

当组件更新时，以此为契机对 DOM 进行操作.这也是进行网络请求的好地方，只要您将当前的 props 与之前的 props 进行比较(例如，如果 props 没有改变，则可能不需要网络请求).

I wrote dozens of React files, never use componentDidUpdate method.

Is there any typical example of when need to use this method?

I want some real-world example, not a simple demo.

Thanks for the answer!

解决方案

A simple example would be an app that collects input data from the user and then uses Ajax to upload said data to a database. Here's a simplified example (haven't run it - may have syntax errors):

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>
    );
  }
}

So whenever the component has a state change it will autosave the data. There are other ways to implement it too. The componentDidUpdate is particularly useful when an operation needs to happen after the DOM is updated and the update queue is emptied. It's probably most useful on complex renders and state or DOM changes or when you need something to be the absolutely last thing to be executed.

The example above is rather simple though, but probably proves the point. An improvement could be to limit the amount of times the autosave can execute (e.g max every 10 seconds) because right now it will run on every key-stroke.

I made a demo on this fiddle as well to demonstrate.

---

For more info, refer to the official docs:

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).

这篇关于何时使用 React “componentDidUpdate"方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！