什么时候使用‘ Component entDidUpdate’方法？

一个简单的例子就是一个应用程序，它从用户那里收集输入数据，然后使用 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 更改或者当您需要某些内容作为 当然的最后一个要执行的内容时最有用。

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

为了演示，我还在这个 小提琴上做了一个演示。

欲了解更多信息，请参考 < strong > 官方文件 :

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

当组件被更新时，可以利用这个机会操作 DOM。这也是一个很好的地方做网络请求，只要你比较当前的道具以前的道具(例如，网络请求可能不是必要的，如果道具没有改变)。

我在高图中使用了 componentDidUpdate()。

下面是这个组件的一个简单示例。

import React, { PropTypes, Component } from 'react';
window.Highcharts = require('highcharts');


export default class Chartline extends React.Component {
constructor(props) {
super(props);
this.state = {
chart: ''
};
}


public componentDidUpdate() {
// console.log(this.props.candidate, 'this.props.candidate')
if (this.props.category) {
const category = this.props.category ? this.props.category : {};
console.log('category', category);
window.Highcharts.chart('jobcontainer_' + category._id, {
title: {
text: ''
},
plotOptions: {
series: {
cursor: 'pointer'
}
},
chart: {
defaultSeriesType: 'spline'
},
xAxis: {
// categories: candidate.dateArr,
categories: ['Day1', 'Day2', 'Day3', 'Day4', 'Day5', 'Day6', 'Day7'],
showEmpty: true
},
labels: {
style: {
color: 'white',
fontSize: '25px',
fontFamily: 'SF UI Text'
}
},
series: [
{
name: 'Low',
color: '#9B260A',
data: category.lowcount
},
{
name: 'High',
color: '#0E5AAB',
data: category.highcount
},
{
name: 'Average',
color: '#12B499',
data: category.averagecount
}
]
});
}
}
public render() {
const category = this.props.category ? this.props.category : {};
console.log('render category', category);
return <div id={'jobcontainer_' + category._id} style=\{\{ maxWidth: '400px', height: '180px' }} />;
}
}

componentDidUpdate(prevProps){


if (this.state.authToken==null&&prevProps.authToken==null) {
AccountKit.getCurrentAccessToken()
.then(token => {
if (token) {
AccountKit.getCurrentAccount().then(account => {
this.setState({
authToken: token,
loggedAccount: account
});
});
} else {
console.log("No user account logged");
}
})
.catch(e => console.log("Failed to get current access token", e));


}
}

有时候你可能会在构造函数或者组件 DidMount 中添加一个来自道具的状态值，你可能需要在道具更改时调用 setState，但是组件已经挂载了，所以组件 DidMount 不会执行，构造函数也不会执行; 在这种特殊情况下，你可以使用组件 DidUpdate，因为道具已经更改，你可以用新的道具在组件 DidUpdate 中调用 setState。

此生命周期方法在更新发生时立即调用。Component entDidUpdate ()方法最常见的用例是响应支持或状态更改而更新 DOM。

您可以在这个生命周期中调用 setState () ，但是请记住，您需要将其包装在一个条件中，以检查状态或支持对前一个状态的更改。不正确使用 setState ()可能导致无限循环。 请看下面的示例，它显示了此生命周期方法的一个典型使用示例。

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

注意在上面的例子中，我们正在比较当前的道具和以前的道具。这是为了检查是否有一个道具的变化，从它目前是什么。在这种情况下，如果道具没有更改，就不需要进行 API 调用。

更多信息，请参考 官方文件:

当状态中的某些内容发生变化时，您需要调用一个副作用(比如对 api-get、 put、 post、 delete 的请求)。因此需要调用 componentDidUpdate()，因为已经调用了 componentDidMount()。

在 Component entDidUpdate ()中调用副作用之后，可以根据 then((response) => this.setState({newValue: "here"}))中的响应数据将状态设置为新值。 请确保您需要检查 prevProps或 prevState以避免无限循环，因为当将 state 设置为新值时，Component entDidUpdate ()将再次调用。

对于最佳实践，有两个地方可以调用副作用-Component entDidMount ()和 Component entDidUpdate ()

如果您在 Component entDidUpdate ()中调用 setState，是否会导致再次获取相同的数据？

例如，[ id，data _ For _ id ]是状态，id 可以通过单击计数器更改，data _ For _ id 可以从 web API 获取。

现在，我们通过 setState ()单击以更改 Id，然后执行 Component entDidUpdate () ，它将获取 data _ for _ Id，我们执行 setState for data _ for _ Id，它将触发另一个 Component entDidUpdate ()。

在第一次调用 Component entDidUpdate 时，我们得到了 preState.ID = 0和 state.ID = 1，因此运行 Component entDidUpdate。第二次，我们使用 prestate.ID = 1和 state.ID = 1，并且可以完全避免组件 DidUpdate，这可能也可以通过 should dComponent entUpdate ()实现。

然而，这会导致两个重新呈现，一个用于 ID 更改，一个用于 data _ for _ ID 更改。理想情况下，一旦我们检测到 ID 更改，data _ for _ ID 应该被提取，并且我们应该在一个镜头中改变[ ID，data _ for _ ID ]状态，重新呈现只发生一次，因为这个更改 ID 单击。

因此，作为一般规则，我们不应该在组件 DidUpdate ()中执行任何 setState，如果两个或多个状态组件的更改是相关的，我们应该在一个地方一起执行更改，并在一个镜头中执行 setState。

这只是我的推理。我不是一个反应大师，所以请评论。

使用时要小心，因为它会发出多个 API 调用，有时会发出无限次的调用