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

[Pines-Cheng]

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

但是，我还是爱React。

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

确实如此。

[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 实战经验，已经沉淀出一套最佳实践框架，可以期待后面团队的分享和开源。

[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!

[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，不需要再做额外一层包裹了。

[ybning]

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

[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。

[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 流派呢？这取决于你。

[jin5354]

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

[ascoders]

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

[ascoders]

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

[jasonslyvia]

@rccoder 此处应该有表情包

[jasonslyvia]

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

[cisen]

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

[ascoders]

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

[cisen]

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

[iwege]

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

[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 所带来的灵活性远远大于模版语法，特别是在自定义一些复杂的组件的时候。当然新手是没有能力定义太过于复杂的组件的。