web-dev-qa-db-fra.com

Ordre du cycle de vie des composants avec React-Redux Connect et Redux Data

Nous savons tous que constructor -> componentWillMount -> componentDidMount est l'ordre d'exécution.

Maintenant, lorsque redux entre en jeu et tente d'accéder aux propriétés de redux dans notre cycle de vie des composants. Quel est l'ordre dans lequel la connexion s'exécutera de sorte que les données sont des méthodes de cycle de vie disponibles ignorées et mise à jour des données à redux. Les possibilités sont

1. Connect (DATA AVAILABLE) -> constructor & componentWillMount & componentDidMount

2. constructor -> Connect (DATA AVAILABLE) -> componentWillMount & componentDidMount

3. constructor -> componentWillMount -> Connect (DATA AVAILABLE) -> componentDidMount

4. constructor -> componentWillMount -> componentDidMount -> Connect (DATA AVAILABLE)

et est ordre cohérent ou dépend sur les données qui sont chargées?

et est-ce différent entre réagir et réagir natif

et est-il correct de définir les propriétés de redux comme requis dans PropType

reactjsreact-nativereduxreact-redux
13
Gaudam Thiyagarajan

connect est un HOC qui enveloppe votre composant, donc la méthode de cycle de vie du composant vient après le cycle de vie de connexion. Pour une compréhension simple, vous pouvez penser à se connecter étant écrit comme ceci

const connect = (mapStateToProps, mapDispatchToProps) => (Component) => {
    return class ReduxApp extends React.Component {
        // lifecycle of connect
        render() {
            return (
                 <Component {...mapStateToProps(state)} />
            )
        }
    }
}

Désormais, chaque fois que votre état est mis à jour, connect compare peu la liste des accessoires à renvoyer au composant et, en cas de modification, mettez à jour les accessoires, après quoi la méthode de cycle de vie du composant s'exécute comme si un accessoire était mis à jour.

En bref, l'exécution est initialement

Connect (DATA AVAILABLE) -> constructor & componentWillMount & componentDidMount

Une fois les données mises à jour

Connect (DATA AVAILABLE) -> componentWillReceiveProps/getDerivedStateFromProps -> componentWillUpdate -> render -> componentDidUpdate
6
Shubham Khatri

L'ordre d'exécution initial serait -

Connect (DONNÉES DISPONIBLES) -> constructeur et composantWillMount & Render & componentDidMount

Lorsque le site démarre, la connexion redux est initialisée en premier avec ses états et actions par défaut avant les cycles de vie de montage des composants. Cependant, s'il y a des appels d'API dans redux, les cycles de vie de montage des composants n'attendront pas les données. Au lieu de cela, les cycles de vie de mise à jour des composants seront invoqués si le composant est déjà monté et que redux renvoie des données.

1
Christian