【建议收藏】11+实战技巧，让你轻松从Vue过渡到React 【建议收藏】11+实战技巧，让

前言

在这个 卷神辈出的时代，只是熟练 Vue的胖头鱼，已经被毒打过多次了，面试中曾被质疑：“你居然不会React？”我无语凝噎，不知说啥是好。

这篇文章尝试将Vue中一些常见的功能在React中实现一遍，如果你恰巧是Vue转React，或者React转Vue，期待对你有些帮助。
如果你是一名熟悉React和Vue的同学跪求轻喷（手动求生）

每个功能，都有对应的Vue和React版本实现，也有对应的截图或者录屏
Vue仓库
React仓库
1. v-if

我们先从最常见的显示隐藏开始，Vue中处理一个元素的显示隐藏一般会用 v-if或者 v-show指令，只不过 v-if是“真正”的条件渲染，切换过程中条件块内的事件监听器和子组件会适当地被销毁和重建。而 v-show就简单了，只是css样式上的控制。

v-if源代码点这里
Vue

React
vif源代码点这里

import React, { useState } from "react"export default function Vif (){ const [ isShow, setIsShow ] = useState(true) const onToggleShow = () => { setIsShow(!isShow) }return ( {/* 也可以用三目运算符 */} {/* { isShow ? 前端胖头鱼显示出来啦 : null } */} { isShow && 前端胖头鱼显示出来啦 }) }

预览

文章图片

2. v-show

同上，这次我们通过 v-show来实现显示隐藏的功能，同时观察DOM的样式变化

注意: 这里为啥显示的时候不设置为block是因为有些元素本身不是块级元素，如果强行设置为block有可能导致错误的样式。
Vue
v-show源代码点击这里

React
vShow源代码点这里

import React, { useState } from "react"export default function VShow (){ const [ isShow, setIsShow ] = useState(true) const onToggleShow = () => { setIsShow(!isShow) }return ( { 前端胖头鱼显示出来啦 }) }

预览

文章图片

3. v-for

一般情况下，渲染一个列表在 Vue中使用 v-for指令，v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。当然了，每个元素都需要设置唯一的 key

Vue
v-for源代码点这里

React

在 React没有 v-for指令，我们可以采用 map遍历的方式实现类似功能

vFor源代码点这里

import React, { useState } from "react"export default function VFor (){ const [ list, setList ] = useState([ { id: 1, name: '前端', }, { id: 2, name: '后端', }, { id: 3, name: 'android', }, { id: 4, name: 'ios', }, ])return ({ list.map((item) => { return { item.name } }) }) }

预览

文章图片

4. computed

当某个变量需要依赖其他变量求值时，使用计算属性会非常方便，并且 Vue的计算属性是基于它们的响应式依赖进行缓存的，依赖值未发生变化，不会重新计算，达到缓存的作用。

我们来看一个简单的加法例子：num3由num1和num2相加所得，同时按钮每点一次num1加10，num3也会跟着不断加10
Vue
computed源代码点这里

React

React没有计算属性，但是我们可以通过 useMemo这个hook来实现，和 Vue computed不太一样的地方在于，我们必须手动维护依赖

computed源代码点这里

import React, { useMemo, useState } from "react"export default function Computed (){ const [ num1, setNum1 ] = useState(10) const [ num2, setNum2 ] = useState(10)const num3 = useMemo((a, b) => { return num1 + num2 }, [ num1, num2 ])const onAdd = () => { setNum1(num1 + 10) }return ( 计算结果：{ num3 }) }

预览

文章图片

5. watch

有时候我们需要监听数据变化然后执行异步行为或者开销较大的操作时，在Vue中可以使用 watch来实现

我们来模拟一个这样的场景并且通过watch来实现：选择boy或者girl，选中后发送请求，显示请求结果。（这里通过setTimeout模拟异步请求过程）
Vue
watch源代码点这里

React

React中要实现监听某些数据的变化执行响应的动作，可以使用 useEffect

watch源代码点这里

import React, { useState, useMemo, useEffect } from "react" import './watch.css'export default function Watch() { const [fetching, setFetching] = useState(false) const [selects, setSelects] = useState([ 'boy', 'girl' ]) const [selectValue, setSelectValue] = useState('')const result = useMemo(() => { return fetching ? '请求中' : `请求结果：选中${selectValue || '~'}` }, [ fetching ])const onSelect = (value) => { setSelectValue(value) } const fetch = () => { if (!fetching) { setFetching(true)setTimeout(() => { setFetching(false) }, 1000) } }useEffect(() => { fetch() }, [ selectValue ])return ({ selects.map((item, i) => { return }) }{ result }) }

预览

文章图片

6. style

有时候难免要给元素动态添加样式 style， Vue和 React都给我们提供了方便的使用方式。

在使用上基本大同小异：
相同点：
CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
不同点：

Vue可以通过数组语法绑定多个样式对象，React主要是单个对象的形式（这点Vue也可以）
React 会自动添加 ”px”(这点Vue不会自动处理) 后缀到内联样式为数字的属性，其他单位手动需要手动指定
React样式不会自动补齐前缀。如需支持旧版浏览器，需手动补充对应的样式属性。Vue中当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

Vue
style源代码点这里

React
style源代码点这里

import React from "react"export default function Style (){ const style = { width: '100%', height: '500px', } const style2 = { backgroundImage: 'linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)', borderRadius: '10px', }return () }

预览

文章图片

7. class

如何动态地给元素添加class？ Vue中我自己比较喜欢用数组的语法（当然还有对象的写法），React中也可以使用一些第三方包如 classnames起到更加便捷添加class的效果。

下面我们看下不借助任何库，如何实现按钮选中的效果
Vue
class源代码点这里

.button{ display: block; width: 100px; height: 30px; line-height: 30px; border-radius: 6px; margin: 0 auto; padding: 0; border: none; text-align: center; background-color: #efefef; }.active{ background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); color: #fff }

React
class源代码点这里

import React, { useMemo, useState } from "react"import './class.css' // 此处样式与上面是一样的export default function Class (){ const [ isActive, setIsActive ] = useState(false) const buttonText = useMemo(() => { return isActive ? '已选中' : '未选中' }, [ isActive ]) const buttonClass = useMemo(() => { // 和Vue中不太一样的是我们需要手动join一下，变成'button active'形式 return [ 'button', isActive ? 'active' : '' ].join(' ') }, [ isActive ])const onClickActive = () => { setIsActive(!isActive) }return ( { buttonText } ) }

预览

文章图片

8.provide/inject

Vue和React中对于全局状态的管理都有各自好的解决方案，比如Vue中的 Vuex，React中的 redux和 Mobx，当然小型项目中引入这些有点大材小用了,有没有其他解决方案呢？

Vue中可以使用provide/inject
React中则可以使用Context

假设全局有有一个用户信息userInfo的变量，需要在各个组件中都能便捷的访问到，在Vue和React中该如何实现呢?

Vue

Vue中借用 provide/inject可以将顶层状态，传递至任意子节点，假设我们再app.vue中声明了一个 userInfo数据

provide源代码点这里
app.vue

provide.vue

React

React中要实现类似的功能，可以借助 Context，将全局状态共享给任意子节点

provide源代码点这里
context/index.js

import { createContext } from "react"; export const UserInfoContext = createContext({ userInfo: { name: '' } })

app.js

import { UserInfoContext } from './context/index'function App() { return ( // 注意这里我是React栗子 } /> } /> } /> } /> } /> } /> } /> ); }

provide.js

import React, { useContext } from "react" import { UserInfoContext } from '../context/index'export default function Provide() { // 通过userContext，使用定义好的UserInfoContext const { userInfo } = useContext(UserInfoContext)return ( { userInfo.name } ) }

预览

文章图片

9. slot(默认插槽)

插槽是 Vue中非常实用的功能，我把他理解成”坑位“，等待着你从外面把他填上，而这个”坑位“可以分成 默认坑位、 具名坑位、 作用域坑位，咱们通过一个实战例子来看看 React中如何实现同等的功能。

假设我们要实现一个简单的dialog组件,基本功能是标题可以传字符串，内容部分可以完全自定义，应该怎么实现呢？

文章图片

Vue
slot源代码点这里
dialog

slot

React

前面通过 props.children属性可以读取组件标签内的内容算是和 Vue默认插槽实现了一样的功能，但是具名插槽如何实现呢？ React好玩的其中一个点，我觉得是属性啥玩意都可以传、 字符串、 数字、 函数、 连DOM也可以传。所以实现具名插槽也很简单，直接当属性传递就可以

nameSlot源代码点这里
Dialog改造

import React, { useState, useEffect } from "react"import './dialog.css'export default function Dialog(props) { // 原谅我用visible -1这种傻叉的方式先实现了, 重点不是在这里 const { title, main, visible = -1 } = props const [visibleInner, setVisibleInner] = useState(false)const onHide = () => { setVisibleInner(false) }useEffect(() => { setVisibleInner(visible > 0) }, [ visible ])return ({/* { title ? { title } : null } */} {/* 注意这里，直接渲染title就可以了 */} { title }{/* 注意这里，通过children实现默认插槽功能 */} {/* {children} */} {/* 这一这里不是children了，是main */} { main }取消确定