为什么要从 Vue 转到 React,这篇文章为什么我们放弃了 Vue?不过对于大多数人来说,用 Vue 还是 React 不是自己说了算,多学一门技术不是坏处,而且 React 被大厂大量使用,要进入大厂也是必备的技能,笔者原先使用 Vue,由于 React 相关概念更加简单,只要会 js 就行,转到 React 只花了几天时间(已经回不去了~)。本文写给想从 Vue 转到 React 的同学,假设读者有一定的 Vue 基础。
先介绍 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)。
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 代码
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。
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 周边生态也很丰富,可以更加下图选择不同的方案:
由于这部分代码较多,不详细写,不过如果你熟悉 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 在慢慢淡化生命周期的概念,减少自己对用户代码的侵入,将更多控制权交给用户。
这部分 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 和对象属性等。