1, le concept de cycle de vie
1.1, le concept de
Dans les composants pour créer, propriétés de mise à jour des composants, le composant est détruit dans le processus, toujours accompagné d'une variété de fonctions pour effectuer ces composants dans une période spécifique, a déclenché la fonction exercée, collectivement désignés en fonction du cycle de vie des composants.
1.2, le cycle de vie des composants en trois étapes
Phase de chargement (montage): effectuer l'initialisation du composant, il est une caractéristique notable: Créer une fonction du cycle de vie est exécutée une seule fois dans une vie assemblée;
Mise à jour de l' étape (mise à jour): exécuter une propriété et change d' état en fonction du changement d'état et le montage des accessoires, déclenchement sélectif 0 fois ou plus;
phase Déchargement (Démontage): exécuté lorsque la durée de vie détruite Component Object exécuté une seule fois;
2, l'ancien cycle de vie
2.1 Montage (phase de charge: concerne la fonction de crochet 6)
constructeur()
Lorsqu'il est appelé une fois chargé, il peut être l'état initialisées
getDefaultProps ()
Les accessoires de scène par défaut, peuvent également utiliser les propriétés par défaut dufaultProps le composant.
getInitialState ()
état d'initialisation, peut être définie directement dans le constructeur de this.state
componentWillMount ()
Seul appelé lorsque le composant est chargé, après n'est pas appelé la mise à jour des composants, le cycle de vie appelée une seule fois, vous pouvez modifier l'état
rendre()
réagir étapes les plus importantes pour créer un dom virtuel, étaient des arbres diff dom mise à jour de l'algorithme dans ce
componentDidMount ()
Après avoir rendu les appels de composants, les appels qu'une seule fois
2.2 Mise à jour (phase de mise à jour: 5 impliquant la fonction de crochet)
componentWillReceivePorps (nextProps)
Lorsque l'appel est pas appelé lorsque le composant est chargé, le composant accepte les nouveaux accessoires
shouldComponentUpdate (nextProps, nextstate)
Invoqué lorsqu'un composant reçoit un nouveau accessoires ou état, retour dom véritable volonté de mise à jour (en utilisant diff mises à jour de l'algorithme), return false Prévient les mises à jour (ne rendent pas appeler)
componentWillUpdata (nextProps, nextstate)
N'est pas appelé lorsque le composant est chargé uniquement lorsqu'il est appelé dans le composant à être mis à jour, vous pouvez modifier l'état
rendre()
réagir étapes les plus importantes pour créer un dom virtuel, étaient des arbres diff dom mise à jour de l'algorithme dans ce
componentDidUpdate ()
Il n'est pas appelé lorsque le composant est chargé des mises à jour des composants après l'achèvement de l'appel
2,3, démontage (phase de déchargement: se rapporte à une fonction de crochet)
componentWillUnmount ()
Après avoir rendu les appels de composants, les appels qu'une seule fois
2,4, le cycle de vie de l'échantillon de code de fonction
import React, { Component } from 'react'
export default class OldReactComponent extends Component {
constructor(props) {
super(props)
// getDefaultProps：接收初始props
// getInitialState：初始化state
}
state = {
}
componentWillMount() { // 组件挂载前触发
}
render() {
return (
<h2>Old React.Component</h2>
)
}
componentDidMount() { // 组件挂载后触发
}
componentWillReceivePorps(nextProps) { // 接收到新的props时触发
}
shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新
return true
}
componentWillUpdate(nextProps, nextState) { // 组件更新前触发
}
componentDidUpdate() { // 组件更新后触发
}
componentWillUnmount() { // 组件卸载时触发
}
}3, nouveau cycle de vie
3.1 Montage (phase de charge: 4 concerne la fonction du crochet)
constructeur()
Lorsqu'il est appelé une fois chargé, il peut être l'état initialisées
getDerivedStateFromProps statiques (accessoires, état)
Ensemble rerender de chaque moment où, après l'assemblage construit comprenant (après le dom virtuelle, avant le chargement réel dom), chaque acquisition d'un nouvel état ou après accessoires, après chaque appui verticaux reçus retourneront un nouvel objet comme un nouvel état ou des instructions nulles nécessaires pour mettre à jour l'État, avec componentDidUpdate, peut couvrir tous les componentWillReceiveProps d'utilisation
rendre()
réagir étapes les plus importantes pour créer un dom virtuel, étaient des arbres diff dom mise à jour de l'algorithme dans ce
componentDidMount ()
Après avoir rendu les appels de composants, les appels qu'une seule fois
3.2 Mise à jour (phase de mise à jour: 5 impliquant la fonction de crochet)
getDerivedStateFromProps statiques (accessoires, état)
Ensemble rerender de chaque moment où, après l'assemblage construit comprenant (après le dom virtuelle, avant le chargement réel dom), chaque acquisition d'un nouvel état ou après accessoires, après chaque appui verticaux reçus retourneront un nouvel objet comme un nouvel état ou des instructions nulles nécessaires pour mettre à jour l'État, avec componentDidUpdate, peut couvrir tous les componentWillReceiveProps d'utilisation
shouldComponentUpdate (nextProps, nextstate)
Invoqué lorsqu'un composant reçoit un nouveau accessoires ou état, retour dom véritable volonté de mise à jour (en utilisant diff mises à jour de l'algorithme), return false Prévient les mises à jour (ne rendent pas appeler)
rendre()
réagir étapes les plus importantes pour créer un dom virtuel, étaient des arbres diff dom mise à jour de l'algorithme dans ce
getSnapshotBeforeUpdate (prevProps, prevState)
Temps de déclenchement: mise à jour de temps a eu lieu après le rendu, avant le Royaume de rendu composant; renvoyer une valeur, en tant que troisième paramètre componentDidUpdate, avec componentDidUpdate, peut couvrir tous les componentWillUpdate d'utilisation
componentDidUpdate ()
Il n'est pas appelé lorsque le composant est chargé des mises à jour des composants après l'achèvement de l'appel
3,3, démontage (phase de déchargement: se rapporte à une fonction de crochet)
componentWillUnmount ()
Après avoir rendu les appels de composants, les appels qu'une seule fois
3.4 Gestion des erreurs (traitement des erreurs)
componentDidCatch (erreur, info)
javascript erreur dans l'une quelconque des déclencheurs
3,5, le nouvel échantillon de code de fonction du cycle de vie
import React, { Component } from 'react'
export default class NewReactComponent extends Component {
constructor(props) {
super(props)
// getDefaultProps：接收初始props
// getInitialState：初始化state
}
state = {
}
static getDerivedStateFromProps(props, state) { // 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；;每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state
return state
}
componentDidCatch(error, info) { // 获取到javascript错误
}
render() {
return (
<h2>New React.Component</h2>
)
}
componentDidMount() { // 挂载后
}
shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新
return true
}
getSnapshotBeforeUpdate(prevProps, prevState) { // 组件更新前触发
}
componentDidUpdate() { // 组件更新后触发
}
componentWillUnmount() { // 组件卸载时触发
}
}4, résumé
Le vieux cycle de vie
Nouveau cycle de vie
- nouveau cycle de vie abandonné React16
componentWillMount,componentWillReceivePorps,componentWillUpdate; - Ajout
getDerivedStateFromProps, augetSnapshotBeforeUpdatelieu des trois fonctions de crochet abandonnécomponentWillMount(componentWillReceivePorps,componentWillUpdate,); - React16 ne supprime pas ces fonctions trois crochets, mais ne peut pas ajouter une fonction de crochet (
getDerivedStateFromProps,)getSnapshotBeforeUpdatemélanger,React17seront suppriméscomponentWillMount,componentWillReceivePorps,componentWillUpdate; - Ajout manipulation d'erreurs (de componentDidCatch)
