React 中添加、删除、变更子组件疑问

React 做一个画图组件，在 CanvaEditor 添加各种 Shape 图形
```js
<CanvaEditor>
    <Rect/>
    <Circle/>
    ....
</CanvaEditor>
```

如果要动态的添加删除 Shape ，就得创建一个保存 shape 属性的列表，然后再遍历渲染
```js
const (ShapeList)  = useState({type, width, heigth ....})

<CanvaEditor>
     ShapeList.map(
        (shape) => {
            if(shapre.type === 'rect')
                return <<Rect/>
            else if(shape.type === 'circle')
                return <<Circle/>
        }
    )
</CanvaEditor>


// 动态添加图形, 触发 CanvaEditor 重新渲染
const AddShape = (shape) => {
    ShapeList.push(shape)
}
```

疑问：
1. React 中要添加和删除子组件，都是必须通过有的数据列表转换一道吗？有什么其他操作方法？
2. 如果上面保存 Shape 的列表 ShapeList 有成千上万个，一旦变更里面的一个 React 都要重新遍历 map ，重新绘制所有子组件吗，这不很浪费吗？

多写写就习惯了，本质上是操作 dom 的方法那么多，改成操作数据减轻心智负担。

数据变会导致 hook 函数重新运行生成新的 vdom ，然后新旧 vdom 对比后再去更新真实 dom 节点

> 如果上面保存 Shape 的列表 ShapeList 有成千上万个，一旦变更里面的一个 React 都要重新遍历 map ，重新绘制所有子组件吗，这不很浪费吗？

你这个场景只能说明每次触发更新生成了大量的 vdom ，《重新绘制所有子组件》可不一定，得看新旧 vdom diff 的结果

对 你这个要求直接拿 ref 搞是正确做法，实际上 react 对上 canvas 场景基本都是各种 anti-pattern 的 ref 乱飞搞定的

这是虚拟 dom 这一类前端框架的共同特点，体现的是一个易用性和数据视图的一致性，另外一种以 svelte 、solid 为主的无虚拟 dom 的前端框架，具备编译功能，减轻一些客户端的性能损耗

canvaEditor.add(new Shape)  跟 ShapeList.push(shape) 有啥区别？

首先理解 mvc 框架的应用场景：当一个数据对应多个视图的时候，改一次数据，多个视图自动更新。
你这是一对一的，用 mvc 当然是多绕了一个圈子。

https://www.storyblok.com/tp/react-dynamic-component-from-json

可以通过 ref 拿到 canvas 元素自己想干啥都行，react 确实是数据/状态驱动的

如果你这个没有任何层级结构的话
那确实没有任何优势，react 那种玩法在有复杂层级结构的情况下效果还不错（因为比较只需要考虑一层