Когда использовать метод React «componentDidUpdate»?
Я написал десяткиReact файлы, никогда не используйтеcomponentDidUpdate метод.
Есть ли типичный пример того, когда нужно использовать этот метод?
Мне нужен пример из реальной жизни, а не простая демонстрация.
Спасибо за ответ!
Ответы на вопрос(3)
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));
}
}
я использовал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' }} />;
}
}
Простым примером может служить приложение, которое собирает входные данные от пользователя и затем использует 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 секунд), потому что сейчас оно будет выполняться при каждом нажатии клавиши.
Я сделал демо на этомиграть на скрипке а также для демонстрации.
Для получения дополнительной информации обратитесь кофициальные документы:
componentDidUpdate() вызывается сразу после обновления. Этот метод не вызывается для начального рендеринга.
Используйте это как возможность работать на DOM, когда компонент был обновлен. Это также хорошее место для выполнения сетевых запросов, если вы сравниваете текущий реквизит с предыдущими реквизитами (например, сетевой запрос может не понадобиться, если реквизиты не изменились).
this.setState({...}, callback),callback равный_commitAutoSave, что ты думаешь? Итак, я думаю, что этот случай можно использоватьcomponentDidUpdate метод, но не должен, я прав?играть на скрипкеcomponentDidUpdate это решить несколько setStates! Есть другие идеи?setState в ХДС.