redux 必须搭配 react 吗? react 中到底需不需要 redux? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
redux 是一个 JavaScript 状态容器, 主要提供状态管理. 可以运行于服务端, 客户端, 原生应用. 除了支持 React 外还支持其他的 UI 框架, 体积小, 只有 2kb. 当要与 React 一起使用的时候, 可以使用 react-redux 插件来进一步提升我们的开发体验.
在开始今天的主题前, 有几个点我需要强调一下
react 的 state 和 redux 的 state 根本是完全不沾边的两个东西, 切记不要混为一谈. react 的 state 是存在于类组件中的一个存放自身变量的属性, redux 的 state 整个应用的 store 中的某一个 namespace 下的状态. 二者没有任何关系.
redux 是一个独立于 react 的, 你可以选择使用也可以选择不适用, 如果您不是使用的基于 redux 的脚手架, 那么想使用 redux 您是需要单独引用的. react 包中并没有 redux.
假如您的应用中要使用 redux, 您是需要将 react 和 redux 关联起来的, 这里有一个包叫 react-redux, 是用来关联 react 和 redux 的, 其中有一个高阶函数叫 connect, 它接受两个方法, mapStateToProps 和 mapDispatchToProps 是这两个方法将 redux 的 state 注入到了 react 的 props 中.
上面是带大家回顾 redux 的一些基本知识点, 接下来我们进入主题.
redux 的使用场景
如果您的 React 应用中状态十分多, 难以维护的时候, 这个时候 redux 是个不错的选择.(这里所说的状态就是 react 的 state)
如果您需要数据共享, 即多个 react 组件需要用同一个数据源.
如果您需要一些全局性的状态控制, 比如应用中的当前登录人, 我们说不定会在哪个组件中使用登录人信息, 如果我们将它注册到全局 redux 中, 那么我们就无需关系哪个组件要用了, 我们用的时候直接从全局 redux 中取就行
某组件的业务逻辑过于复杂, 在 react 组件中处理这些数据太过繁琐, 我们可以考虑将部分逻辑拆分到 redux 中.
使用 redux 可以将数据和 UI 分离开, 如果您为了实现这样的效果, 您可以尝试使用 redux.
我们为什么要减少 redux 的使用
看过阮一峰大哥博客的同学一定看到过这几句话
如果你不知道是否需要 Redux, 那就是不需要它.
只有遇到 React 实在解决不了的问题, 你才需要 Redux .
所以 redux 并不是适合所有项目所有应用的.
使用 redux 需要创建很多模板代码, 会让 state 的更新变得十分复杂, 这一点谁用谁知道, 哈哈.
使用过多的 redux 会让应用失去灵活性
Redux 带来了函数式编程, 不可变性思想等等, 为了配合这些理念, 开发者必须要写很多 "模式代码 (boilerplate)", 繁琐以及重复是开发者不愿意容忍的. 当然也有很多 hack 旨在减少 boilerplate, 但目前阶段, 可以说 Redux 天生就附着繁琐;
使用 Redux, 那么你的应用就要用 objects 或者 arrays 描述状态; OMG!
使用 Redux, 那么你的应用就要使用 plain objects 即 actions , 来描述变化; OMG!
使用 Redux, 那么你的应用就要使用纯函数去处理变化; OMG!
应用中, 状态很多都要抽象到 store, 那么何时使用 local states 何时接入 Redux store? 不能痛痛快快地写业务, 一个变化就要对应编写 action(action creator),reducer 等等;
和响应式结合函数式的 Mobx 相比, 编程体验 "打折扣"
以上是引用了网友的一段话, 可见 redux 的过多使用时存在很多弊端的, 我这里就不一一罗列他的弊端了. 感兴趣的同学可以去自己搜一下, 总是, 我认为能不用 redux 就不用 redux
读到这里, 我想解决了一些读者心中的疑问 "我们什么时候用 react 的 state 什么时候用 redux 的 state?" 答案就很明确了.
redux 毕竟是一个比较成功的框架, 其中的数据流也是很经典, 解决了不少难题, 任何东西都有利弊, 我们只要做好权衡, 相信我们可以写出更加优秀的应用.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/react/17026.html