Quando usar o método React “componentDidUpdate”?

Escrevi dezenas de Reactarquivos, nunca use o componentDidUpdatemétodo.

Existe algum exemplo típico de quando é necessário usar esse método?

Eu quero algum exemplo do mundo real, não uma simples demonstração.

Obrigado pela resposta!

Um exemplo simples seria um aplicativo que coleta dados de entrada do usuário e, em seguida, usa Ajax para carregar esses dados em um banco de dados. Aqui está um exemplo simplificado (não executei - pode haver erros de sintaxe):

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

Portanto, sempre que o componente tiver uma statealteração, ele salvará os dados automaticamente. Existem outras maneiras de implementá-lo. O componentDidUpdateé particularmente útil quando uma operação precisa acontecer depois que o DOM é atualizado e a fila de atualização é esvaziada. É provavelmente mais útil em alterações complexas renderse / stateou DOM ou quando você precisa que algo seja absolutamente a última coisa a ser executada.

O exemplo acima é bastante simples, mas provavelmente prova o ponto. Uma melhoria poderia ser limitar a quantidade de vezes que o salvamento automático pode ser executado (por exemplo, no máximo a cada 10 segundos) porque agora ele será executado a cada pressionamento de tecla.

Eu fiz uma demonstração sobre este violino também para demonstrar.

Para obter mais informações, consulte os documentos oficiais :

componentDidUpdate()é chamado imediatamente após a atualização ocorrer. Este método não é chamado para a renderização inicial.

Use isso como uma oportunidade para operar no DOM quando o componente for atualizado. Este também é um bom lugar para fazer solicitações de rede, desde que você compare os props atuais com os anteriores (por exemplo, uma solicitação de rede pode não ser necessária se os props não mudaram).

Às vezes, você pode adicionar um valor de estado a partir de props no construtor ou componentDidMount, você pode precisar chamar setState quando os props mudaram, mas o componente já foi montado, então componentDidMount não será executado e nem o construtor; neste caso específico, você pode usar componentDidUpdate, já que os adereços foram alterados, você pode chamar setState em componentDidUpdate com novos adereços.

Eu usei componentDidUpdate()em highchart.

Aqui está um exemplo simples deste componente.

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

    }
}

Este método de ciclo de vida é chamado assim que ocorre a atualização. O caso de uso mais comum para o método componentDidUpdate () é atualizar o DOM em resposta a alterações de propriedade ou estado.

Você pode chamar setState () neste ciclo de vida, mas lembre-se de que você precisará envolvê-lo em uma condição para verificar se há mudanças de estado ou prop em relação ao estado anterior. O uso incorreto de setState () pode levar a um loop infinito. Dê uma olhada no exemplo abaixo que mostra um exemplo típico de uso deste método de ciclo de vida.

componentDidUpdate(prevProps) {
 //Typical usage, don't forget to compare the props
 if (this.props.userName !== prevProps.userName) {
   this.fetchData(this.props.userName);
 }
}

Observe no exemplo acima que estamos comparando os acessórios atuais com os anteriores. Isso é para verificar se houve uma mudança nos adereços em relação ao que é atualmente. Nesse caso, não haverá necessidade de fazer a chamada API se os adereços não forem alterados.

Para obter mais informações, consulte os documentos oficiais:

Quando algo no estado mudou e você precisa chamar um efeito colateral (como uma solicitação para api - get, put, post, delete). Então você precisa ligar componentDidUpdate()porque componentDidMount()já está ligado.

Depois de chamar o efeito colateral em componentDidUpdate (), você pode definir o estado para um novo valor com base nos dados de resposta no then((response) => this.setState({newValue: "here"})). Certifique-se de que você precisa verificar prevPropsou prevStateevitar o loop infinito, pois ao definir o estado para um novo valor, o componentDidUpdate () irá chamar novamente.

Existem 2 lugares para chamar um efeito colateral para as melhores práticas - componentDidMount () e componentDidUpdate ()