业余使用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来做，大家觉得如何处理比较好？

Answer 1

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