Nota: El accesorio de componente acepta componente, no una función de representación. No pase una función en línea (p. ej., componente = {() => }), o su componente se desmontará y se volverá a montar perdiendo todo el estado cuando el componente principal se vuelva a renderizar. Consulte Pasar accesorios adicionales para ver alternativas.
Esta advertencia del simulador. ingrese la descripción de la imagen aquí
function HomeScreen(props: Object) { return ( <Navigator initialRouteName="Empty1"> <Screen name="Empty1" component={() => { return ( <View> <Text>Example Text</Text> </View> ); }} /> <Screen name="Home1" component={HomeScreen1} /> </Navigator> ); }Le advierte que el componente se volverá a renderizar cada vez que se vuelva a renderizar la pantalla. Esto se debe a que cada vez que se evalúa el componente arg, devuelve una nueva función en línea. (el accesorio cambia cada vez, por lo que siempre debe volver a renderizarse)
La evaluación de la misma función en línea dos veces produce diferentes objetos. P.ej.
let funcs = [] for (let i =0 ; i<2; i++) { funcs.push(() => 1) } funcs[0] == funcs[1] >>> falsePuede envolver esto es useCallback para obtener una función estable que solo se actualice cuando sea necesario (nunca en su caso, ya que no captura ningún estado). Más sobre ganchos aquí
function HomeScreen(props: Object) { let component = useCallback(() => { return ( <View> <Text>Example Text</Text> </View> ); }, [] // no dependencies. This lambda will only be evaluated once. ); return ( <Navigator initialRouteName="Empty1"> <Screen name="Empty1" component={component} /> <Screen name="Home1" component={HomeScreen1} /> </Navigator> ); }O dado que esta función no depende de nada con estado, también podría declararla globalmente en la parte superior de este archivo.
let component = () => { return ( <View> <Text>Example Text</Text> </View> ); }; function HomeScreen(props: Object) { return ( <Navigator initialRouteName="Empty1"> <Screen name="Empty1" component={component} /> <Screen name="Home1" component={HomeScreen1} /> </Navigator> ); }Debe comprender qué se esconde detrás de la sintaxis JSX.
Cuando usa <SomeComponent/> , se agrega al DOM virtual de React y existe allí hasta que el árbol cambia y el componente debe desmontarse. Sobrevive a los renderizados, el DOM se está actualizando, pero el componente vive.
Cuando usa () => <SomeComponent /> , este componente es un objeto nuevo en cada representación del padre. Si tiene estado (a través del enlace setState), se reinicializará. Si tiene algún código en useEffect(() => {}, []) gancho, se volverá a llamar.