react状态到底怎么难管理？

Question

最近在学习redux的过程中，陷入了一个困境。感觉用redux改造项目后，并没有实质性的轻松，感觉更麻烦了。现在越来越不明白到底react的管理难在哪里？使用redux,我一开始以为能避免组件的无意义的刷新，发现并不能。react在父组件中通过props中向子组件传递数据，我并没有感觉这样很难管理呀？为什么大家都说难管理，到底难管理在哪一点？现在越来越糊涂了。。。大神能给一些具体的事例吗？到底在哪些地方难管理了，才促使大家使用状态管理工具？

Answer 1

谢邀！

对于大型的复杂应用来说，代码结构和组件之间的通信往往是最关键的，但 React 只是 DOM 的一个抽象层，并没对这两方面提供完整解决方案。为了解决这个问题，才提出flux、redux等架构概念！
简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。
多交互、多数据源的场景可以考虑使用redux：

1. View 要从多个来源获取数据
2. 与服务器大量交互，或者使用了WebSocket
3. 用户的使用方式复杂
4. 不同身份的用户有不同的使用方式（比如普通用户和管理员）
5. 多个用户之间可以协作

从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux：

1. 某个组件的状态，需要共享
2. 某个状态需要在任何地方都可以拿到
3. 一个组件需要改变全局状态
4. 一个组件需要改变另一个组件的状态

发生上面情况时，如果不使用 Redux 或者其他状态管理工具，不按照一定规律处理状态的读写，代码很快就会变成一团乱麻。你需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。

总之，不要把 Redux 当作万灵丹，如果你的应用没那么复杂，就没必要用它。另一方面，Redux 只是 Web 架构的一种解决方案，也可以选择其他方案，比如dva，个人感觉就很不错。

我们的项目redux也是不断的迭代，使用不使用并没有一个明确的分界点！

参照：http://www.ruanyifeng.com/blo...

Answer 2

我们所有一切组件都是建立在树形结构下。 然后你可以开始考虑状态为什么难管理了。

组件管理自己的state : 简单
组件管理子组件的state: 通过props，简单
组件管理子组件的子组件: 通过props传递到子组件，子组件再通过props传递。 一般
组件管理子组件的子。。。。: 通过props不断传递，复杂。 context 简单

组件传递状态给兄弟节点: 通过父级，使用refs，简单，使用回调，一般
组件传递状态给兄弟的子节点: 通过父级传递给兄弟节点，兄弟节点再传递给子节点 一般
组件传递状态给兄弟的子节点的子节点： 复杂

组件传递给父组件的父组件: 使用refs，多个父组件都需要refs，一般，使用回调，一般

简单总结一下： redux的出现就是为了解决，你想和其他组件共享或修改某些数据或者状态。redux理解为一个数据库，你完全可以不和页面强关联，那样你就不会觉的复杂。

使用建议是，能用组件自身管理的state就自身管理，只有你需要多个组件共享的状态才需要放到redux里面

Answer 3

如果是相邻的父子组件当然直接传递属性更加简便。
但是你如果考虑这样的情景呢。
父组价=>子组件=>孙子组件=>孙孙子组件=>孙孙孙子组件，父组件向最后的子组件传递，如果用props就要写好多层。

Answer 4

1.redux只有当项目很大，而且多人协作的情况下才能体现出他的优势
2.最典型的就是购物车场景，或者用户分步走注册的场景下，页面跳转复杂的情况下，要维护数据流很困难
3.还有组件树比较庞大，组件层级很深的情况下，父组件和子孙组件之间，兄弟组件之间传递数据就会很麻烦
4.当然了redux要写很多重复代码，如果项目不是很复杂，那就没必要单独用状态管理工具，也可以考虑用mobx

Answer 5

“使用redux,我一开始以为能避免组件的无意义的刷新，发现并不能”

其实redux是能很好地避免组件的更新的:

假设有父组件 A, 子组件 B, 孙组件 C，在没有用redux下，组件 C 需要的props都需要A传递给B，然后传递给C，B在这里仅仅起到了一个传递的作用，但是当传递给C的props改变的时候，A,B,C 都需要更新。如果使用了redux， C 直接通过redux订阅所需要的props（mapStatetoProps），当props改变的时候仅仅需要更新C组件，从而避免了 A, B组件的更新。

所以redux能很好地处理这种无关组件之间的依赖关系。

Answer 6

我觉得redux/flux对于一些轻量级项目还是显得太模板化、重量级了点。
最近刚好写了一个react状态管理框架，能够在任何位置简单执行类似

$('MyComponent').setProp({foo: bar})

就能进行状态的管理，我觉得比较适用一些简单的项目
可以参考下:https://github.com/captainwz/react-pocket