День 12: Методы жизненного цикла в React продолжаются

мы увидим, как использовать getDerivedStateFromProps в React для обновления свойств и состояния компонента.

Обновление

Обновление — это процесс изменения состояния или реквизитов компонентов и обновления изменений узлов, уже находящихся в DOM. Обновление может быть вызвано изменениями реквизитов или состояния. Эти методы вызываются в следующем порядке при повторном рендеринге компонента:

А.) статический getDerivedStateFromProps

Это вызывается непосредственно перед вызовом метода рендеринга, как при первоначальном монтировании, так и при последующих обновлениях. IT должен вернуть объект, чтобы обновить состояние, или null, чтобы ничего не обновлять. Этот метод существует для редких случаев использования, когда состояние зависит от изменений реквизитов с течением времени. Этот метод не имеет доступа к экземпляру компонента. Поскольку это статический метод, это ключевое слово недоступно внутри этого метода.

создать новый проект

$ create-react-app day-12
$ cd day-12
$ npm start

Добавьте Student.js и Marks.js в папку src. Marks.js будет дочерним компонентом Student.js.

добавьте следующий код в Student.js

import React, {Component} from 'react';
import Marks from './Marks';
export default class Student extends Component {
constructor(){
super();
//we are passing this state to our child (Marks) as props.
this.state = {
roll: 101
};
}
clickHandle = () =>{
console.log('button clicked')
this.setState({roll:102})
};
render() {
console.log("student component rendered")
//the state above defined will passed as prop atttribute
//of Mark component
return (
<div>
<Marks roll={this.state.roll} />
<button onClick={this.clickHandle} >Change</button>
</div>
)}}

Марк.js

import React, {Component} from 'react';
export default class Marks extends Component {

constructor(props) {
super(props);
this.state = {
mroll: this.props.roll
}}
static getDerivedStateFromProps(props, state) {
  console.log("Get Derived Ran")
  console.log(props.roll)
  console.log(state.mroll)
  console.log(props, state)
  if(props.roll !== state.mroll){
  return {mroll: props.roll}
  }
return null
}
render() {
console.log("marks component rendered")
return (
<div>
<h1>{this.state.mroll}</h1>
</div>
)}}

и так, что здесь происходит?

В нашем файле Student.js у нас есть список свойств в качестве состояния. Это означает, что мы можем изменить значение броска, используя setState.

помните, мы не можем сделать вот так:

this.state.roll = 102  ❌
this.setState({roll:102}) ✅

состояние будет обновлено нажатием кнопки. Итак, мы разместили обработчик события clickHandle().

И в методе рендеринга мы передаем нашу опору (this.state.roll) дочернему компоненту (Marks.js).

У Student.js есть только один вывод в консоли, «рендеринг компонента студента», прежде чем мы нажмем нашу кнопку.

Теперь давайте посмотрим, что происходит в Marks.js.

мы передали свойства Student конструктору Marks и сохранили их в свойстве mroll.

теперь мы поместили метод getDerivedStateFromProps перед нашим методом рендеринга. Мы разместили нашу логику внутри этого метода

if(props.roll !== state.mroll) 
{
      return {mroll: props.roll}
}

реквизит, поступающий от Student, сравнивается с нашим текущим состоянием компонента Marks.

теперь, прежде чем мы нажмем кнопку,

props.roll = state.mroll

после того, как мы нажали кнопку, состояние Student (roll) изменило свое значение на 102

now,
props.roll != state.mroll

и в методе рендеринга мы записываем console.log («отмечает визуализированный компонент»).

Это должно быть все для метода getDerivedStateFromProps(). На следующем уроке мы увидим метод shouldComponentUpdate().

Фото автора Pakata Goh на Unsplash