那些入坑 React 前没有人会提醒你的事

[jasonslyvia]

聊了这么多严肃的话题，本周来聊聊部分开发者对 React 的吐槽以及 Facebook 官方是如何回应的吧。

本周文章

本周的文章事实上由两篇文章组成：

一篇是 Gianluca Guarini 写的 《Things nobody will tell you about React.js》，我将它译作 《那些入坑 React 前没有人会提醒你的事》，因为作者行文中明显带着对 React 的批判和失望。

另一篇则是 Facebook 员工，也是 Redux 作者的 Dan Abramov 针对上文的回复 《Hey, thanks for feedback!》。

文章摘要

Gianluca Guarini 着重吐槽的点在于：

• React 项目文件组织规范不统一，社区中 Starter Kit 太多（100+），新手不知道该怎么组织文件
• 由于 React 只关心 View 层，开发者就要面临选择 mobx 还是 redux 的纠结，无论选择哪种都会带来一系列的问题（重新配置构建脚本，更新 eslint 规则等）
• 如果选了 mobx，会发现 mobx 无法保证自己的 store 不被外部更新（官方建议是加上特殊的前缀）
• 如果选了 redux，会发现要实现同样的功能需要写很多的重复代码（这也是为什么社区中有海量的 redux helper 存在）
• 路由用起来也很蛋疼，因为 React Router 几乎是社区中唯一的选择，但是这货版本更新太快，一不小心就用了废弃的 API

至于 Dan 怎么回复的，留给参与讨论的同学自行发现。

为什么选择这篇文章

我们团队最早在 2014 年中就确定了 React 作为未来的发展方向，那个时候很多人都还在感叹 Angular（那时候还是 Angular 1）是一个多么牛 x 的框架，很多人甚至听都没有听说过 React。

在不到三年的时间里，React 社区迅速的发展壮大，许多 Angular、Ember、Knockout 等框架的拥趸，或主动或被动的都逐渐开始向 React 看齐。

站在 React 已经繁荣昌盛、无需四处布道宣传的今天，我们不妨冷静下来问问自己，React 真的是一个完美的框架吗？无论是从 React 0.10 时期开始摸索，还是被 React Router 折磨的死去活来，再到 Flux、reflux 和 Redux 的革命，以及 redux-saga 及 mobx 的新兴。

这一路走来，我们到底解决了什么样的问题？React 又在其中扮演了什么样的角色？请大家开怀畅言，说出你与 React 之间的故事。

[rccoder]

React 是一个完美的框架吗？
不是！

前端开发从简单的画个 UI、实现一些效果到现在 Web APP 的时代，JavaScript 的能力也一步步的被发觉。

一路走来，MV* 的框架解决了数据到视图的自动绑定问题，让用数据去驱动视图变得更加 强制化，这是一个需要一段时间去理解的问题，也正是 React 等框架面对初学者的一个大门槛。

React 的单向数据流是 React 宣扬的一大优点，在尝过被 Kissy 乱 fire 之后对这点深深喜欢，有一种自己在掌握整个变化的王者感觉。

但也正是这种单向，让表单等的操作变得比较复杂，要写好多好多好多好多差不多一样的代码。

Redux 提供了一个放全局 state 的 Store，以及利用 connect 让 state 更好的在组件之间传递。除此之外还有让人很是喜欢的 时间旅行，配合 dev tools，简直是调试的一大神器。

Redux 的实现无疑是简陋的（或者说是 Redux 只解决了自己的分内之事），连异步的 Action 处理都有问题，社区里借助 Middlware 产生了 redux-thunk、redux-safa、redux-promise 等为之买单。

并且为了 Redux 而 Redux 的案例实在太多了，什么时候需要使用 Redux，或许我们在学习 Redux 这件事之外需要一个冷静的思考。

但 Redux 利用一堆的复杂概念强化了状态机的概念，这一点上感觉有非常大的功劳。

前端目前喜欢把很多东西原子化，这说不上是好还是不好。对于有一定实践经验的人来说，会觉得每个组件、库应该去做自己的分内之事，最后组合到一起就可以开开心心的去使用了；但对于初学者来说，找一堆堆的库组合在一起，简直，天啦！

至于什么时候使用 React，作为真正的粉丝，那一定是 All Of Them!

[jasonslyvia]

@rccoder 此处应该有表情包

[BlackGanglion]

早些时候就关注过这场“撕逼”，一开始我是满怀期待的，不知 Gianluca Guarini 对 React 提出什么新的质疑与挑战，但当我读完后，却略感失望：

老生常谈

• Redux 与 MobX，React 两大状态管理方案，各有千秋，Redux 崇尚自由，扩展性好，却也带来了繁琐，一个简单的异步请求都必须引入中间件才能解决，MobX 上手容易，Reactive 避免不必要的渲染，带来性能提升，但相对封闭，不利于业务抽象，缺少最佳实践。至于如何选择？根据具体场景与需求判断。
• JSX，这点一直饱受质疑，在 JS 里写 HTML 太“恶心”了，当然可以不写，但是你愿意么？

// JSX
return (
  <div>
    <p>Are you sure?</p>
    <DangerButton>Confirm</DangerButton>
  </div>
)

// 无JSX
return React.createElement(
  'div',
  null,
  React.createElement(
    'p',
    null,
    'Are you sure?'
  ), React.createElement(
    DangerButton,
    null,
    'Confirm'
  )
);

• React-Router 版本变更确实很频繁，但没有必要追求最新版本，2.0 版本完全能 hold 绝大多数业务场景了。

无病呻吟

• MobX 使用 ES2017 decorator，多加个 babel 插件真得那么难？
• issue 多意味着不靠谱？神逻辑！
• 担忧由于框架大量重写，React 15.5 到 React 16 会产生兼容性问题。众所周知，React 16 主要采用
  Fiber 替换现有的调度算法，将保证 API 的稳定，降低用户的迁移成本，更改一下 React 版本号，重新 npm install 一下就行。
• 项目配置搭建复杂。完全可以使用 create-react-app 官方脚手架，或在它基础上做修改，必然事倍功半。

不过文中有句话让我印象深刻：good code means also better product quality，共勉。

很赞赏 Dan 的“撕逼”态度，面对质疑，一一详细解答，非常有风度。前端框架之争始终没有停歇，Angular 大而全，被诟病过于沉重，React 小而美，被人吐槽“全家桶”。当前没有完美的框架，我想以后也很难有，但质疑和讨论可以促使框架不断向前推进，这不，React 16 render 就将支持 array，不需要再做额外一层包裹了。

[Pines-Cheng]

React和Vue都用过，从使用的角度对比一下二者吧。
vue的上手速度很快，上手速度快是建立在标准化的工作流的基础上的，无论是Starter Kit，文件组织，开发环境，构建工具，状态管理(vuex)，路由，异步，甚至是http请求，都有一套官方提供的标准化解决方案，选择困难症患者的福音啊！还有，Vue文档好漂亮啊有木有！！
React无疑是走在潮流的前沿，社区非常活跃，更新太快API变动频繁（坑爹的React Router），文档不全。有些解决方案是官方一套，社区一套（很可能还不止一套），这时候就需要自己根据实际业务场景和团队现状进行甄别，这个对于新人来说，要求就比较高了。因此，相对于Vue，使用React的新人前期可能会踩更多的坑。

但是，我还是爱React。

但是它带来的是对前端多角度的思考，正是这种思考才能推动前端社区的发展。

确实如此。

[jasonslyvia]

@BlackGanglion 事实上，Dan 第一时间回复的文字还是带有很多情绪的，后来修改了很多遣词造句，看着就谦谦有礼多了。不过总的来说，技术圈里最终能做到这样心平气和的讨论是非常值得肯定的！

[monkingxue]

用 React 的也一年多了，从0.13开始，一直都有不少问题，比如全家桶、迭代不一致、JSX 等等，但是这些真的都是问题么？我想至少部分不是。

1.全家桶：全家桶是我喜爱 React 的第二大原因，我可以用 inline state，可以用 Redux，可以用 Mobx，或者是 Rx 等等，多种选择在初期可能会带来选择困难症，但是它带来的是对前端多角度的思考，正是这种思考才能推动前端社区的发展。

2.JSX：JSX 在最开始的争议非常大，但这却是我喜欢 React 第一原因。虽然 Vue 也有单文件组件，但是由于 DSL 设计的原因，组件只是二等公民。React 中的 functional component 等则体现了 component first 的思想，让高阶组件的实现变得轻而易举，组件化更加彻底。

3.迭代不一致：原文举了个 React-router 的🌰，这里我也深有感触。最近把项目的依赖升级了一次，React-router 升级到了 v4+，结果出现了大量的报错，后来看文档才发现 V4 有一次 break update，这个问题确实需要注意一下。不过 React 的本身的 update 是非常平滑的，从0.13 到 16，整体的 API 的变动很小，最多是跟着 ES6 变动了一些，这是完全可以接受的。

当然 React 也有些问题，比如 个人感觉 ，create-react-app 没有 vue-cli 好用，所以在开发 React 项目的时候还是手写 config file。

如果学习 React 只是为了完成项目，那有文章的那样的吐槽是很正常的。但是 React 让我看到了前端更大的世界，更多的可能。从 RN 到 Electron，到 Next，从 Redux 到 Mobx，到 Rx，前端很棒，很有趣。

幸会，React。

[ybning]

React让我开始思考代码，Vue让我开始代码思考。

[cisen]

redux处理大表单和异步都不是十分友好，redux-form如果涉及深嵌套会有bug和性能问题，跟immutablejs结合得又不是很好。sagas处理异步确实好，但有些过强大，有些控制根本用不上，而且generator总感觉被别人歧视，基本都跳到async。immutablejs增加体积，而且从旧项目迁移，对接居多。但是没immutable的react中感觉是残废的

[ascoders]

@cisen 用 mobx 的 react 完全反过来，如果哪个地方没有改引用，而是返回了新对象的话，所有依赖追踪都跪了。Redux 和 Mobx 各自纯粹的使用都能有很好的开发体验。

[jin5354]

作者以 Vue 用户的身份写了入门 React 的体验，实际上 React 入坑阶段体验公认是劣于 Vue 的。Dan 的回复基本在讲“事情没有那么糟糕”。
其实我更期待专业一点的上限的对比，花了更多的时间去选型、探索各种最佳实践之后，React 最终胜出 Vue 多少？

[ascoders]

我是 avalon 中文社区的作者，http://www.avalon.org.cn/ 。在vue火起来之前，avalon早已风靡起来，社区往后翻能看到2年前的帖子。
vue 和 avalon 非常像，由于赶在模块化开发时代诞生，借助 webpack 乘上了快车，相比 avalon 在开源工具这块反应慢一些，机会稍纵即逝。
其实回头想想，当初 avalon 的 amd 开发模式真正实现了按需加载，按需编译，项目庞大后不会永远遇到性能问题，这可能是未来超大型项目的解决方案，只是目前前端的体量还没有那么大，webpack 非常适合目前前端复杂度，不过已经有一些声音出来了，包括拆包发布、按需引用，我相信未来前端复杂度再提升一个指数级的时候，大家需要重新思考模块化的最佳实践了。

扯了这么多，主要想缅怀一下当年 avalon 这个类 vue 框架给我带来的感动，现在已然全身投入 react 开发，对一个有一定经验的前端开发者，react的入门难度真的可以忽略，对于 vue 套餐解决了选择强迫症的问题，我认为有独立思考能力的开发者应当更有主见一些。

如果你在做外包项目，或者快速完成需求，使用 vue 吧，如果你对技术有更高层次的追求，就两个都用吧，反复对比他们以及周边生态的异同，这是一种享受，这种付出在日后必有回报。

[twobin]

首先要将 React 和 React 生态圈分别来看。
React 本身只是一层 view，是相对简单易学的，其本质就是组件和状态的概念，使得 React 代码更加模块化更加复用，并且通过状态（单一数据流）管理进行渲染，相对简洁的生命周期设计等，让 React 脱颖而出。因此，单从 React 本身去吐槽的话，其实可吐槽的点并不是很多，而且不能否认 React 为前端圈带来一定程度上的推进和革命，我本人还是比较推崇 React。
当然，虽然槽点不多，却并不是没有。
（1）React 源码组织结构不清晰，看过 React 源码的同学应该都感觉过蒙逼，特别是 0.14 之前，不过在 15 版本后 React 重新组织了源码结构，现在看起来清晰很多；
（2）React 开发图表&动画&复杂form表单等，实在是太麻烦了，我们团队这对这些痛点也沉淀出一些经验，如实现 Table 的思考（https://zhuanlan.zhihu.com/p/20848369），可视化图表（https://zhuanlan.zhihu.com/p/20641029），React Motion 缓动函数（https://zhuanlan.zhihu.com/p/20458251）；
（3）React 只是个 view，几乎没办法只用 React 来开发较复杂的前端项目，会把自己送入管理错综复杂的 props 和 state 的地狱中；

因此，React 生态圈来了，大家都不约而同的着眼于如何更加高效优雅的管理状态，管理数据流，于是就先后引入了 backbone、flux、reflux、redux、mobx等，这也是吐槽 React 的重灾区。
（1）React 生态圈太繁杂，新手入门门槛高，无法选型；
（2）Redux 理解和学习的成本较高，引入很多新概念 action、reducer、store；

其实，在我看来这些问题反而能够促进新手们的学习和成长，如果觉得无法选型，其实网络上已经有很多的最佳实践了，或者直接使用官方的 create-react-app 均可，当深入学习这些知识后会对自己的成长有很大的帮助，我自己就是跟随这团队，跟随着 React 生态圈慢慢成长的。
当你使用这些 React 选型时发现不爽或痛点时，就会去想办法优化或改进或提出自己的想法，这不仅可以分享到社区，同时也在不断的提升自己，我们团队经过多年的 React 实战经验，已经沉淀出一套最佳实践框架，可以期待后面团队的分享和开源。

[ascoders]

补充一下：Vue 之所以觉得入门简单，因为一开始就提供了 umd 的引入方式，这与传统 js 开发的习惯一致，以及 Avalon 多年布道的铺垫，大家可以很快接受一个不依赖于构建的 Vue。

React 因为引入了 JSX 概念，本可以以 umd 方式推广，但为了更好的 DX 所以上来就推荐大家使用 JSX，导致新手觉得门槛高。

React + Mobx 约等于一个复杂的 Vue，但这不是抛弃 React 的理由。为什么大家觉得 Vuex 比 Redux 更适合 Vue 呢？因为 Vuex 简单，而 Redux 麻烦，这已经将两个用户群划分开了。

一个简单的小公司，就是需要这种数据流简单，不需要编译，没有太多技术选型要考虑的框架，他们看中的是开发效率，可维护性并不是第一位，这点根本性的导致了这两类人永远也撮合不到一块。

而 Vue 就是解决了这个问题，帮助了那么多开发者，仅凭这点就非常值得称赞，而我们不应该从 React 维护性的角度去抨击谁好谁坏，因为站在我们的角度，大部分中小公司的开发者是不 care 的。

React 用户圈汇集了一批高端用户，他们不断探索技术选型，为开源社区迸发活力，如果大家都转向 Vue，这块摊子就死了，函数式、响应式编程的演进也会从框架的大统一而暂时终止，起码这是不利于技术进步的，也是不可能发生的。Vue 在自己的领域做好，将 React 敏捷思想借鉴过来，帮助更多适合场景的开发者，应该才是作者的目的。

React 也不要因为产生了 Mobx 这种亲 Vue 派而产生焦虑，这也是对特定业务场景的权衡，未来更多更好的数据流方案还会继续诞生，技术社区对技术的优化永无止尽。

最后打个比方：安卓手机在不断进步，体验越来越逼近苹果，作为一个逼格高的用户，果断换苹果吧。但作为安卓开发人员的你，是不是要换到 oc 流派呢？这取决于你。

[cisen]

@ascoders 你们一直在安利mobx，有什么目的吗？

[ascoders]

@cisen 数据流有各自的适用场景，在 精读民工叔叔单页数据流方案 已经讨论过了。同时我们团队对 redux 实践了很多年，老底掏的差不多了，聊 mobx也是为了换个话题给大家新鲜新鲜。。

[iwege]

@ascoders 觉得你说Avalon布道铺垫多年有点不妥。可能公司偏小，基本上没有遇到Avalon这个框架，但是同样觉得Vue很熟悉。是因为Vue在很大程度上延续了当年的Backbone基础，就算没有接触过Avalon的布道，同样也可以通过Backbone的基础轻易的转过来，更何况有angularjs在backbone之后做了铺垫。

[ascoders]

@iwege 说的没错，框架没听过没关系，只要了解其原理，并且认可 react 并不坑，我们讨论的目的就达到了。

[JeffWong16]

React被吐槽最多的，一个是JSX让入门者一脸懵逼，另一个是全家桶的问题。
JSX让初学者在心理上有种增加很多学习成本的的一种预设。尤其是对于一开始习惯html为主，js,css为辅的小白来说。老实讲，我在接触过angular,vue之后一段时间，还是一下子接受不了JSX，尤其处理JSX还需要相应的工具，这无疑一下子提高了入门的门槛。 如果说我们原始的html,js,css开始是“可靠可依赖”的话，初学React，总觉得React处于相反的方向。 当然，随着学习一段时间后，完全适应JSX写法，这个问题就不复存在。

至于全家桶的问题，个人以为是有益于前端发展的。React只专注于view层，把其他问题交给其他的库来解决，势必会导致各种解决方案百花齐放，这当然会增加学习的成本，对于选择困难症尤其纠结。但是，我们不能因为百货超市给你造成选择困难就说它不如楼下的便利店。

[lxp-git]

@JeffWong16 我刚好是相反的，我Android转rn，我很不喜欢HTML，感觉很不严谨。直到看到react

[Lizhooh]

Vue 是入手简单，但是到后面会发现很多指令，模版，规则 api 要记，越写越无所适从。
反而 React 除了几个 api 和生命周期函数之外，基本都是在写 js，越写越轻松。
其次是 JSX 所带来的灵活性远远大于模版语法，特别是在自定义一些复杂的组件的时候。当然新手是没有能力定义太过于复杂的组件的。