请问：一般react持久化数据是在组件操作还是在项目操作（如果项目操作应该把data返回给项目）？

Question

请问下，
项目中有组件，组件中使用props接受数据。
然后组件依据props中的data进行UI的渲染。

现在有需求：
data在组件内会经常被修改，然后还要对data进行持久化保存到数据库。

请问应该如何设计呢？
1、持久化数据是在组件操作还是在项目操作？（如果项目操作应该把data返回给项目）
2、组件对UI即时进行修改，是修改在组件内的之前传入的props.data的state就可以了对吗？不必再从props传入修改。

Answer 1

对于多层级的数据嵌套一般会使用一些数据流的工具来帮助我们更好的管理，如 mobx、zustand 等。这样顶层的数据变更就会引起组件的render，data -> ui。

这个实现其实如何实现都可以，以mobx举例，我们可以在组件中去对数据进行相应的修改，如新增数据，大概流程是：
请求服务端 -> status 200 -> 执行 mobx 的 action 更新数据 -> render。

对于更新 mobx 的数据这里可以看业务做一些调整，比如可以在一个地方统一去做数据的更新，这样我们只需在组件内取 dispatch 派发一个事件，在一个地方集中去 subscribe 订阅监听这个消息，这样的好处是可以将一类的数据操作统一封装，进行业务管理