微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

三年 React 开发经验的我,迁移到 Vue 的心路历程

2018-07-23 21:30 前端大全

(点击上方公众号,可快速关注)


英文:Anya Pavlova  译文:CSDN/弯月

mp.weixin.qq.com/s/_-Mss0-6m9rGTasTpF2iOA



前几年我一直在使用 React。最初仅有 React,后来使用 Redux 和 React 的其他库(react-router、react-redux、prop-types 等)配合使用。我喜欢 React 的简单和方便,使用 React 的时光一直都很快乐。我喜欢这个时代,有太多的好工具帮助我们更快更好地开发应用。


近三个月我在用 Vue 构建 Web 应用,在此我想分享一些我作为一名 React 拥护者的 Vue 使用经验。我不想写成一篇 Vue/React 比较的文章,这种文章太多了,包括官方的 Vue 文档:


  • https://vuejs.org/v2/guide/comparison.html


它只是一些关于切换库的个人观点。


如果你使用过 Vue 和 React,或者像我一样刚刚从 React 切换到 Vue 正在适应,或者只是想多一些了解,我希望这篇文章能对你有帮助。


React 和 Angular 相似的地方


相比 React,Vue 有时更多地被拿来和 Angular 比较。实际上,浏览 Vue 模板时我们首先看到的就是双向绑定和 directive,与 Angular 非常类似:



尽管 Vue 支持 JSX,但通常的方法还是将模板和 JavaScript 分开。虽然React JSX 的语法很像原生语法,并且反映了通常的 JavaScript 语法,但 Vue 的模板语法非常高级,它包含 directive、快捷方式和条件渲染,使得 Vue 更像 Angular。不过,相似性也就到此为止了。


当然,前后端使用同一种模板可能会有很大好处(比如 node.js/Pug + Vue/Pug),而且尽管 Vue 提供的众多 directive 可能很有用,但对于我来说,从 React 的 JSX 切换到 Vue 的模板依然很痛苦。


Redux vs. Vuex


在应用中,React 通常会与某种数据流库结合使用,最流行的就是 Redux。Vue 也有个类似的数据流库,叫做 Vuex,我很高兴地发现它和 Redux 非常相似。实际上,从 Redux 切换到 Vuex 没有任何痛苦,因为与 React 跟 Vue 相比,这两个库有更多的共同点。


主要的区别就是 Redux 严重依赖于状态的不可修改性。原因就是 Redux 从 React 的思想而来:


  • https://redux.js.org/faq/immutable-data#why-is-immutability-required-by-redux


而且尽管 React 本身能处理可改变的数据,但在 React 中的推荐做法是不要修改 props 或 state 的数据:


  • https://reactjs.org/docs/optimizing-performance.html#the-power-of-not-mutating-data


以便 React 获得最好的效率。


在 React 中,组件 state 的变化会触发该组件以下的整个组件子树的重新渲染。为了避免不必要的子组件重新渲染, 我们需要使用 PureComponent,或尽量实现 shouldComponentUpdate。还需要使用不可变的数据结构让 state 的变化更容易被优化:


  • https://vuejs.org/v2/guide/comparison.html#Optimization-Efforts


然而 Vuex 完全不关心 state 是否不可修改。


在 Vue 中,组件的依赖会自动在渲染过程中跟踪,因此当 state 发生变化时,系统可以精确地知道哪个组件需要渲染:


  • https://vuejs.org/v2/guide/comparison.html#Optimization-Efforts


因此,React/Vue 与组件交互的方式有一些区别,下面我来介绍下这些区别。


Dispatch 和 Commit


Redux 中的数据流十分严格且直接。组件会 dispatch action,而 action 由 action 的创建器函数返回。然后 reducer 会根据收到的 action 返回新的 state。最后,组件会通过 store 监听 state 的变化,并在 connect() 函数的帮助下访问state中的属性。



每个 action 都会通过 action 创建器。尽管理论上来说可以直接从组件中 dispatch 一个 action,但通常不这样做。action 的语法本身就鼓励我们将 action 的逻辑封装在 action 创建器函数中,即使是最简单的 action:



尽管 Vuex 的数据流很相似,但它并不严格要求组件与 state 交互的方式。首先,组件可以 dispatch action。这通常是一些异步动作,比如从后台获取数据等。之后,action 会 commit 一个 mutation。mutation 函数与 reducer 的相似之处就是,它是唯一能够改变 state 的东西。但还有另一种方法:组件可以直接 commit 一个 mutation,有时候跳过 action 直接修改数据是很方便的 。



从组件 commit mutation 的行为不仅没有被严格禁止,Vuex 的文档甚至鼓励在异步的情况下直接使用 action:


  • https://vuex.vuejs.org/en/mutations.html#committing-mutations-in-components


由于我习惯了 React 的更严格的数据流,我更主张严格分离的概念——不管什么情况下,即使是同步或者非常简单的情况,commit mutation 也应该只能由 action 实施。


如果组件只能通过 action 来创建 mutation,那么组件和 mutation 之间就会有一个额外的层,保证组件和 mutation 之间的低耦合,最终使得代码更容易维护和修改。


从 store 中获取数据


为了与 React 组件内部的 store 交互,我们需要使用 connect() 函数。我认为 React/Redux 最让人不爽的一点就是,你不得不判断哪些组件该用 connect(),哪些不该用。使用 connect() 的组件通常被称为容器,而不使用 connect() 的一般称为表现组件,或者“笨”组件。


但 connect() 不能用得太多,因为它的性能很差。但如果只在顶层组件使用的话,需要传递给下层组件的 props 就会迅速增多。这个问题曾多次被讨论,如这里:


  • https://redux.js.org/docs/faq/ReactRedux.html#react-multiple-components


和这里


  • https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0


但实际上,即使容器组件的数量还算合理,传递给下层的 props 也挺让人头疼的。

我很意外地返现,在 Vue 中我根本不需要考虑这个问题。store 可以从任何 Vue 组件中访问,非常简单:



也就是说,从一个组件传递给另一个组件的 props 数量非常少,而且只需要传递那些没有保存在 store 中的数据。不过,在 Vue 中传递 props 的语法却非常不方便:



这里我们要给子组件(TodoItem)传递 props,但却不能在子组件定义的位置传递,而必须在模板里传递。相比之下,React 中的 props 传递更加自然,是在子组件渲染时完成的:



尽管在 Vue 中传递 props 很不方便,但好处是,由于 store 能在任何组件中访问,实际需要传递的 props 比 React 中少得多,而在 React 中,即使有足够多的容器组件,平均每个组件收到的 props 数量也非常大。


更新:新的 React Context API(https://reactjs.org/docs/context.html)提供了一种在组件树中直接访问数据而不需要在每层手动传递 props。


结论


如开头所说,本文只是一些我在从 React 迁移到 Vue 时发现的一些最重要的问题。这并不是一篇严谨的比较,不能作为选择库的依据。但如果你也像我一样不得不从一个库切换到另一个库,或者只是想了解更多的关于两个库的信息,这篇文章也许会有帮助。


总结一下重点:


  • Vue 默认不包含 JSX,很强调脚本和模板分离;

  • Redux 和 Vuex 背后的数据流思想很相似;

  • Redux 十分依赖于 state 的不可改变性,而 Vuex 不关心 state 是否不可改变;

  • Vue 允许 dispatch,也允许直接从组件中 commit,但最好还是严格些,只允许 dispatch 会比较好;

  • 任何 Vue 组件都可以直接访问 store。



【关于投稿】


如果大家有原创好文投稿,请直接给公号发送留言。


① 留言格式:
【投稿】+《 文章标题》+ 文章链接

② 示例:
【投稿】《不要自称是程序员,我十多年的 IT 职场总结》:http://blog.jobbole.com/94148/

③ 最后请附上您的个人简介哈~




觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 Hybrid App技术解析 -- 原理篇 后端说:只是你不懂怎么用 headers! 图解 React 无尽滚动的复杂度 如何利用 Chrome 浏览器实现滚动截屏
猜您喜欢 你们怎么做电商类购物车到付款流程自动监控故障的? 当流行歌曲遇到程序猿——有没有那么一个bug,会让你突然想起我 4月24日:如果我还想推荐5本书? 程序猿怎么跳出技术的“鄙视链” Mammut平台数据权限管理方案介绍