Vue 转 React 指南，看这篇文章就够了
为什么要从 Vue 转到 React，这篇文章为什么我们放弃了 Vue？不过对于大多数人来说，用 Vue 还是 React 不是自己说了算，多学一门技术不是坏处，而且 React 被大厂大量使用，要进入大厂也是必备的技能，笔者原先使用 Vue，由于 React 相关概念更加简单，只要会 js 就行，转到 React 只花了几天时间（已经回不去了～）。本文写给想从 Vue 转到 React 的同学，假设读者有一定的 Vue 基础。
JSX
先介绍 React 唯一的一个语法糖：JSX。
<div class='box' id='content'>
<div class='title'>Hello</div>
<button>Click</button>
</div>
上面的 DOM 结构可以看出，要每个标签只有 3 个信息：标签名、属性、子元素，所以上面等同于下面的 JSON 结构：
{
tag: 'div',
attrs: { className: 'box', id: 'content'},
children: [
{
tag: 'div',
arrts: { className: 'title' },
children: ['Hello']
},
{
tag: 'button',
attrs: null,
children: ['Click']
}
]
}
当你写下这个 React 组件是：
import React from 'react';
function MyComponent(props) {
return <div>{props.hello}</div>
}
最终会被自动工具翻译成：
import React from 'react';
function MyComponent(props) {
return React.createElement('div', null, props.hello);
}
理解 JSX 语法并不困难，简单记住一句话，遇到 {} 符号内部解析为 JS 代码，遇到成对的 <> 符号内部解析为 html 代码。React 就是通过这个小小语法糖，实现在 JS 里面写 HTML，可能有小伙伴会说 HTML 与 JS 分离不是更好吗？责职分明，混合只会更乱。但当你体验到代码自动提示，自动检查，以及调试时精确定位到一行代码的好处时，就清楚 React 和 Vue 的差距了。
语法糖转换
习惯 Vue 的同学都知道很多语法糖，比如 v-if、v-for、v-bind、v-on 等，相比 Vue，React 只有一个语法糖，那就是 jsx/tsx。v-if 这些功能在 React 上都是通过原生 JAVAscript 实现的，慢慢你会发现，其实你学的不是 React，而是 Javascipt，React 赋予你通过 js 完整控制组件的能力，这部分明显比 Vue 的语法糖更加灵活，糖太多容易引来虫子（Bug）。
v-if 条件渲染
vue 中写法是这样：
<template>
<div>
<h1 v-if="awesome1">Vue is awesome!</h1>
<h1 v-else>else</h1>
<h1 v-if="awesome2">Oh no</h1>
</div>
</template>
<script>
module.exports = {
data: function() {
return {
awesome1: true,
awesome2: false,
}
}
}
</script>
在 React 函数组件中只需这样：
import React, { useState } from 'react';
function Index() {
const [awesome1, setAwesome1] = useState(true);
const [awesome2, setAwesome2] = useState(false);
return (
<div>
{awesome1 ? <h1>React is awesome!</h1> : <h1>Oh no</h1>}
{awesome2 && <h1>React is awesome!</h1>}
</div>
);
}
export default Index;
只需使用 js 三目运算符语法即可完成条件渲染的功能。或者使用 && 逻辑，记住下面一句话就能过理解了：
遇到 {} 符号内部解析为 JS 代码，遇到成对的 <> 符号内部解析为 HTML 代码
v-for 列表渲染
Vue 中写法：
<template>
<ul id="array-rendering">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</template>
<script>
module.exports = {
data() {
return {
items: [{ message: 'Foo' }, { message: 'Bar' }]
}
}
}
</script>
React 写法：
import React, { useState } from 'react';
function Index() {
const [items, setItems] = useState([{ message: 'Foo' }, { message: 'Bar' }]);
return (
<ul id="array-rendering">
{items.map((item, id) => <li key={id}>{item.message}</li>)}
</ul>
);
}
export default Index;
React 通过 js 的数组语法 map，将数据对象映射为 DOM 对象。只需学会 js，无需记住各种指令，如果要做列表过滤，直接使用 items.filter(...).map(...) 链式调用即可，语法上更加灵活，如果为了提高渲染性能，使用 useMemo 进行优化即可，类似 Vue 的 computed。
v-model
Vue 中 v-model 是一个数据绑定语法糖，本质上还是单向数据流，下面的子组件通过 update:title 同步 title 参数。
App.component('my-component', {
props: {
title: String
},
emits: ['update:title'],
template: `
<input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)">
`
})
React 写法较为简单，不需要像 Vue 一样填鸭代码，记住各种规则，所有数据和事件通过 props 传递就行了：
import React from 'react';
interface Props {
title: string;
onUpdateTitle: (title: string) => void;
}
function MyComponent(props: Props) {
return <input
type='text'
value={props.title}
onInput={e => props.onUpdateTitle(e.target.value)}
/>
}
更加容易整合 typescript 实现类型推断，需要的逻辑都由 JS 完成，无需记住各种指令、使用方法，参数命名规则。
事件处理
Vue 中写法
<template>
<div id="inline-handler">
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>
</div>
</template>
<script>
module.exports = {
methods: {
say(message) {
alert(message)
}
}
}
</script>
React 写法：
import React, { useState } from 'react';
function Index() {
const onClick = (message) => () => alert(message);
return (
<div id="inline-handler">
<button onClick={onClick('hi')}>Say hi</button>
<button onClick={onClick('what')}>Say what</button>
</div>
);
}
export default Index;
这里用了函数柯里化，一般事件处理这样就行了：
import React from 'react';
function Index() {
const onClick = () => alert('hi');
return (
<div id="inline-handler">
<button onClick={onClick}>Say hi</button>
</div>
);
}
export default Index;
如果需要优化缓存事件处理函数，使用 useCallback 即可。可以看到 Vue 中的事件触发 this.$emit('click') 或者父组件中的代码 v-on="say('hi')" 都使用了字符串的写法，这样非常不利于类型推断，不利于代码重构。React 的函数写法或者 class 写法都直接使用 js 语法，没有额外的东西，相比 Vue 更容易通过 IDE 进行重构优化。React 中无论方法还是变量，都是采用驼峰命名法，也可以自由定制，Vue 中必须混合小写中隔线、驼峰、字符串组合，不利于统一代码规范。
插槽
Vue 中写法：
<template>
<button class="btn-primary">
<slot></slot>
</button>
</template>
<script>
module.exports = {
methods: {}
}
</script>
React 写法：
import React from 'react';
function Index() {
return (
<button classNames="btn-primary">
{props.children}
</button>
);
}
export default Index;
React 的插槽写法没有 Vue 那么复杂，也没有“备用内容”、“具名插槽”、“渲染作用域”、“作用域插槽”、“动态插槽名”，这些概念和特殊情况的处理，一切通过 JS 逻辑搞定就行了，怎么方便怎么来，比如备用内容的实现：
import React from 'react';
function Index() {
// 默认情况下使用 Summit 作为按钮文字
return (
<button classNames="btn-primary">
{props.children === null ? 'Summit' : props.children}
</button>
);
}
export default Index;
样式 & 属性
这部分 Vue 的写法实在是太麻烦了。。。每次我都要查查文档具体怎么用，对象语法、数组语法、内联样式，要记住的有点多，Vue 动态修改样式的写法：
<template>
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
</template>
<script>
module.exports = {
data() {
return {
isActive: true,
hasError: false
}
}
}
</script>
React 写法：
import React, { useState } from 'react';
function Index() {
const [isActive, setIsActive] = useState(true);
const [hasError, setHasError] = useState(false);
return (
<div
classNames={`static ${isActive ? 'active':'} ${hasError? 'text-danger':''}`}
></div>
);
}
export default Index;
React 里面直接采用 JS 的模板字符串语法，如果样式太多，可以使用 classnames 这个 npm 包，优雅传递各种状态，使用非常简单：
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
状态管理
Vue 的状态管理官方推荐使用 Vuex 也可采用 Redux。
引用官方文档一段话：
如果你是来自 React 的开发者，可能会对 Vuex 和 Redux 间的差异表示关注，Redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层，所以它能够轻松地通过一些简单绑定和 Vue 一起使用。Vuex 区别在于它是一个专门为 Vue 应用所设计。这使得它能够更好地和 Vue 进行整合，同时提供简洁的 API 和更好的开发体验。
这段话其实暴露了 Vuex 的一个缺陷，它和 Vue 强绑定，无法独立存在，这种一些项目升级和迁移时会有很大的麻烦。Redux 作为 React 的状态管理方案之一其实不依赖于 React。
React 周边的状态管理方案特别多，如 Redux、Mobx、Recoil 等，各有各的亮点，其中使用最多的应该是 Redux。
Redux 周边生态也很丰富，可以更加下图选择不同的方案：
- redux-thunk
- redux-promise
- redux-saga
- redux-observable
由于这部分代码较多，不详细写，不过如果你熟悉 Vuex 的概念，转到 Redux 应该不难。Vuex + axIOS 的做法和 Redux + redux-thunk 的写法类似，不过现在 redux-saga 的方案被更多复杂项目采用，其中很重要的原因是 saga 的概念编写异步代码非常优雅，且能够很好地解决静态问题（如果采用 Vuex + axios 的写法会异常复杂、冗长），高度定制。
如果你要迁移 Vue 到 React，建议采用的方案是 Redux + saga，saga 的概念不是那么容易懂，学习需要一些时间，但当你学会的时候就会明白这种写法比直接用 Promise 好太多了。
生命周期
Vue 的生命周期这里不再重复，查询官方文档即可，React 生命周期如图：
图片可以在这里找到。一般情况下 class 写法主要用到 componentDidMount 和 componentWillUnmount 钩子，React 的函数写法下可以用 useEffect 的执行函数和清理函数去模拟 mount 和 unmount 过程：
import React, { useRef, useEffect } from 'react';
function Index() {
const ref = useRef(null);
useEffect(() => {
console.log('mounted');
return () => {
console.log('will unmount');
};
}, []);
return <input ref={ref}/>
}
export default Index;
useEffect 的原理这里不多说，可以看看相关文章：轻松学会 React 钩子：以 useEffect() 为例。其实从 React hook 中可以看到，React 在慢慢淡化生命周期的概念，减少自己对用户代码的侵入，将更多控制权交给用户。
原生 DOM 操作
这部分 Vue 和 React 都是采用 ref 写法，Vue：
<template>
<input ref="input" />
</template>
<script>
module.exports = {
methods: {
focusInput() {
this.$refs.input.focus()
}
},
mounted() {
this.focusInput()
}
}
</script>
React 写法：
import React, { useRef, useEffect } from 'react';
function Index() {
const ref = useRef(null);
useEffect(() => {
ref.current?.focuse();
}, []);
return <input ref={ref}/>
}
export default Index;
useEffect 是 React hook，在依赖数组为空的时候效果类似 componentDidMount 的生命周期函数（类似 Vue 的 mounted）。此外 useRef 不止用在这里，也可以挂载一些其他的东东，实现一些复杂操作，比如 previousValue 和对象属性等。
