Quand utiliser la méthode React "composantDidUpdate"?

Question

J'ai écrit des dizaines de fichiers React , n'utilisez jamais la méthode componentDidUpdate .

Existe-t-il un exemple typique de la nécessité d'utiliser cette méthode?

Je veux un exemple concret, pas une simple démo.

Merci de répondre!

Answer 1

Un exemple simple serait une application qui recueille des données d'entrée de l'utilisateur, puis utilise Ajax pour charger les données d'une base de données. Voici un exemple simplifié (n'ont pas l'exécuter, ont peut - être des erreurs de syntaxe):

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

Donc, chaque fois que le composant a un state le changer vous sauvegarde automatique des données. Il existe d'autres moyens de l'appliquer trop. L' componentDidUpdate est particulièrement utile lorsqu'une opération qui doit arriver après le DOM est mise à jour et la mise à jour de la file d'attente est vide. C'est sans doute plus utile sur le complexe renders et state DOM changements ou lorsque vous avez besoin de quelque chose pour la absolument la dernière chose à être exécuté.

L'exemple ci-dessus est assez simple, mais probablement le prouve. Une amélioration pourrait être de limiter la quantité de fois que l'enregistrement automatique peut s'exécuter (e.g max toutes les 10 secondes), car en ce moment, il sera exécuté sur chaque frappe de touche.

J'ai fait une démo sur ce violon ainsi à démontrer.

---

Pour plus d'informations, reportez-vous à la officiel docs:

componentDidUpdate() est appelée immédiatement après la mise à jour se produit. Cette méthode n'est pas appelée pour la première de rendre.

Profitez de cette occasion pour fonctionner sur les DOM lorsque le composant a été mis à jour. C'est aussi un bon endroit pour faire des demandes de réseau aussi longtemps que vous le comparer l'état actuel de accessoires précédente accessoires (par exemple, une demande de réseau peut ne pas être nécessaire si les accessoires n'ont pas changé).

Answer 2

J'ai utilisé componentDidUpdate() dans highchart.

Voici un exemple simple de ce composant.

 import React, { PropTypes, Component } from 'react'
window.Highcharts = require('highcharts')

export default class Chartline extends React.Component {
  constructor(props) {
    super(props);
    this.state ={
    chart:''
   }
  }

  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
          }]

    });
  }
}
  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'}}></div>
    )
  }
}