业余使用react做类似于trello那种任务管理工具遇到的问题？

Question

这是demo截图，刚写不久。

我要做的是把“go home”这个卡拖到右边的doing stage。

过程：

• 拖放结束之后dragula这个库(做拖放的库，其实哪个库不要紧，关键是我做了一些操作之后他更改了DOM)把左边那张卡的DOM删除，然后在右边的doing stage下面添加“go home”的DOM。

• 然后我触发一个action，把TODO的数组减少一项，把DOING的数组添加一项(mobx的action，但我觉得redux也是同样的道理)，修改store，然后卡片区的组件就会重新渲染。

但是这样就报了错误：

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

我查阅之后找到这里的解释：https://github.com/facebook/r...，关键就是这句“you can’t expect that you can both change the DOM arbitrarily and re-render it with React at the same time.”

然后在组件中shouldComponentUpdate返回false倒是解决了问题，但是后面更新的时候就是麻烦事了。

我觉得这里最合适的办法就是mvvm框架那种双向绑定，非常方便。但是如果使用react来做，大家觉得如何处理比较好？

补充说明

我之前用angular做过拖拽排序，当拖到卡片之后数据是自动变化的(因为双向绑定)，很方便。但是使用react处理遇到的问题是，拖到卡片之后视图变了但是数据没变，然后我手动去修改数据，然后数据变了之后视图又会重绘，这样就引起问题了。

谢谢大家。

Answer 1

用react确实要有比较深的js功底，不然那个状态什么时候更新，确实是挺坑人的。另外还要引各种库来管理，麻烦死了。比较喜欢最初的react，什么都是手写的，简单明了，可读易写。
至于双向绑定吗，做这个事确实是容易，但是当你修改了数据，直接取消的时候，数据（至少客户端的数据）就都变了，这绝对是坑。
总体来说各有优点吧。

Answer 2

其实这个不是react的问题，我相信改用别的mvvm框架一样会有类似的问题，不报错可能只是框架没有做对应的提示而已。

问题的本质是新一代的前端框架本质上都是数据驱动、响应式， 以你所说的场景具体对比一下和命令式的js写法的思路异同：

命令式：监听拖拽事件 -> 根据事件操作dom
如果你需要获取到操作的对象的数据，那么就还需要根据事件存储／操作数据结构。需要注意的是，命令式下操作dom和操作数据之间是平行关系，互相并不关联，都依赖于事件本身。

响应式：监听拖拽事件 -> 根据事件存储／操作数据结构 -> 根据数据渲染dom（框架自动完成）
可以看到最明显的区别就是框架把数据结构和dom结构挂钩，替你更高效的管理dom，你只需要关心数据层面就够了。

所以你遇到的问题就是dragula把整个过程封装了，也包括了框架会完成的dom操作，两者同时操作dom当然就会遇到问题，这也是一些jQuery时代第三方库不好与新一代框架高效集成的主要原因。

如果你的应用比较简单，你可以自己对drag & drop一系列事件做处理，监听事件处理数据。如果应用比较复杂或者不想重复造轮子，可以试试一些面向新一代框架设计的周边库，比如react-dnd