¿Es posible usar la estructura de datos Set de ES6 en React?
Por ejemplo, si tengo una lista de verificación compuesta de elementos distintos y me gustaría mantener el estado marcado de cada elemento. Me gustaría escribir algo como esto:
export default class Checklist extends React.Component { constructor(props) { super(props); this.state = { checkedItems: new Set() } } addItem(item) { //...? } removeItem(item) { //...? } getItemCheckedStatus(item) { return this.state.checkedItems.has(item); } // More code... }Entiendo que puede haber un problema con el hecho de que un Conjunto es mutable por naturaleza, y React realiza una comparación superficial al actualizar el componente, por lo que espera que los objetos inmutables pasen y se mantengan en el estado. Sin embargo, ¿hay alguna manera de retener y mantener un objeto Set en el estado?
Dado que reaccionar identificará los cambios de estado solo si la propiedad de estado se reemplazó y no se mutó (comparación superficial), tendrá que crear un nuevo Conjunto a partir del anterior y aplicarle los cambios.
Esto es posible desde new Set(oldSet) !== oldSet .
const oldSet = new Set([1, 2]); const newSet = new Set(oldSet); console.log(oldSet === newSet);Cómo usas un Set en un componente de clase:
export default class Checklist extends React.Component { constructor(props) { super(props); this.state = { checkedItems: new Set() } this.addItem = this.addItem.bind(this); this.removeItem = this.removeItem.bind(this); } addItem(item) { this.setState(({ checkedItems }) => ({ checkedItems: new Set(checkedItems).add(item) })); } removeItem(item) { this.setState(({ checkedItems }) => { const newChecked = new Set(checkedItems); newChecked.delete(item); return { checkedItems: newChecked }; }); } getItemCheckedStatus(item) { return this.state.checkedItems.has(item); } // More code... } Cómo usar un conjunto con el gancho useState() :
const Comp = () => { [state, setState] = useState(() => new Set()); const addItem = item => { setState(prev => new Set(prev).add(item)); } const removeItem = item => { setState(prev => { const next = new Set(prev); next.delete(item); return next; }); } return /* JSX */; }state es solo un objeto común, puedes guardar lo que quieras en él. Puede sobrescribir el método de ciclo de vida shouldComponentUpdate para implementarlo usted mismo. Puede usar su propia lógica para averiguar si el componente necesita actualizarse o no. Ni siquiera necesita anidar su conjunto, simplemente puede configurarlo directamente como el state :
this.state = new Set();