0

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

儿独 431
2017-12-29 提问
6 个回答
4

谢邀!

对于大型的复杂应用来说,代码结构组件之间的通信往往是最关键的,但 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...

2

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

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

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

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

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

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

0

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

0

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

0

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

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

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

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

0

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

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

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

撰写答案

推广链接