Componente principal como este:
function ParentComponent(){ return ( <ChildComponent data={{ x: 1, y: 2 }} /> ) }Componente hijo como este:
function ChildComponent({ data }){ const [sum, set] = useState(0) useEffect(() => { set(data.x + data.y) }, [data]) return ( <div>{sum}</div> ) }Si es como el método anterior, provocará una representación repetida entre subgrupos, porque los datos siempre están cambiando. ¿Cómo debo lidiar con tal escenario?
Por supuesto, sé que es posible almacenar datos en caché en el componente principal mediante const [data] = useState({ x: 1, y: 2 }) , pero quiero saber si hay una mejor solución, si se requiere algún parámetro de objeto useState para almacenar en caché, ¿es esta implementación demasiado complicada?
Además, también se puede almacenar en el componente secundario a través const dataRef = useRef(data) , pero si cambia un valor de datos, no se volverá a calcular.
Otros parámetros como funciones y matrices son los mismos.
¿Qué hay de malo en mi forma de pensar?
si se requiere algún parámetro de objeto useState para almacenar en caché
Afortunadamente, la matriz de dependencias puede contener cualquier valor, no solo objetos. Porque estás usando lo que se transmite como
set(data.x + data.y)podría establecer la matriz de dependencia solo en esas propiedades , en lugar de todo el objeto:
useEffect(() => { set(data.x + data.y) }, [data.x, data.y])o incluso
useEffect(() => { set(data.x + data.y) }, [data.x + data.y])Alternativamente, en React, cuando desea mantener las cosas sincronizadas, a menudo es más fácil (y más limpio) no duplicar el estado / accesorios en múltiples componentes cuando sea posible. Por ejemplo, si algo se transmite como accesorio, si solo puede usar el accesorio , en lugar de poner el accesorio en estado, ese puede ser el enfoque más fácil que la alternativa. Sé que esto fue solo un ejemplo de juguete, pero no es una trampa poco común.
function ChildComponent({ data }){ return ( <div>{data.x + data.y}</div> ) }(Si la operación a realizar es costosa y no desea realizarla en cada renderizado, memorice el valor en lugar de ponerlo en estado)