这是一份从 Vue 用户角度出发的 React 上手总结与对比。
构建系统
正常的前端工程化项目中，二者均采用 Webpack / NPM 作为模块打包和依赖管理工具。虽然不同脚手架所定制的 Webpack 配置有所区别，但实际上切换脚手架的难度可以说是最低的。以至于 vue-springbud 这个 Vue 脚手架可以构建配置一行不改，直接用于打包 React 项目（当然了会缺失 HMR 与样式预编译等高级功能）。
React 的生态更大而松散，体现在构建配置上，就是官方的 loader 更加专注 JSX 编译，而不像 vue-loader 这样既编译模板，又预编译样式。React 的脚手架配置需要更多地定制样式方面的配置，如 css-loader / 预处理器 / CSS Module 配置等。不过在 JS 转译 / Uglify / CommonChunk 提取 / 全局变量 / 各类 Assets loaders / 开发环境 Proxy 等通用的 Webpack 功能使用上，二者的配置方式基本是一致的。
基础 API 与功能实现
渲染数据
和 Vue 在 HTML template 内写 {{data}} 的形式不同，React 将各种数据嵌套在 JSX 表达式中，然后 render JSX 到页面上。
在渲染数组时，React 中经常利用 map 将数据片段映射成一段 JSX，然后在列表区域中直接引用 map 后的 JSX 变量来渲染数组数据。而 Vue 中则使用类似 Smarty 语法的 v-for 指令来渲染数组。同时，React 需要为数据添加 key 来保证虚拟 DOM diff 算法的效率，而 Vue 中除非渲染的列表也是组件，否则一般不需提供类似用于优化的字段。
渲染数据时另一种常见的需求是，将后端提供的数据进行一些简单的转换后再渲染至页面上。在 Vue 中提供了组件的 computed 属性来实现这一功能，而 React 中则需要在 render 函数中定义一个新变量，将转换后的值赋给这个变量后 render 它。
更新数据
Vue 和 React 组件内的 this 指向的都是组件的实例，它们都可以通过修改实例数据来更新页面。区别在于，Vue 中的 this 没有提供 state / props / setState API，不论是父组件传入的数据还是子组件的数据，都在同一个 this 的作用域下（这样业务代码会更短一些）。并且，Vue 也没有 setState 这样的 setter 方法来更新数据，直接通过全量赋值 this.xxx = yyy 数据的方式就可以更新 DOM 了。
React 和 Vue 的设计区别，在更新数据的 API 中可以得到体现。Vue 的依赖追踪 Hack 了对象的 setter，因此在执行简单的赋值操作时可以直接获知状态树中的修改位置，但 DOM 更新是异步的。因此在 Vue 中如下的代码是没有问题的：
this.hasData = true
// 数据状态同步更改，但 v-if="hasData" 的元素还没有出现
this.hasData === true需要显式 setState 的 React 则不能从基础的赋值操作中获知变更内容，而是需要通过 setState 触发一次 render，而后在 render 中更新 DOM 状态。因此这是一个容易踩的坑：
this.setState({ hasData: true })
// 有问题，必须在 setState 回调中数据状态才得到更改
this.hasData === trueReact 中 DOM 状态和数据状态都是异步更新的。Vue 中仅 DOM 状态异步更新，需要保证 DOM 状态正确更新时，所使用的 Vue.nextTick() API 实际上也类似于 React 的 setState 回调。
用户输入
与 Vue 中通过 v-model 绑定 input 等输入元素的方式不同，React 中在 JSX 里使用 Input 标签时，需要显式为表单的 JSX 提供一个 onChange 属性，在此属性中指定一个名称形如 handleInput 的函数，在函数中调用 React 的 this.setState() 来更改状态。这个 handler 函数如果不在 React 组件实例中声明，那么则需要通过在
constructor 中添加 this.handleXXX = handleXXX.bind(this) 的方式来绑定函数中的 this 到 React 组件实例。
当存在多个 input 标签时，React 可以复用同一个 handler 函数，并在其中通过类似 setState({ [name]: data }) 的语法糖来减少冗余代码（当然了这样也比 v-model 要繁琐一些）。
减少这些冗余代码的一种方式，是将基础的输入标签（或标签组）封装为 React 的组件，并通过父子组件通信的方式来处理表单中用户输入状态的更新。
事件传递
事件传递在 Vue 中是通过 v-on 和 $emit 来实现的。在父组件模板中声明子组件时，通过 v-on:childEventName="parentHandler" 语法来指定对子组件特定名称事件的 Handler method。而迁移到 React 中后，其事件传递的机制有所区别。Handler 虽然同样是在父组件中声明，但 Handler 需要以 props 的形式传入子组件，在子组件中触发事件时，以
this.props.parentHandler 形式调用父组件传入的 props 状态。
另外，在 React 中常见组件 ref 属性，可以使用这一属性来在父组件中安全地调用子组件方法。而在 Vue 中虽然可以通过 $ref 获取到子组件状态，但这并不是一个推荐的做法。
状态管理
React 本身是一个纯 View 库，没有状态管理功能。因此在大型应用中需要 Redux 这样的库来做状态管理。相应的概念在 Vue 中则是 Vuex。二者所引入的新概念学习成本是相近的，从一种迁移到另一种也并不困难。
Vuex 中，需要理解的核心概念是 mutation 和 action。这两种概念是从同步和异步的角度出发去实现的。可以简单理解为【同步状态改变就 commit 一个 mutation，异步的状态操作就 dispatch 一个 action】。在 action 中可以 commit 一个或多个 mutation，也可以触发其它 Promise / async 化的 action 来实现灵活的异步控制流组合。
这个思维模式切换到 Redux 的 reducer / action 概念中，需要澄清的则是：
- mutation 和 reducer 并没有什么关系（不过它们确实都是同步的）。
- Redux 的 action 既可以同步，也可以异步。
在最简单的情景下，Redux 中状态的更改，首先需要 dispatch 一个 action 函数。这个 action 函数会返回一个带有 type 类型的原生 JS 对象，action 触发后，Redux 根据 action 的类型去执行 reducer 中的逻辑，根据 action 返回的 type 以及相应的数据，决定如何更新全局状态。reducer 中的逻辑是同步的纯函数，并且可以通过 combileReducers 的 API 来组合多个子页面的 reducer，最后得到整个页面的状态树处理逻辑。
在需要异步的情景下，action 可以不返回原生 JS 对象，而是返回 thunk / promise 一类用于异步操作的数据类型，通过 Redux 的 applyMiddleware API 引入处理这些类型数据的能力。例如 redux-thunk 就可以使得 redux 的 action 不局限于返回一个原生 JS 对象，而是返回一个【接收 dispatch 函数】的 thunk 函数。这个函数在异步操作成功时再去调用传入的 dispatch 方法，在此提交一个真正触发 reducer 逻辑的 action。
Redux 提供的 subscribe API 使得它能够迁移到其它 View 库中作为其状态管理方案。不过在 React 中，有 react-redux 这一中间层包装了 subscribe 以及其它的 Redux API，从而可以通过包装根节点组件到 Provider 组件内，而后 connnet 组件到 Redux 的方式，简化 Redux 在 React 项目中的使用。
由于 action 异步情境下 Redux 没有提供【官方且唯一】的处理方案，因此催生了 redux-thunk / redux-promise / redux-saga / dva 这样种类繁多的辅助 Middleware。在这方面，React 系确实有更高的可定制性，不过若需要一一了解它们并做技术选型，学习成本还是比引入 Vuex 要高的。
生态与工具
前文中已经提到了在状态管理方面，React 和 Vue 的一些异同。下面对比一些其它相关的周边生态：
Devtools 方面，React 提供的 Chrome 开发插件和 Vue 的插件都对提升开发效率很有帮助。一些区别在于：
- React 插件支持将选中的组件映射到 console 的
$r变量，更方便地实现调试。 - React 插件支持对生产环境的页面进行调试。这在很多时候是很重要的。
- React 的插件不支持显示【仅组件】的视图，较难直接从 devtool 视图中选中想要调试的组件。
- 调试 Redux 时 React 插件没有官方解决方案，而 Vue 的插件集成了 Vuex 的调试功能。
组件库方面，目前 React 有相对更加丰富的组件库，也有 RN 这样的跨端解决方案。在 Vue 方面靠谱的组件库除了 Element UI 外并不是很多。
在 CSS 预处理器支持方面，vue-loader 提供了相对更完善的预处理器支持。引入 Sass / Less / Stylus 只需指定 .vue 组件中 style 标签中的 lang 属性即可。React 的 CSS Modules 支持需要引入一些自定义的 Webpack 配置，相对定制性更强，也对 boilerplate 有更高的要求。
在第三方库支持方面，二者都有不少封装第三方库的组件库（当然了还是 React 更多）。不过它们较 Angular 更为友好的地方在于，在 React 和 Vue 的组件中调用第三方库都是较为方便的，不需要通过 react-xxx 或 vue-xxx 的封装就能够快速使用常见第三方库（如图表、ajax 等）的功能。
常见反模式
在接触了中等规模（去除组件库后，整个项目在约万行级）的 React 业务代码后，可以总结出一些常见的坑：
- 需要前端【更改一下数据格式】的数据一般都会通过 map 的形式转换为 JSX。但这些代码经常直接就是放置在 render 函数中的局部变量，会降低 render 的可读性。
- 未引入 Redux 时存在着多层组件间的事件传递，较为繁琐。
- React 缺少原生的 watch 机制以订阅某种数据的变更。
- 新手编写的 JSX 页面中容易混淆模板与 UI 逻辑，破坏数据和模板的分离解耦。并且 JSX 也容易变得冗长而不易维护，典型情况如【在 JSX 中嵌套三目运算符】。
- constructor 中可能存在大量的 bind。
- 在组件方法中直接编写各种 ajax 业务逻辑。
而相应地，在同等规模的 Vue 项目中也存在一些常见的坑：
- 未引入 Vuex 时存在多层的数据传递。
- 相对更简单的语法造成新人加入时采用各种 ES5 语法（如使用 ES6 的函数而非箭头函数、不用 computed 而在 method 中用古老的 for 循环拼凑数据并手动重置 data 属性等）。
- 在组件中直接执行各种 ajax 业务逻辑。
- 类型检查相对更松。如 Vue 在 2.3 之前 HTML 模板允许标签不闭合，造成升级后一些模板编写不严谨的页面大规模报错等。
总之，React 最重要的组件化和状态管理理念和 Vue 是一致的，熟悉 Vue 的开发者迁移过来并不需要很大的学习成本，更多考虑的还是团队的已有积累和业务方向。
