React Hooks 是不能替代 Redux 的

时间: 2019-08-03阅读: 1382标签: redux

我的许多同事最近通过各种方式问同一类问题:

“如果我们开始用 hook 后,那还有必要用 Redux 吗?”
react hook 不是让 Redux 过时了吗?那只用 Hooks 就可以做 Redux 所有能做的事了吧?”

随便搜一下 Google,你就会发现人们也在互联网上问同样的问题。简单来说,“react Hooks 是否替代了 Redux”这个问题的答案是:“不”。更细致不过礼貌的答案是:“嗯,这个取决于你实际项目的类型“。最终,我倾向于回答人们“我不确定你是否明白自己在说什么”。“React Hooks 取代了 Redux”这个论点有着根本的缺陷,其原因有好几个。首先:


Redux 从始至终都是可选方案

Redux 的作者之一 Dan Abramov 曾经表达过 你可能不需要 Redux 的建议。如果你本来就不需要某样东西,那你也就不用替换它了。

如果你正在用 React,为了用起来 Redux,你还得把 Redux-Redux 装到你的应用里。在项目中使用多个库显然会增加最终应用打包的大小,也就会增加加载应用所需的时间。因此,除非有真正的理由,你不应该使用任何库,如 jQuery,Redux,MobX,甚至是 React。

当人们问起来 hook 是否能替代 Redux 时,他们似乎认为得在这两者之间做出选择,但事实并非如此。如果你正开发的应用不需要存储大量状态,或者组件层次足够简单不需要深层次的 prop 传递,那么用整个状态管理库方案是没有意义的。无论是否使用 hook,应用的状态都足够由 React 提供的功能进行管理了。

即便你的应用需要管理一个庞大的状态,或者应用的层次结构如古树的根一样错综复杂,你也不一定非得使用状态管理库。深层次传递 prop 可能很麻烦,但原生的 React 已经为你提供了包含在 hook 在内的多种状态管理的选择,他们都能帮你把状态管理的井井有条。Redux 是一个轻量级的库,不过配置相对复杂,增加最终打包的体积,还需要做出各种权衡取舍。不在项目中使用 Redux 有许多合理的理由,所以你并不总是需要用它。

虽然如此,我们还是有许多理由使用 Redux。如果你的项目本来就在用 Redux,那最开始决定使用 Redux 应该是有一些好的理由的,比如项目的组织架构需要有一个可预测的,单一事实来源的程序状态;中间件功能;或是强大的开发调试工具。如果你曾有理由使用 Redux,那 hook 并不会让你的这些理由失效。如果你曾需要用 Redux,那你也许还得继续用它。


React hook 尝试解决问题与 Redux 不同

Redux 是一个状态管理库。Hooks 是最近才加入 React 的新功能,它可以让函数组件支持曾经只在 class 组件中支持的特性。

那么,用函数组件替换 class 组件实现 React 应用会让状态管理库过时吗?答案是否定的。

关于为何开发 React hook, 官方文档 给出了三个主要原因:

  • class 组件的逻辑复用很困难。

  • 生命周期方法内常包含让人困惑的无关逻辑。

  • class 对于机器和人类来说都难以理解。

你可以注意到这些动机都跟状态管理无关。

话虽如此,React hook 确实为你提供了状态管理的新选择。值得注意的是,useState,useReducer 和 useContext 这些管理状态的新方法,一定程度上比之前 React 原生提供的方案更好、更有条理。但 React hook 没有提供超出之前 React 版本的新能力,也不会让状态管理库过时。

React hook 不会使 React 应用做任何它以前做不到的事

没错,函数组件可以做到以前只有在 class 组件才能实现的功能,同时函数组件有更好的代码组织结构和重用能力,但函数组件做不到 class 组件也做不到的事。React hook 的目的不是为了让应用更好,而是为了让开发体验更好。

useState 和 useReducer 只是管理组件状态的方法,其工作方式与 class 组件中的 this.state 和 this.setState 工作方式的大致相同。对于深层传递 prop 的问题,hook 也是无能为力。

人们似乎认为 useContext 可以把 Redux 打入冷宫,因为你可以使用它解决状态深层次传递的问题,但它确实不是什么新功能。 context API 已经存在于 React 一段时间了。useContext 只是让你可以不通过 包装组件就能使用 context。虽然有些开发人员选择使用 context 管理整个应用的状态,但 context 的设计初衷不是如此。官方文档提到:

Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。

换句话说,放在 context 中的数据不应该经常更新。

文档还建议要谨慎使用 context,因为“它会让代码复用变得更困难“。他们还警告开发人员,如果使用不当,context 还会导致不必要的重新渲染。

我见到过一些项目成功使用 React context 管理整个应用的状态。理论上这确实是一种选择。但 context 的设计初衷并不包含状态管理,而这是 Redux 或是其他状态管理库的设计目的。

此外,React hook 绝对不意味着 Redux 的灭亡,如果你瞅一眼 React-Redux 最近更新的文档,你会看到:


React-Redux 也拥有自己的 hook 了

没错,React hook 有助于重振 React-Redux 库,并移除了一些它的痛点。这与“hook 会替代 Redux”这个观点相去甚远。

我在另一篇文章深入介绍了 React-Redux 中的 hook 。在引入 hook 之前,你必须定义 mapStateToProps 与 mapDispatchToProps 函数、并用 connect 函数包装你的组件来创建出一个高阶组件。该高阶组件会把 dispatch 函数与 Redux store 的一部分状态通过你定义的映射函数作为 props,传到被 conntext 包装的组件中。

我们来看个非常简单的计数器应用示例(实际上因为过于太简单不必使用 Redux,但这个例子是为了表达一下信息的概述)。假设我们已经定义了 Redux store,并在其他地方定义了增加和减少的动作创建方法。

真是繁琐。如果我们可以不用把组件包装在高阶组件内就能让组件访问到 Redux store,不更好吗?没错,这就是 hook 可以发挥的地方了。hook 其主要功能就是代码复用,同时消除高阶组件导致的“包装地狱”问题。

简而言之,useSelector 允许你将 Redux store 的各个状态切片保存为组件的变量。useDispatch 非常简单,你可以通过它发出动作更新 Redux store。最重要的是,你不再需要实现丑陋的映射函数,并把组件包装在 connect 函数中了。现在,一切都很好的包含在你的组件里。这样的实现更简短,也就更具有可读性、更有条理。


React hook 和 Redux 不是互为竞争关系的技术

显然,这两种技术可以相互补充。React hook 不会“替换 Redux”,它只是为你提供了更新、也许更好的方式组织你的 React 应用;如果你最终决定使用 Redux 管理应用状态,也许能写出更高内聚的组件。

所以,请不要再问 "React hook 是否取代了 Redux?" 的问题了。

相反,请问一下自己:“我在开发怎样的应用?我需要怎么样的状态管理需求?Redux 是否对我来说是合理的方案,或者它对于我的需求过度复杂了?如果我决定使用 Redux 和 React hook(或是 MobX+Hook, Redux+jQuery 等技术组合)我怎样才能让这些技术相互补充,和谐工作呢?”

英文原文: https://medium.com/swlh/stop-asking-if-react-hooks-replace-redux-448c54d79551


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/5100

解决页面刷新redux数据丢失问题

对于目前普遍的“单页应用”,其中的好处是,前端可以从容的处理较复杂的数据模型,同时基于数据模型可以进行变换,实现更为良好的交互操作。良好的交互操作背后,其实是基于一个对应到页面组件状态的模型,随便称其为UI模型。

React项目实战:react-redux-router基本原理

React项目实战:react-redux-router基本原理,Redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。明智的做法是只在最顶层组件(如路由操作)里使用 Redux。其余内部组件仅仅是展示性的,所有数据都通过 props 传入。

带着问题看React-Redux源码

我在读React-Redux源码的过程中,很自然的要去网上找一些参考文章,但发现这些文章基本都没有讲的很透彻,很多时候就是平铺直叙把API挨个讲一下,而且只讲某一行代码是做什么的,却没有结合应用场景和用法解释清楚为什么这么做。

在react中使用redux并实现计数器案例

在react中组件通信的数据是单向的,顶层组件可以通过props属性向下层组件传递数据,而下层组件不能向上层组件传递数据,要实现下层组件修改数据,需要上层组传递修改数据的方法到下层组件,当项目越来越的时候

redux 和 mobx 调研结果- mobx

mobx 不同于 redux 的单一数据源的统一管理,它可以有多个 store, 为了便于维护 ,每一个 store 都是一个类,这样便于维护和扩展;mobx 不同于 redux 的单一数据源的统一管理

动手实现一个react-redux

react-redux 是 redux 官方 React 绑定库。它帮助我们连接UI层和数据层。本文目的不是介绍 react-redux 的使用,而是要动手实现一个简易的 react-redux,希望能够对你有所帮助。

react关于 Redux与flux的比较学习

flux四大元素:Dispatcher:根据注册派发动作(action),Store: 存储数据,处理数据,Action:用于驱动Dispatcher,View: 用户界面视图。flux的目的:纠正MVC框架的无法禁绝view与model通信的缺点。Redux基本原则:继承Flux基本原则:单向数据流

redux和react-redux

redux是react的状态管理工具,却不仅仅只是为了react而生的,所以在使用中会存在痛点。而react-redux是专门为了react定制,目的是为了解决redux的痛点,起到了补充的作用。flux无非就是一个常见的event dispatcher

从 源码 谈谈 redux compose

compose,英文意思 组成,构成。它的作用也是通过一系列的骚操作,实现任意的、多种的、不同的功能模块的组合,用来加强组件。很容易实现功能的组合拼装、代码复用;可以根据需要组合不同的功能;

如何使用24行JavaScript代码实现Redux?

Redux是迄今为止创建的最重要的JavaScript库之一,灵感来源于以前的艺术比如Flux和Elm,Redux通过引入一个包含三个简单要点的可伸缩体系结构,使得JavaScript函数式编程成为可能。如果你是初次接触Redux

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!