11+实战技巧，让你轻松从Vue过渡到React

在这个卷神辈出的时代，只是熟练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 && 
前端胖头鱼 显示出来啦
      }
    

  ) }

预览

v-if.gif

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 }

        })       }     

  ) }

预览

v-for.png

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 (
    
      +10
      
计算结果：{ num3 }