Si un componente usa algunos datos de un enlace personalizado y si el enlace personalizado también contiene datos (locales/globales) que no son consumidos por el componente anterior, entonces el componente se vuelve a representar incluso cuando los datos no dependientes cambian (referencias para datos no dependientes). -tipos primitivos). ¿Hay alguna manera de prevenir esto?
Código de ejemplo:
useTest.hook.js
export default function useTest() { const { consumedData, nonConsumedData } = useSelector(state => state.Data); return { consumedData, nonConsumedData } }Componente.js
export default function Component() { const {consumedData} = useTest(); return <div>{consumedData}</div>; }Aquí, el componente se vuelve a representar cuando cambia nonConsumedData (o incluso cuando cambia state.Data). nonConsumedData podría ser consumido por algún otro componente. ¿Hay alguna manera de detener el renderizado en tales casos?
Puede usar la memorización para evitar volver a renderizar componentes (si la nueva renderización afecta el rendimiento).
Con componentes basados en funciones, solo use React.memo()
const MyComponent = React.memo(function MyComponent(props) { /* render using props */ });Más información aquí: https://reactjs.org/docs/react-api.html#reactmemo