Когда использовать метод React "componentDidUpdate"?

Ответ 1

Простым примером может служить приложение, которое собирает входные данные от пользователя и затем использует 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, когда компонент был обновлен. Это также хорошее место для выполнения сетевых запросов, если вы сравниваете текущий реквизит с предыдущими реквизитами (например, сетевой запрос может не понадобиться, если реквизиты не изменились).

Ответ 2

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));

    }
}

Ответ 3

Я использовал 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' }} />;
  }
}

Ответ 4

Иногда вы можете добавить значение состояния из реквизита в конструктор или componentDidMount, вам может потребоваться вызвать setState, когда реквизиты изменились, но компонент уже смонтирован, поэтому componentDidMount не будет выполняться, и ни один из них не будет конструктор; в этом конкретном случае вы можете использовать componentDidUpdate, так как реквизиты изменились, вы можете вызвать setState в componentDidUpdate с новыми реквизитами.