React 做一个画图组件,在 CanvaEditor 添加各种 Shape 图形
<CanvaEditor>
<Rect/>
<Circle/>
....
</CanvaEditor>
如果要动态的添加删除 Shape ,就得创建一个保存 shape 属性的列表,然后再遍历渲染
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
horizon 183 天前
加个 key ,可以不更新
|
2
nulIptr 183 天前
1.如果不在列表中可以简单的使用条件语句渲染,比如{show&&<div></div>}
2.map 出来的组件只是虚拟 dom ,通过传入相同的 key 可以保持对应节点不重新渲染(条件比较复杂,大致就是没有任何状态变化),或者你自己可以用 useMemo 优化, |
3
devzhaoyou OP 所以 React 里类似这种场景都是要有数据作为驱动的?数据变,渲染的 UI 也变
如果是 js 写类似的场景, 写一个 canvaEditor.add(new Shape) 完事了,React 里还要经过数据列表中转一下,个人感觉这不是退步吗? |
4
codehz 183 天前
如果你这个没有任何层级结构的话
那确实没有任何优势,react 那种玩法在有复杂层级结构的情况下效果还不错(因为比较只需要考虑一层 |
5
beginor 183 天前 via Android
可以通过 ref 拿到 canvas 元素自己想干啥都行,react 确实是数据/状态驱动的
|
7
ChefIsAwesome 183 天前
首先理解 mvc 框架的应用场景:当一个数据对应多个视图的时候,改一次数据,多个视图自动更新。
你这是一对一的,用 mvc 当然是多绕了一个圈子。 |
8
HackerJax 183 天前
canvaEditor.add(new Shape) 跟 ShapeList.push(shape) 有啥区别?
|
9
zerodli 183 天前
这是虚拟 dom 这一类前端框架的共同特点,体现的是一个易用性和数据视图的一致性,另外一种以 svelte 、solid 为主的无虚拟 dom 的前端框架,具备编译功能,减轻一些客户端的性能损耗
|
10
maolon 183 天前 via Android
对 你这个要求直接拿 ref 搞是正确做法,实际上 react 对上 canvas 场景基本都是各种 anti-pattern 的 ref 乱飞搞定的
|
11
lisongeee 183 天前
数据变会导致 hook 函数重新运行生成新的 vdom ,然后新旧 vdom 对比后再去更新真实 dom 节点
> 如果上面保存 Shape 的列表 ShapeList 有成千上万个,一旦变更里面的一个 React 都要重新遍历 map ,重新绘制所有子组件吗,这不很浪费吗? 你这个场景只能说明每次触发更新生成了大量的 vdom ,《重新绘制所有子组件》可不一定,得看新旧 vdom diff 的结果 |
12
okakuyang 183 天前 via iPhone
多写写就习惯了,本质上是操作 dom 的方法那么多,改成操作数据减轻心智负担。
|
13
devzhaoyou OP 感谢各位,感觉小脑袋瓜又疯狂的在长脑细胞
|
14
devzhaoyou OP @ChefIsAwesome 感谢,学到了
|
15
devzhaoyou OP @zerodli 其实也有疑惑是不是 vue 也是这样,感谢反馈
|
16
mipawn 183 天前
这个 map 里的 if 判断这块。再单独抽一个组件做这个事情,是可以做到性能优化的
|