## 前言 > 在这个`卷神`辈出的时代，只是熟练`Vue`的胖头鱼，已经被毒打过多次了，面试中曾被质疑：“你居然不会React？”我无语凝噎，不知说啥是好。 > 这篇文章尝试将`Vue`中一些常见的功能在`React`中实现一遍，如果你恰巧是`Vue`转`React`，或者`React`转`Vue`，期待对你有些帮助。 > 如果你是一名熟悉`React`和`Vue`的同学跪求轻喷（手动求生） `每个功能，都有对应的Vue和React版本实现，也有对应的截图或者录屏` [Vue仓库](https://github.com/qianlongo/vue-demos) [React仓库](https://github.com/qianlongo/react-vue-skills) ## 1. v-if > 我们先从最常见的显示隐藏开始，Vue中处理一个元素的显示隐藏一般会用`v-if`或者`v-show`指令，只不过`v-if`是“真正”的条件渲染，切换过程中条件块内的事件监听器和子组件会适当地被销毁和重建。而`v-show`就简单了，只是css样式上的控制。 [v-if源代码点这里](https://github.com/qianlongo/vue-demos/blob/master/src/views/directives/v-if.vue) ### Vue ```javascript ``` ### React [vif源代码点这里](https://github.com/qianlongo/react-vue-skills/blob/main/src/skills/vif.js) ```javascript import React, { useState } from "react" export default function Vif (){ const [ isShow, setIsShow ] = useState(true) const onToggleShow = () => { setIsShow(!isShow) } return (

{/* 也可以用三目运算符 */} {/* { isShow ?

前端胖头鱼显示出来啦

: null } */} { isShow &&

前端胖头鱼显示出来啦

}

) } ``` ### 预览 ![v-if.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf5ec244467b41c9a60127691e594be9~tplv-k3u1fbpfcp-watermark.image?) ## 2. v-show > 同上，这次我们通过`v-show`来实现显示隐藏的功能，同时观察DOM的样式变化 **注意:** 这里为啥显示的时候不设置为`block`是因为有些元素本身不是块级元素，如果强行设置为`block`有可能导致错误的样式。 ### Vue [v-show源代码点击这里](https://github.com/qianlongo/vue-demos/blob/master/src/views/directives/v-show.vue) ``` javascript ``` ### React [vShow源代码点这里](https://github.com/qianlongo/react-vue-skills/blob/main/src/skills/vShow.js) ```javascript import React, { useState } from "react" export default function VShow (){ const [ isShow, setIsShow ] = useState(true) const onToggleShow = () => { setIsShow(!isShow) } return (

{

前端胖头鱼显示出来啦

}

) } ``` ### 预览 ![v-show.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e26b3dc656e740efa5bfe7e5ff529aeb~tplv-k3u1fbpfcp-watermark.image?) ## 3. v-for > 一般情况下，渲染一个列表在`Vue`中使用`v-for`指令，v-for 指令需要使用 `item in items` 形式的特殊语法，其中 `items` 是源数据数组，而 `item` 则是被迭代的数组元素的别名。当然了，每个元素都需要设置唯一的`key` ### Vue [v-for源代码点这里](https://github.com/qianlongo/vue-demos/blob/master/src/views/directives/v-for.vue) ```javascript ``` ### React > 在`React`没有`v-for`指令，我们可以采用`map`遍历的方式实现类似功能 [vFor源代码点这里](https://github.com/qianlongo/react-vue-skills/blob/main/src/skills/vFor.js) ```javascript 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 }

}) }

) } ``` ### 预览 ![v-for.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14467da7987240dbb9387e05f55b091e~tplv-k3u1fbpfcp-watermark.image?) ## 4. computed > 当某个变量需要依赖其他变量求值时，使用计算属性会非常方便，并且`Vue`的计算属性是基于它们的响应式依赖进行缓存的，依赖值未发生变化，不会重新计算，达到缓存的作用。我们来看一个简单的加法例子：`num3`由`num1`和`num2`相加所得，同时按钮每点一次`num1`加10，`num3`也会跟着不断加10 ### Vue [computed源代码点这里](https://github.com/qianlongo/vue-demos/blob/master/src/views/base/computed.vue) ```javascript ``` ### React > `React`没有计算属性，但是我们可以通过`useMemo`这个hook来实现，和`Vue` computed不太一样的地方在于，我们必须**手动维护依赖** [computed源代码点这里](https://github.com/qianlongo/react-vue-skills/blob/main/src/skills/computed.js) ```javascript 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 }

) } ``` ### 预览 ![computed.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/993139b0f6914337a3af0f776a552f1f~tplv-k3u1fbpfcp-watermark.image?) ## 5. watch > 有时候我们需要监听数据变化然后执行异步行为或者开销较大的操作时，在Vue中可以使用`watch`来实现我们来模拟一个这样的场景并且通过`watch`来实现：选择`boy`或者`girl`，选中后发送请求，显示请求结果。（这里通过setTimeout模拟异步请求过程） ### Vue [watch源代码点这里](https://github.com/qianlongo/vue-demos/blob/master/src/views/base/watch.vue) ``` javascript ``` ### React > `React`中要实现监听某些数据的变化执行响应的动作，可以使用`useEffect` [watch源代码点这里](https://github.com/qianlongo/react-vue-skills/blob/main/src/skills/watch.js) ```javascript 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 }

) } ``` ### 预览 ![watch.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7217dec970804f62be4ed0c28255aa37~tplv-k3u1fbpfcp-watermark.image?) ## 6. style > 有时候难免要给元素动态添加样式`style`，`Vue`和`React`都给我们提供了方便的使用方式。在使用上基本大同小异： **相同点：** CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名 **不同点：** 1. Vue可以通过数组语法绑定多个样式对象，React主要是单个对象的形式（这点Vue也可以） 2. React 会自动添加 ”px”(**这点Vue不会自动处理**) 后缀到内联样式为数字的属性，其他单位手动需要手动指定 3. React样式不会自动补齐前缀。如需支持旧版浏览器，需手动补充对应的样式属性。Vue中当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。 ### Vue [style源代码点这里](https://github.com/qianlongo/vue-demos/blob/master/src/views/base/style.vue) ```javascript ``` ### React [style源代码点这里](https://github.com/qianlongo/react-vue-skills/blob/main/src/skills/style.js) ```javascript 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 (

) } ``` ### 预览 ![style.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e098c6e4c8114068bd8d7e309ff9cb08~tplv-k3u1fbpfcp-watermark.image?) ## 7. class > 如何动态地给元素添加class？ Vue中我自己比较喜欢用数组的语法（当然还有对象的写法），React中也可以使用一些第三方包如[classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs)起到更加便捷添加class的效果。下面我们看下不借助任何库，如何实现按钮选中的效果 ### Vue [class源代码点这里](https://github.com/qianlongo/vue-demos/blob/master/src/views/base/class.vue) ```javascript ``` ### React [class源代码点这里](https://github.com/qianlongo/react-vue-skills/blob/main/src/skills/class.js) ```javascript 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 }

) } ``` ### 预览 ![class.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4493ca12150b4c4c969f44deb3e42997~tplv-k3u1fbpfcp-watermark.image?) ## 8.provide/inject > Vue和React中对于全局状态的管理都有各自好的解决方案，比如Vue中的`Vuex`，React中的`redux`和`Mobx`，当然小型项目中引入这些有点**大材小用**了,有没有其他解决方案呢？ Vue中可以使用[provide/inject](https://cn.vuejs.org/v2/api/#provide-inject) React中则可以使用[Context](https://zh-hans.reactjs.org/docs/context.html#when-to-use-context) `假设全局有有一个用户信息userInfo的变量，需要在各个组件中都能便捷的访问到，在Vue和React中该如何实现呢?` ### Vue > `Vue`中借用`provide/inject`可以将顶层状态，传递至任意子节点，假设我们再app.vue中声明了一个`userInfo`数据 [provide源代码点这里](https://github.com/qianlongo/vue-demos/blob/master/src/views/base/provide.vue) **app.vue** ```javascript ``` **provide.vue** ```javascript ``` ### React > `React`中要实现类似的功能，可以借助[Context](https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext)，将全局状态共享给任意子节点 [provide源代码点这里](https://github.com/qianlongo/react-vue-skills/blob/main/src/skills/provide.js) **context/index.js** ```javascript import { createContext } from "react"; export const UserInfoContext = createContext({ userInfo: { name: '' } }) ``` **app.js** ```javascript import { UserInfoContext } from './context/index' function App() { return ( // 注意这里

我是React栗子

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

{ userInfo.name }

) } ``` ### 预览 ![4127923929-provide.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dbcc9848abfd478aac3ce2088743ed73~tplv-k3u1fbpfcp-watermark.image?) ## 9. slot(默认插槽) > 插槽是`Vue`中非常实用的功能，我把他理解成”坑位“，等待着你从外面把他填上，而这个”坑位“可以分成`默认坑位`、`具名坑位`、`作用域坑位`，咱们通过一个实战例子来看看`React`中如何实现同等的功能。假设我们要实现一个简单的`dialog`组件,基本功能是标题可以传字符串，内容部分可以完全自定义，应该怎么实现呢？ ![默认插槽.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/23fe672eae3d49bcbc4b091b4485e781~tplv-k3u1fbpfcp-watermark.image?) ### Vue [slot源代码点这里](https://github.com/qianlongo/vue-demos/blob/master/src/views/base/slot.vue) **dialog** ```javascript ``` **slot** ```javascript ``` ### React > 前面通过`props.children`属性可以读取组件标签内的内容算是和`Vue`默认插槽实现了一样的功能，但是具名插槽如何实现呢？`React`好玩的其中一个点，我觉得是属性啥玩意都可以传、`字符串`、`数字`、`函数`、`连DOM`也可以传。所以实现具名插槽也很简单，直接当属性传递就可以 [nameSlot源代码点这里](https://github.com/qianlongo/react-vue-skills/blob/main/src/skills/nameSlot.js) **Dialog改造** ```javascript 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 }

取消

确定

) } ``` **nameSlot** ```javascript import React, { useState } from "react" import Dialog from './components/dialog' import './slot.css' export default function NameSlot() { const [visible, setVisible] = useState(-1) const onToggleVisible = () => { setVisible(Math.random()) } return (

} // 注意这里，直接传递的DOM main={

前端胖头鱼

} > ) } ``` ### 预览 > 可以看到具名插槽，`React`直接用属性反而更简洁一些 ![具名插槽.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b001a9542704d52a9bdbede3e93ec30~tplv-k3u1fbpfcp-watermark.image?) ## 11. scope slot(作用域插槽) > 有了`默认插槽`、`具名插槽`最后当然少不了作用域插槽啦！有时让插槽内容能够访问子组件中才有的数据是很有用的，这也是作用域插槽的意义所在假设：`Dialog`组件内部有一个`userInfo: { name: '前端胖头鱼' }`数据对象，希望使用`Dialog`组件的外部插槽也能访问到，该怎么做呢？ ### Vue [scopeSlot源代码点这里](https://github.com/qianlongo/vue-demos/blob/master/src/views/base/scopeSlot.vue) **Dialog** ```javascript ``` **scopeSlot** ```javascript ``` ### React > 还是那句话，React中万物皆可传，类似实现具名插槽中我们直接传递DOM，同样我们也可以传递函数，将`Dialog`组件内部的`userInfo`数据通过函数传参的方式给到外部使用 [scopeSlot源代码点这里](https://github.com/qianlongo/react-vue-skills/blob/main/src/skills/scopeSlot.js) **Dialog改造** ```javascript 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 [ userInfo ] = useState({ name: '前端胖头鱼' }) const onHide = () => { setVisibleInner(false) } useEffect(() => { setVisibleInner(visible > 0) }, [ visible ]) return (

{/* 作用域插槽，当函数使用，并且把数据传递进去 */} { title(userInfo) }

{/* 作用域插槽，当函数使用，并且把数据传递进去 */} { main(userInfo) }

取消

确定

) } ``` **scopeSlot** ```javascript import React, { useState } from "react" import Dialog from './components/dialog' import './slot.css' export default function ScopeSlot() { const [visible, setVisible] = useState(-1) const onToggleVisible = () => { setVisible(Math.random()) } return (

) } ``` ### 预览 ![作用域插槽.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/faee31762b8f401ea92bef24b2cbef4a~tplv-k3u1fbpfcp-watermark.image?)