reactjs - page - react.createelement example

¿Por qué se llama varias veces a componentDidMount en react.js & redux?

Question

Leo componentDidMount se llama a componentDidMount solo una vez para la representación inicial, pero veo que se procesa varias veces.

Parece que he creado un bucle recursivo.

• componentDidMount distribuye acciones para recuperar datos
• Al recibir los datos, dispara una acción exitosa para almacenar los datos en estado de redux.
• un componente de reacción principal está conectado al almacén de redux y tiene mapStateToProps para la entrada que acaba de cambiar en el paso anterior
• los elementos primarios representan componentes secundarios (que se seleccionan mediante programación a través de una variable)
• componenteDidMount del componente hijo se llama de nuevo
• dispara la acción para recuperar datos

Creo que eso es lo que está pasando. Puedo estar equivocado.

¿Cómo puedo detener el bucle?

Aquí está el código para representar componentes secundarios mediante programación.

 function renderSubviews({viewConfigs, viewConfig, getSubviewData}) {

   return viewConfig.subviewConfigs.map((subviewConfig, index) => {
     let Subview = viewConfigRegistry[subviewConfig.constructor.configName]
     let subviewData = getSubviewData(subviewConfig)

     const key = shortid.generate()
     const subviewLayout = Object.assign({}, subviewConfig.layout, {key: key})
     return (
       <div
         key={key}
         data-grid={subviewLayout}
         >
         <Subview
           {...subviewData}
           />
       </div>
     )
   })
 }

Answer 1

Una instancia de componente solo se montará una vez y se desmontará cuando se elimine. En su caso se borra y se recrea.

El objetivo de la key es ayudar a React a encontrar la versión anterior del mismo componente. De esa manera puede actualizar un componente anterior con nuevos accesorios en lugar de crear uno nuevo.

React a menudo puede funcionar bien sin una clave, la excepción es una lista con elementos. Desea una clave allí para poder realizar un seguimiento cuando los elementos se reorganizan, crean o eliminan.

En su caso, le está diciendo explícitamente a React que su componente es diferente del anterior. Estás dando una nueva clave en cada render. Esto obliga a React a tratar la instancia anterior como eliminada. Cualquier niño de ese componente también es desmontado y desmantelado.

Lo que debes hacer es (nunca) generar una clave al azar. Las claves siempre deben basarse en la identidad de los datos que muestra un componente. Si no es un elemento de la lista, probablemente no necesite una clave. Si se trata de un elemento de la lista, es mucho mejor utilizar una clave derivada de la identidad de los datos, como una propiedad de ID, o tal vez una combinación de varios campos.

Si generar una clave aleatoria hubiera sido lo correcto, React se habría ocupado de eso por ti.

Debe colocar su código de recuperación inicial en la raíz de su árbol React, generalmente esa es la App . No lo pongas en algún niño al azar. Al menos, debe colocarlo en un componente que exista durante toda la vida de su aplicación.

La razón principal para ponerlo en componentDidMount es que no se ejecuta en el servidor, porque los componentes del lado del servidor nunca se montan. Esto es importante para la representación universal. Incluso si no está haciendo esto ahora, puede hacerlo más tarde, y estar preparado para ello es una buena práctica.