He desarrollado un componente de reacción.
datos JSON
[ { name: "name", checked: false children: [{ name: "name", checked: false }] }, { name: "name" checked: false, children: [{ name: "name", checked: false, children: [{ name: "name", checked: false },{ name: "name", checked: false }] }, { name: "name", checked: false }] }, ..... ]Aplicación.jsx
const root = (JSONdata) => { const [data, setData] = useState(JSONdata) const updateData = (nodeToUpdate, positionOfNode) { //newData is different referance return by updateNodeAtSpeifiedDeepPosition function as we don't want to mutate data set in state const newData = updateNodeAtSpeifiedDeepPosition(data, nodeToUpdate, positionOfNode); setData[newData] } return ( <Tree data={JSONdata} updateData={updateData} /> ) }árbol.jsx
const Tree = (data) => { const [treeNode, setTreeNode] = useEffect(data) const renderTree = (nodes) => { <li onClick = { updateData) > If(treeNode.child) { <Tree data = {treeNode.child} /> } </li> } return ( <ol >renderTree(treeNode) </ol> ) }Está funcionando, pero cada vez que se marca o desmarca la raíz se actualiza y todos los elementos secundarios se vuelven a representar ya que tienen una nueva referencia.
¿Hay alguna forma de optimizar el rendimiento?
Su implementación se ve bien
En cada cambio de casilla de verificación, sí, por supuesto, cambiará sus datos raíz y volverá a representar todos los componentes secundarios
Pero puede controlar las re-renderizaciones de componentes secundarios usando React.memo
El uso de memo hará que React omita la representación de un componente si sus accesorios no han cambiado.
Esto puede mejorar el rendimiento. Marque esto para la explicación detallada
https://reactjs.org/docs/react-api.html#reactmemo
https://www.w3schools.com/react/react_memo.asp
Tenga en cuenta: reaccionar useMemo y reaccionar memo no son lo mismo;
Además, usando el accesorio clave en los elementos li. También puede envolver su componente Tree dentro de React.memo(), esto crea un componente de orden superior, lo que evita re-renderizaciones innecesarias, si los accesorios que se le pasaron no han cambiado.
Después de envolverlo dentro de React.memo(), su componente de árbol debería verse así:
const Tree = React.memo((data) => { const [treeNode, setTreeNode] = useEffect(data) const renderTree = (nodes) => { <li onClick = { updateData) > If(treeNode.child) { <Tree data = {treeNode.child} /> } </li> } return ( <ol >renderTree(treeNode) </ol> ) });Esta publicación de blog podría ayudar más a comprender el concepto.
Para cumplir con su tercer requisito, necesito saber cuál será el valor de positionOfNode , dentro de la función updateData .
const updateData = (nodeToUpdate, positionOfNode) { const newData = updateNodeAtSpeifiedDeepPosition(data, nodeToUpdate, positionOfNode); setData[newData] }Mi sugerencia es que, dado que sus datos son una matriz de objetos JSON, usemos los índices de la matriz para nuestra ventaja, siempre que el orden de los elementos no cambie dentro de la matriz. Suponiendo que la posición de un nodo se puede definir como una cadena concatenada de índices. Considere los siguientes datos:
[ { name: "name1", checked: false children: [{ name: "name2", checked: false }] }, { name: "name3" checked: false, children: [{ name: "name4", checked: false, children: [{ name: "name5", checked: false },{ name: "name6", checked: false }] }]; Para el nodo llamado name1 , su posición debe ser 0 . Para el nombre de nodo name2 , su posición debe ser su posición principal + su índice en la matriz secundaria, por lo tanto, 00 . De manera similar, la posición de name3 será 1 . De manera similar, la posición de name4 será 10 . De manera similar, la posición de name5 será 100 . De manera similar, la posición de name6 será 101 .
Usando estas posiciones en la función updateData , se puede escribir updateNodeAtSpeifiedDeepPosition para notificar también al padre de un nodo, ya que su índice ya está presente en la cadena de posición.
No estoy familiarizado con la gestión de su estado, por lo que no sé si mi sugerencia es aplicable.
pero si solo tiene identificadores en la estructura de árbol, y junto a él, un identificador de mapa -> Nodo. Además, el padre solo pasará la identificación a los hijos y cada hijo obtendrá sus datos (nombre, marcado) de otro lugar (aquí hay varias opciones), luego el padre se representa una vez.
React.memo es más fácil, aunque la memorización tiene su coste