Коли використовувати метод "компонентного оновлення" React?

Я написав десятки Reactфайлів, ніколи не використовую componentDidUpdateметод.

Чи є якийсь типовий приклад, коли потрібно використовувати цей метод?

Я хочу отримати приклад із реального світу, а не просту демонстрацію.

Дякую за відповідь!

Простим прикладом може бути додаток, яке збирає вхідні дані від користувача, а потім використовує 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 після оновлення компонента. Це також гарне місце для здійснення мережевих запитів, якщо ви порівнюєте поточний реквізит з попередніми реквізитами (наприклад, мережевий запит може не знадобитися, якщо реквізит не змінився).

Іноді ви можете додати значення стану від реквізиту в конструкторі або компонентіDidMount, можливо, вам потрібно буде викликати setState, коли реквізит змінився, але компонент уже встановлений, тому компонентDidMount не виконається і конструктор не виконає; у цьому конкретному випадку ви можете використовувати компонентDidUpdate з моменту зміни реквізиту, ви можете викликати setState в компонентDidUpdate за допомогою нових реквізитів.

Я використовував 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));

    }
}

Цей метод життєвого циклу використовується, як тільки відбувається оновлення. Найпоширенішим випадком використання методу компонентDidUpdate () є оновлення 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 - отримати, поставити, опублікувати, видалити). Тож вам потрібно дзвонити, componentDidUpdate()тому що componentDidMount()вже дзвонили.

Після виклику побічного ефекту в компонентDidUpdate (), ви можете встановити стан нового значення на основі даних відповідей у then((response) => this.setState({newValue: "here"})). Переконайтеся, що вам потрібно перевірити prevPropsабо prevStateуникнути нескінченного циклу, оскільки, встановивши стан на нове значення, компонентDidUpdate () знову зателефонує.

Є два місця для виклику побічного ефекту для найкращої практики - компонентDidMount () та компонентDidUpdate ()