Quelles sont les fonctions du cycle de vie de réaction ?

fonction de cycle de vie de réaction

Initialisation

1.getDefaultProps()

Remarque : getDefaultProps est Cette méthode de définition est utilisée lorsque vous définissez des composants à l'aide de la méthode React.createClass
Si vous utilisez la syntaxe es6, par exemple, si vous utilisez le nom du composant de classe extends React.Component, n'utilisez pas la méthode
getDefaultProps pour. définir des accessoires, mais doit être défini avec static propTypes =｛｝, donc il n'y aura pas d'alarme

设置默认的props，也可以用dufaultProps设置组件的默认属性. ---》设置

2.getInitialState()

Remarque : la différence avec getDefaultProps est que le premier définit la valeur par défaut props, et ce dernier définit l'état initial lors de l'utilisation de la syntaxe de classe es6, il n'existe pas de telle fonction de hook. Vous pouvez définir directement this.state dans le constructeur. Vous pouvez accéder à this.props

3.componentWillMount

à ce moment. Remarque : il n'est appelé que lorsque le composant est initialisé. Il ne sera pas appelé lorsque le composant est mis à jour. appelé une seule fois dans tout le cycle de vie. À ce stade, l'état peut être modifié.

4. render()

Remarque : les étapes les plus importantes de la réaction, la création d'un dom virtuel, l'exécution de l'algorithme de comparaison et la mise à jour de l'arborescence dom sont toutes effectuées ici. À ce stade, l’état ne peut pas être modifié.

5.componentDidMount()

Remarque : Appelé après le rendu du composant, il n'est appelé qu'une seule fois. Vous pouvez demander des données ici

· Mise à jour

1.componentWillReceiveProps(nextProps)

Remarque : il n'est pas appelé lorsque le composant est initialisé, mais est appelé lorsque le composant accepte de nouveaux accessoires.

2.shouldComponentUpdate(nextProps, nextState)

Remarque : l'optimisation des performances de React est une partie très importante. Appelé lorsque le composant accepte un nouvel état ou de nouveaux accessoires. Nous pouvons définir si les deux accessoires et l'état avant et après la comparaison sont identiques. S'ils sont identiques, renvoyez false pour empêcher la mise à jour, car le même état d'attribut générera certainement le même. Arbre DOM, donc pas besoin Créez un nouvel arbre DOM et comparez l'ancien arbre DOM avec l'algorithme diff pour économiser beaucoup de performances, surtout lorsque la structure DOM est complexe

3.componentWillUpdata(nextProps, nextState )

Remarque : Composant Il n'est pas appelé lors de l'initialisation. Il n'est appelé que lorsque le composant est sur le point d'être mis à jour. À ce moment, vous pouvez modifier l'état

4.render()<.>

Remarque : Appelés lorsque le composant est sur le point d'être démonté, certains écouteurs d'événements et minuteries doivent être effacés à ce moment.

Tutoriel React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!