79 lines
6.0 KiB
Markdown
79 lines
6.0 KiB
Markdown
---
|
||
title: Manage Updates with Lifecycle Methods
|
||
localeTitle: Управление обновлениями с помощью методов жизненного цикла
|
||
---
|
||
## Управление обновлениями с помощью методов жизненного цикла
|
||
|
||
Эта задача состоит в том, что вы создаете пару функций жизненного цикла, componentWillUpdate и ComponentWillReceiveProps. Вам будет предоставлена другая функция componentDidUpdate. Мы обсудим, как вы используете их на каждом этапе жизненного цикла компонента, и почему вы должны использовать их, когда проверяете разные этапы своего компонента.
|
||
|
||
Давайте поговорим о функциях и о том, как вы будете их использовать. Жизненные циклы компонентов можно разбить на 4 этапа. Initlization -> Mounting -> Updating -> Unmounting. Компоненты, с которыми вы будете работать, будут находиться на этапе обновления.
|
||
|
||
Происхождение, в котором эти функции вызывают, выглядит следующим образом: componentWillReceiveProps -> componentWillUpdate -> componentDidUpdate
|
||
|
||
Когда вы создаете компонент componentWillReceiveProps, эта функция проверяет, есть ли новые реквизиты. Если компонент получил новые реквизиты, тогда функция будет вызываться, и внутри блока вы можете сравнить два состояния prop. Функция будет принимать аргумент, обычно называемый nextProps, и будет сравнивать его с this.props. Задача состоит в том, что вы создаете эту функцию, используя переданный аргумент nextProps. См. Приведенную ниже функцию.
|
||
|
||
Затем в компоненте жизненного цикла компонента будет вызван компонентWillUpdate, эта функция проверит, были ли какие-либо обновления для реквизита или состояния и вызывается перед отображением компонента. Задача уже предоставила вам эту функцию, и она выйдет из системы «Компонент собирается обновить».
|
||
|
||
Как только компонент пройдет через фазу componentWillUpdate и компонент отобразит, будет вызван компонентDidUpdate. На этом этапе вы можете вызвать this.setState для обновления любых состояний chanegs, которые произошли в течение первых двух фаз. Примечание: вы можете вызвать setState, только если вы завершите условие. Поскольку эта проблема только вы поцарапаете поверхность, они хотели бы, чтобы вы вышли из системы, что «Компонент обновлен».
|
||
|
||
После того, как вы внедрили все функции жизненного цикла, вы увидите некоторые отображаемые на экране консольные журналы. Сначала вы увидите, что componentWillReceiveProps отправит вам this.props и nextProps. Затем вы увидите консольный журнал, в котором вы узнаете, что componentWillUpdate. Наконец, после того, как компонент отобразит, он вызовет компонентDidUpdate и выйдет из системы, «Компонент обновился».
|
||
|
||
Примечание. Компоненты, которые вы создаете, устарели и будут доступны для использования до версии 17. Дополнительные сведения об этих функциях можно найти в разделе ресурсов ниже.
|
||
|
||
```javascript
|
||
class Dialog extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
componentWillUpdate() {
|
||
console.log('Component is about to update...');
|
||
}
|
||
// change code below this line
|
||
|
||
// Create componentWillReceiveProps
|
||
// Pass in argument nextProps and log out the current prop and next prop
|
||
componentWillReceiveProps(nextProps) {
|
||
// Log the current property and the next property
|
||
console.log(this.props, nextProps)
|
||
}
|
||
|
||
// Create function componentDidUpdate
|
||
// Log out that the component has updated
|
||
componentDidUpdate() {
|
||
console.log("Component has updated")
|
||
}
|
||
|
||
// change code above this line
|
||
render() {
|
||
return <h1>{this.props.message}</h1>
|
||
}
|
||
};
|
||
|
||
class Controller extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
message: 'First Message'
|
||
};
|
||
this.changeMessage = this.changeMessage.bind(this);
|
||
}
|
||
changeMessage() {
|
||
this.setState({
|
||
message: 'Second Message'
|
||
});
|
||
}
|
||
render() {
|
||
return (
|
||
<div>
|
||
<button onClick={this.changeMessage}>Update</button>
|
||
<Dialog message={this.state.message}/>
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
### Ресурсы
|
||
|
||
* [Реагировать жизненный цикл компонентов](https://reactjs.org/docs/react-component.html#the-component-lifecycle)
|
||
* [Реагирование жизненного цикла компонентов](https://cdn-images-1.medium.com/max/2000/1*sn-ftowp0_VVRbeUAFECMA.png) |