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

React 做一个画图组件，在 CanvaEditor 添加各种 Shape 图形

    
    
    ....

如果要动态的添加删除 Shape，就得创建一个保存 shape 属性的列表，然后再遍历渲染

const (ShapeList)  = useState({type, width, heigth ....})


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



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

疑问：

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