réagir les méthodes de cycle de vie compréhension
Je suis un débutant à React.js et je m'efforce de comprendre plusieurs méthodes dans les méthodes de cycle de vie de réaction.
Jusqu'à présent, il me reste quelque chose qui m'embrouille:
1)
Autant que je sache, la différence entre componentWillUpdate et componentWillReceiveProps est que componentWillReceiveProps sera appelé lorsque parent changera les accessoires et que nous pouvons utiliser setState (setState de cet enfant dans componentWillReceiveProps).
par exemple: https://github.com/bgerm/react-table-sorter-demo/blob/master/jsx/app.jsx
var App = React.createClass({
getInitialState: function() {
return {source: {limit: "200", source: "source1"}};
},
handleSourceChange: function(source) {
this.setState({source: source});
},
render: function() {
return (
<div>
<DataSourceSelectors onSourceChange={this.handleSourceChange} source={this.state.source} />
<TableSorter dataSource={urlForDataSource(this.state.source)} config={CONFIG} headerRepeat="5" />
</div>
);
}
});
Dans TableSorter, nous avons
componentWillReceiveProps: function(nextProps) {
// Load new data when the dataSource property changes.
if (nextProps.dataSource != this.props.dataSource) {
this.loadData(nextProps.dataSource);
}
}
ce qui signifie que lorsque nous changeons this.state.source, nous nous attendrons à ce que componentWillReceiveProps soit appelé dans TableSorter
Cependant, je ne comprends pas très bien comment utiliser componentWillUpdate dans ce cas, la définition de componentWillUpdate est
componentWillUpdate(object nextProps, object nextState)
Comment pouvons-nous passer nextState de parent en enfant? Ou peut-être que je me trompe, le nextState est-il passé de l'élément parent?
2) Méthode componentWillMount me perturbe car dans le document officiel, il est dit que
Appelé une fois, à la fois sur le client et sur le serveur, immédiatement avant le le rendu initial se produit.
Dans ce cas, si j'utilise setState dans cette méthode, il remplacera le getInitialState puisqu'il n'appellera qu'une seule fois par défaut. Dans ce cas, quelle est la raison pour définir les paramètres dans la méthode getInitialState. Dans ce cas particulier, nous avons
getInitialState: function() {
return {
items: this.props.initialItems || [],
sort: this.props.config.sort || { column: "", order: "" },
columns: this.props.config.columns
};
},
componentWillMount: function() {
this.loadData(this.props.dataSource);
},
loadData: function(dataSource) {
if (!dataSource) return;
$.get(dataSource).done(function(data) {
console.log("Received data");
this.setState({items: data});
}.bind(this)).fail(function(error, a, b) {
console.log("Error loading JSON");
});
},
les éléments seront remplacés initialement et pourquoi nous avons toujours besoin de items: this.props.initialItems || [] int dans la méthode getInitialState?
J'espère que vous pourrez comprendre mon explication et donnez-moi s'il vous plaît quelques astuces si vous en avez. Merci beaucoup pour ça :)
1) componentWillReceiveProps est appelée avant componentWillUpdate dans le cycle de vie de la mise à jour de React. Vous avez raison, componentWillReceiveProps vous permet d'appeler setState. componentWillUpdate est en revanche un rappel à utiliser lorsque vous devez réagir à un changement d'état.
La différence fondamentale entre les accessoires et l'état est que l'état est privé pour le composant. C'est pourquoi ni un composant parent ni personne ne peut manipuler l'état (par exemple, l'appel setState) du composant. Ainsi, le flux de travail par défaut pour la relation composant parent-enfant serait le suivant:
- Le parent passe de nouveaux accessoires à l'enfant
- L'enfant gère les nouveaux accessoires dans 'composantWillReceiveProps', appelle
setStatesi nécessaire - Child gère le nouvel état dans 'composantWillUpdate' - mais si votre composant est avec état, la gestion des accessoires dans 'composantWillReceiveProps' sera suffisante.
2) Vous avez fourni un assez bon exemple de code pour illustrer la différence. Les valeurs par défaut définies dans getInitialState seront utilisées pour le rendu initial. L’appel loadData de componentWillMount initiera une demande AJAX qui peut ou non aboutir - de plus, le temps qu’il faudra pour le terminer est inconnu. Au moment où la demande AJAX est terminée et que setState est appelé avec le nouvel état, le composant sera rendu dans le DOM avec les valeurs par défaut. C'est pourquoi il est tout à fait logique de fournir l'état par défaut dans getInitialState.
Remarque: J'ai trouvé Comprendre le cycle de vie des composants React article une aide précieuse pour comprendre les méthodes du cycle de vie de React.
Meilleur article que j'ai jamais lu pour comprendre le cycle de vie du composant React:
Voici un diagramme étonnant des méthodes du cycle de vie de React ( de Dan Abramov ) 
Quatre phases d'un composant React
Initialisation
Montage
Mettre à jour
Démonter
Voici un rapide aperçu des différentes méthodes de la
Cycle de la vie
vous devez avoir une bonne compréhension des méthodes de cycle de vie pour pouvoir coder en réaction.
Méthodes en phase de montage:
Cela commence quand une instance d'un composant est créée et quand elle est rendue dans le DOM.
1 .constructor(props) - elle est appelée lors de la première initialisation du composant. Cette méthode n'est appelée qu'une fois.
2 .componentWillMount() - elle est appelée lorsqu'un composant est sur le point d'être monté.
3 .render() -it est appelée lorsqu'un composant est rendu.
4 .componentDidMount() - elle est appelée lorsqu'un composant a terminé son montage.
Méthodes en phase de mise à jour:
Il commence lorsque les propriétés ou l'état d'un composant changent.
1 .componentWillReceiveProps(nextProps) - elle est appelée lorsqu'un composant a été mis à jour et reçoit de nouveaux accessoires.
2 .shouldComponentUpdate(nextProps, nextState) - est appelée après la réception des accessoires et est sur le point de se mettre à jour. Si cette méthode retourne false, composantWillUpdate (), render () et composantDidUpdate () ne seront pas exécutés.
3 .componentWillUpdate(nextProps, nextState) - elle est appelée lorsqu'un composant est sur le point d'être mis à jour.
4 .render() - appelé quand un composant est rendu.
5 .componentDidUpdate(prevProps, prevState) - elle est appelée lorsqu'un composant a fini de se mettre à jour.
Méthodes en phase de démontage:
Il commence lorsqu'un composant est en cours de suppression du DOM.
1 .componentWillUnmount() - elle est appelée immédiatement avant le démontage d'un composant.
Réf.: https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0
Une méthode de cycle de vie de composant est une fonction que nous pouvons éventuellement définir dans nos composants basés sur des classes. Si nous décidons d'implémenter ces méthodes, elles seront automatiquement appelées par React à certains moments du cycle de vie des composants.
Un composant sera créé et apparaîtra dans le DOM ou le navigateur et nous pourrons faire quelque chose comme this.setState() qui le rendra à nouveau et, en théorie, à un moment donné, un composant sera supprimé du DOM et cessera de montrer son contenu. contenu à l'écran.
Toute cette série d’événements correspond à ce que l’on appelle le cycle de vie des composants.
Ces méthodes de cycle de vie sont appelées à des moments très distincts au cours d'un cycle de vie.
Il y a la fonction constructor(props), fonction que nous pouvons éventuellement définir. Si nous le faisons, elle sera automatiquement appelée lors de la création d'une nouvelle instance du composant.
Il y a la méthode render(), qui n'est pas facultative, nous devons la définir. La méthode render() est une fonction de cycle de vie, elle est appelée à un moment quelconque du cycle de vie d'un composant.
Nous commençons avec constructor(props) étant appelé, puis la méthode render() sera appelée, renvoie une certaine quantité de jsx et le contenu devient visible à l'écran.
Ensuite, une autre série de méthodes de cycle de vie est appelée à différents moments.
Tout d'abord, immédiatement après l'affichage d'un composant sur l'écran du navigateur, une méthode de cycle de vie appelée componentDidMount() sera appelée. Cela signifie que si nous définissons une fonction dans notre classe, en dehors de constructor(props), juste au-dessus de la méthode render(), nous pouvons définir une méthode appelée componentDidMount() comme suit:
componentDidMount() {
}
render() {
}
Cette fonction sera automatiquement appelée une fois, lorsque le composant sera d'abord rendu à l'écran. Nous pouvons insérer du code pour la configuration ou effectuer le chargement initial des données ou une grande variété d'opérations que nous pourrions effectuer une fois, lorsque le composant apparaît pour la première fois.
Une fois cette méthode appelée, le composant attendra une mise à jour. La mise à jour se présentera sous la forme de this.setState().
Une fois cela fait, le composant se mettra à jour ou se restituera lui-même, ce qui appellera une autre méthode de cycle de vie appelée componentDidUpdate(). Si nous définissons cette fonction, elle sera appelée automatiquement à chaque fois que ce composant se mettra à jour.
Le composant restera en attente et attendra une autre mise à jour et la componentDidUpdate() à nouveau ou plusieurs fois.
À un moment donné, nous voudrons peut-être arrêter le composant componentDidUpdate() et c'est à ce moment-là que nous implémenterons la componentWillUnmount(). Il s'agit d'une méthode que nous souhaitons appeler lorsque nous souhaitons nettoyer notre composant.