Maison > Article > interface Web > Compréhension complète du cycle de vie de React (avec code)

Compréhension complète du cycle de vie de React (avec code)

不言avant: 2019-04-03 10:05:562708parcourir

Cet article vous apporte une compréhension complète du cycle de vie de React (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le cycle de vie d'un composant React est divisé en trois parties : l'instanciation, l'existence et la destruction.

Phase d'instanciation

Lors du rendu côté client, ce qui suit est appelé en séquence

getDefaultProps( )
getInitialState()
componentWillMount()
render()
componentDidMount()

Serveur -rendu côté

getDefaultProps()
getInitialState()
componentWillMount()
render()

Remarque : componentDidMount() ne sera pas rendu côté serveur

getDefaultProps

Pour chaque instance de composant, cette méthode ne sera appelée qu'une seule fois ; et la classe de composants Dans toutes les applications ultérieures, getDefaultPops ne sera plus appelé et l'objet renvoyé peut être utilisé pour définir les valeurs des accessoires par défaut.

var Hello = React.creatClass({
    getDefaultProps: function(){
        return {
            name: 'pomy',
            git: 'dwqs'
        }
    },
    
    render: function(){
        return (
            <p>Hello,{this.props.name},git username is {this.props.dwqs}</p>
        )
    }
});

ReactDOM.render(<Hello />, document.body);

Vous pouvez également définir des accessoires lors du montage du composant.

var data = [{title: 'Hello'}];
<Hello data={data} />

Ou appelez setProps (généralement pas besoin d'appeler) pour définir ses accessoires

var data = [{title: 'Hello'}];
var Hello = React.render(<Demo />, document.body);
Hello.setProps({data:data});

Mais setProps ne peut être appelé que sur des composants enfants ou des arborescences de composants. N'appelez pas this.setProps et ne modifiez pas this.props directement. Traitez-les comme des données en lecture seule.

React fournit un moyen de vérifier les accessoires via propTypes. propTypes est un objet de configuration utilisé pour définir les types de propriétés :

var survey = React.createClass({
    propTypes: {
        survey: React.PropTypes.shape({
            id: React.PropTypes.number.isRequired
        }).isRequired,
        onClick: React.PropTypes.func,
        name: React.PropTypes.string,
        score: React.PropTypes.array
        ...
    },
    
    //...
})

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class BetterImage extends Component{...}

BetterImage.PropTypes={
  src: PropTypes.string,
  center: PropTypes.bool,
  loadingImage: PropTypes.string,
  defaultImage: PropTypes.string,
  onLoad: PropTypes.func,
  onError: PropTypes.func,
  onComplete: PropTypes.func
}
BetterImage.defaultProps={
  ....
}

getInitialState

Pour chaque instance du composant, cette méthode est appelée une et une seule fois pour initialiser l'état de chaque instance. Dans cette méthode, vous pouvez accéder aux accessoires du composant. Chaque composant React a son propre état, qui diffère des accessoires dans la mesure où cet état n'existe qu'à l'intérieur du composant, tandis que les accessoires sont partagés entre toutes les instances.

Il existe une différence entre les appels de getInitialState et getDefaultPops. getDefaultPops n'est appelé qu'une seule fois pour la classe de composant, et les applications ultérieures de cette classe ne seront pas appelées, tandis que getInitialState est appelée pour chaque instance de composant, et. ne l'ajustez qu'une seule fois.

var LikeButton = React.createClass({
  //初始化State
  getInitialState: function() {
    return {liked: false};
  },
  
  handleClick: function(event) {
    //设置修改State
    this.setState({liked: !this.state.liked});
  },

  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

Chaque fois que l'état est modifié, le composant sera restitué. Après l'instanciation, le composant sera mis à jour via l'état et les méthodes suivantes seront appelées. séquence :

1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate

componentWillMount

est appelé avant le rendu, à la fois sur le client et sur le serveur. React a officiellement publié la version v16.3. Dans cette mise à jour, en plus de la nouvelle API Context qui a été vivement discutée il y a quelque temps, deux fonctions de cycle de vie nouvellement introduites getDerivedStateFromProps et getSnapshotBeforeUpdate et trois fonctions de cycle de vie ComponentWillMount seront supprimées dans la future version v17.0, composantWillReceiveProps, composantWillUpdate.

Dans ce cycle de vie, vous rencontrerez les problèmes suivants :

a. Aucune donnée sur le premier écran ne conduit à un écran blanc
Dans les applications React, de nombreux développeurs évitent l'écran blanc. En raison de l'absence de données asynchrones lors du premier rendu de la page, le code de la partie demande de données est placé dans composantWillMount, dans l'espoir d'éviter l'écran blanc et d'avancer le temps d'envoi des requêtes asynchrones. Mais en fait, après l'exécution de composantWillMount, le premier rendu a déjà commencé, donc si des données asynchrones n'ont pas été obtenues lors de l'exécution de composantWillMount, la page sera toujours dans un état sans données asynchrones lors de son premier rendu. En d’autres termes, le composant sera toujours dans un état sans données asynchrones lors de son premier rendu. Ainsi, quel que soit l’endroit où la demande de données est envoyée, il n’existe pas de solution directe à ce problème. Concernant l'envoi précoce des demandes de données, les responsables encouragent également à placer la partie du code de demande de données dans le constructeur du composant au lieu de composantWillMount.
S'il existe deux solutions qui ont été utilisées pour améliorer l'expérience utilisateur :

Méthode 1 : demander des composants de manière asynchrone, utilisez nprogress pour ajouter une animation de chargement

import React, { Component } from 'react'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import './customNprogress.styl'

NProgress.configure({ showSpinner: false })

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    state = {
      component: null
    }

    async componentDidMount() {
      NProgress.start()
      const { default: component } = await importComponent()
      NProgress.done()

      this.setState({ component })
    }

    render() {
      const C = this.state.component

      return C ? <C {...this.props} /> : null
    }
  }

  return AsyncComponent
}

const AsyncNotFound = asyncComponent(() => import(/* webpackChunkName: "NotFound" */ '@/routes/NotFound'))

Méthode 2 : Utiliser onreadystatechange écoute readyState et charge une page statique avec seulement un cadre avant la fin du chargement des ressources. La page ne demande pas de données. Lorsque la demande de données est terminée, l'itinéraire passe à la véritable page d'accueil.

  function listen () {
    if (document.readyState == 'complete') { // 资源加载完成
        ReactDom.render(
            <Provider store={store}>
                <Router>
                    <Route path="/" component={Index}/>
                </Router>
            </Provider>,
            document.getElementById('root')
        )
    } else { // 资源加载中
        ReactDom.render(
            <Provider store={store}>
                <Router>
                    <Route path="/" component={FirstScreen}/>
                </Router>
            </Provider>,
            document.getElementById('root')
        )
    }
}

document.onreadystatechange = listen

Pour référence spécifique, veuillez vous référer à Résoudre le problème d'écran blanc de chargement de l'écran React First

b Abonnement à des événements

Un autre cas d'utilisation courant consiste à s'abonner à des événements. dans composantWillMount et annulez l'abonnement à l'événement correspondant dans composantWillUnmount. Mais en fait, React ne peut pas garantir qu'après l'appel de ComponentWillMount, ComponentWillUnmount du même composant sera également appelé. Un exemple de la version actuelle est que lors du rendu côté serveur, composantWillUnmount ne sera pas appelé côté serveur, donc l'abonnement aux événements dans composantWillMount provoquera directement une fuite de mémoire côté serveur. D'un autre côté, une fois que React aura activé le mode de rendu asynchrone à l'avenir, après l'appel de composantWillMount, le rendu du composant est susceptible d'être interrompu par d'autres transactions, ce qui empêchera l'appel de composantWillUnmount. **componentDidMount n'a pas ce problème. Après l'appel de ComponentDidMount, ComponentWillUnmount sera définitivement appelé par la suite et les abonnements aux événements existants dans le composant seront effacés en fonction du code spécifique. **

rendu

该方法会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来讲，render方法是唯一一个必需的方法。render方法需要满足下面几点：

只能通过 this.props 和 this.state 访问数据（不能修改）
可以返回 null,false(这种场景下，react渲染一个