0
277
VistasReact engancha el componente secundario useEffect se ejecuta primero, antes del componente principal
Estoy aprendiendo sobre los ganchos de reacción useEffect y estoy confundido sobre el orden de ejecución de useEffect. En la consola me dice que ChildComponent "componente secundario" console.log se ejecutó primero, luego useEffect "on mount" y, por último, se registró el "componente principal". Esperaba que primero se registrara "en el montaje", luego "componente principal" y, por último, el "componente secundario". ¿Alguien puede explicar por qué el niño inicia sesión primero o por qué las cosas se ejecutan de esta manera?
Fields es una simple matriz de objetos.
const fields = [ { id : 'month', title : 'Month' }, { id : 'amount', title : 'Amount' }, { id : 'year', title : 'Year' }, ]; import React, { useEffect, useState } from 'react'; export default function ParentComponent(props) { const [fields, setFields] = useState(props.fields || []); useEffect(() => { console.log('on mount'); }, []); useEffect(() => { console.log('parent component'); }, [fields]); function randomString() { return Math.random().toString(36).replace(/[^az]+/g, '').substr(0, 5); } return ( <div> <button onClick={() => setFields([...fields,...[{id: randomString(), title: randomString()}]])} >Change field</button> <ChildComponent fields={fields}/> </div> ); } function ChildComponent(props) { useEffect(() => { console.log('child component') }, [props.fields]); return (<div> {props.fields.map(({ id, title }) => <div key={id} className="field">{title}</div>)} </div>) } 
1 Respuestas
Responde la pregunta0
Es lo mismo que el burbujeo de eventos de javascript, lo que significa que cuando se ejecuta, llama a todas las funciones ParentComponent , que llamarán y representarán ChildComponent , una vez que se llame a la función más interna (representada por niño), volverá a aparecer en la parte superior, que ahora el ParentComponent's useEffect se activa y estará en orden. 
He modificado un poco tu código, para que puedas ver más el orden al que me refiero https://codesandbox.io/s/silly-jennings-9hwwv?file=/src/App.js
