Метод ReactJS getSnapshotBeforeUpdate ()

Опубликовано: 23 Декабря, 2021

Метод getSnapshotBeforeUpdate () вызывается непосредственно перед отрисовкой DOM. Он используется для хранения предыдущих значений состояния после обновления DOM.

Любое значение, возвращаемое методом getSnapshotBeforeUpdate (), будет использоваться в качестве параметра для метода componentDidUpdate (). Эта функция всегда используется вместе с методом componentDidUpdate (), но наоборот, неверно.

Синтаксис:

 getSnapshotBeforeUpdate (prevProps, prevState)

Параметры: он принимает два параметра, это prevProps и prevState, которые являются просто реквизитами или состоянием перед повторной визуализацией рассматриваемого компонента.

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:

 npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, т.е. имени папки, перейдите в нее с помощью следующей команды:

 cd имя папки

Пример: программа для демонстрации использования метода getSnapshotBeforeUpdate (). Здесь мы собираемся использовать предыдущее и текущее значения состояния для отображения некоторого текста.

Имя файла: App.js:

Javascript

 import React from 'react' ;
 class App extends React.Component {
 
  // Initializing the state
  state = {
    name: 'GFG' ,
  };
 
  componentDidMount() {
 
    // Changing the state after 1 sec
    setTimeout(() => {
      this .setState({ name: 'GeeksForGeeks' });
    }, 1000);
  }
 
  getSnapshotBeforeUpdate(prevProps, prevState) {
 
    // Displaying the previous value of the state
    document.getElementById( 'prev' ).innerHTML =
      'Previous Name: ' + prevState.name;
  }
 
  componentDidUpdate() {
 
    // Displaying the current value of the state
    document.getElementById( 'new' ).innerHTML =
      'Current Name: ' + this .state.name;
  }
 
  render() {
    return (
      <div>
        <div id= "prev" ></div>
        <div id= "new" ></div>
      </div>
    );
  }
 }
 
export App; default 

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 npm start

Выход:

Ссылка: https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate

React-js

Метод ReactJS getSnapshotBeforeUpdate ()

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ