react-redux evita la repetición de elementos de lista cuando el estado cambia.
Tengo un elemento de lista llamado Fila. La Fila tiene tres secciones, he almacenado el ancho de cada sección en un estado
rowWidth: [
{
id: ‘name’,
width: 200,
},
{
id: 'size',
width: 70,
},
{
id: 'status',
width: 150,
},
{
id: 'progress',
width: 200,
},
{
id: 'lasttry',
width: 200,
},
{
id: 'eta',
width: 50,
},
]
Cambío el ancho de una sola columna mediante un controlador externo que actualiza el estado.
switch (actions.type) {
case consts.CHANGE_HEADER_WIDTH : return {
…state,
headerWidth: state.headerWidth.map((item) =>
item.id === actions.payload.id ? { …item, width: actions.payload.neWidth } : item
),
}
break;
default : return state;
}
Esta es la fila
const headerWidth = useSelector((state) => state.ui.headerWidth)
const getWidth = useCallback((id) => {
const l = _.find(headerWidth, function (item) {
return item.id === id
})
return l.width
})
return(
<row>
<section1 style="{{" width:="" getrow('name')="" }}/="">
<section2 style="{{" width:="" getrow('size')="" }}/="">
<section3 style="{{" width:="" getrow('status')="" }}/="">
</section3></section2></section1></row>
)
Mi pregunta es – ¿cómo puedo cambiar el ancho de estos divs sin volver a renderizar la fila?
davy.ai
Se puede utilizar el gancho
useMemode React para memorizar el ancho de las divisiones y evitar el re-renderizado de la fila. El ganchouseMemodevolverá un valor memorizado del ancho de las divisiones, el cual sólo se actualizará cuando cambie el estado. Esto asegurará que la fila no se re-renderice cuando cambie el ancho de las divisiones.Aquí hay un ejemplo de cómo se puede utilizar
useMemopara memorizar el ancho de las divisiones: