Dans mon application react, j'ai un composant app.jsx dans lequel j'exécute des fonctions de base telles que l'obtention de la taille de la fenêtre, la lecture des informations utilisateur en appelant une fonction API, etc.

C'est vraiment le composant de premier niveau au point d'entrée. Voici à quoi ressemble mon point d'entrée:

render (
    <Provider store={store}>
        <App>
            <HomePageComponent />
        </App>
    </Provider>,
    document.getElementById('app')
);

Ce qui me trouble, c'est que dans le composant de la page d'accueil, j'ai un tas de sous-composants. On dirait que la fonction componentDidMount() d'un sous-composant à l'intérieur de la page d'accueil s'exécute avant la fonction componentDidMount() du composant App.

Est-ce ainsi que cela est censé fonctionner? À l'envers? Je mettais quelques fonctions de base de la maison comme obtenir des informations sur l'utilisateur dans le composant App en pensant qu'il s'exécuterait en premier.

2
Sam 26 juil. 2017 à 09:29

2 réponses

Meilleure réponse

Oui, c'est un comportement attendu. Il y a une discussion à ce sujet dans ce numéro.

Quelques faits saillants:

Si componentDidMount a exécuté parent-first, la seule chose que vous y trouverez est votre nœud, car tous les nœuds enfants n'ont pas été montés à ce moment. Cela rend componentDidMount inutile pour la majorité des cas d'utilisation (par exemple, compter offsetWidth, attacher des plugins tiers non React, etc.). (gaearon)

Ce n'est pas un bug mais peut-être des documents déroutants. C'est l'ordre de création des éléments DOM. Cela n'a rien à voir avec le fait d'être dans le document ou pas, puisque nous ne pouvons pas garantir cela de toute façon (puisque la racine peut être hors du document). (sebmarkbage)

Techniquement, les méthodes de cycle de vie garantissent uniquement que votre composant particulier est monté. Il ne fait aucune promesse en ce qui concerne ses enfants. Se fier à cet ordre indique généralement que vous dépassez les limites d'encapsulation des composants. (sebmarkbage)

0
ivarni 26 juil. 2017 à 06:36

Utilisation

constructor () pour charger les opérations initiales de vos cuissons. plus tard, fournissez vos opérations componentDidMount () et ainsi de suite.

Pour une meilleure compréhension, voir Cycle de vie des composants React

0
Abdul Hameed 26 juil. 2017 à 06:39