小編日常工作中使用的是Vue,對(duì)于React只是做過簡(jiǎn)單的了解，并沒有做過深入學(xué)習(xí)。趁著這個(gè)雙節(jié)假期，小編決定好好學(xué)一學(xué)React,今天這篇文章就是小編在學(xué)習(xí)React之后，將React與Vue的用法做的一個(gè)對(duì)比，通過這個(gè)對(duì)比，方便使用Vue的小伙伴可以快速將Vue中的寫法轉(zhuǎn)換為React的寫法。

插槽，在React中沒找到？？

在使用Vue的時(shí)候，插槽是一個(gè)特別常用的功能，通過定義插槽，可以在調(diào)用組件的時(shí)候?qū)⑼獠康膬?nèi)容傳入到組件內(nèi)部，顯示到指定的位置。在Vue中，插槽分為默認(rèn)插槽，具名插槽和作用域插槽。其實(shí)不僅僅Vue,在React中其實(shí)也有類似插槽的功能，只是名字不叫做插槽，下面我將通過舉例來說明。

默認(rèn)插槽

現(xiàn)在項(xiàng)目需要開發(fā)一個(gè)卡片組件，如下圖所示，卡片可以指定標(biāo)題，然后卡片內(nèi)容可以用戶自定義，這時(shí)候?qū)τ诳ㄆ瑑?nèi)容來說，就可以使用插槽來實(shí)現(xiàn)，下面我們就分別使用Vue和React來實(shí)現(xiàn)這個(gè)功能

Vue實(shí)現(xiàn)

1. 首先實(shí)現(xiàn)一個(gè)card組件，如下代碼所示

   
   
   
   復(fù)制代碼

   可以看到上面我們使用了，這個(gè)就是組件的默認(rèn)插槽，在使用組件的時(shí)候，傳入的內(nèi)容將會(huì)被放到所在位置

2. 在外部使用定義的card組件

   
   
   
   復(fù)制代碼

   如上代碼，就可以使用組件的默認(rèn)插槽將外部的內(nèi)容應(yīng)用到組件里面指定的位置了。

React實(shí)現(xiàn)

雖然在React里面沒有插槽的概念，但是React里面也可以通過props.children拿到組件標(biāo)簽內(nèi)部的子元素的，就像上面代碼標(biāo)簽內(nèi)的子元素，通過這個(gè)我們也可以實(shí)現(xiàn)類似Vue默認(rèn)插槽的功能，一起看看代碼。

1. 使用React定義Card組件

   import React from 'react'
   
   export interface CardProps {
     title: string,
     children: React.ReactNode
   }
   
   export default function(props: CardProps) {
   
     return (
       
   
         
   
           {props.title}
         
         
   
           {/**每個(gè)組件都可以獲取到 props.children。它包含組件的開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容 */}
           {props.children}
         
       
     );
   }
   復(fù)制代碼

   2. 在外部使用Card組件

   import React from 'react'
   import Card from './components/Card'
   
   export default function () {
   
     return (
       
   
         
           
   我將被放在card組件的body區(qū)域內(nèi)容
         
       
     );
   }
   復(fù)制代碼

具名插槽

繼續(xù)以上面的Card組件為例，假如我們現(xiàn)在需求發(fā)生了變化，組件的title也可以使用插槽，這時(shí)候?qū)τ?code>Vue就可以使用具名插槽了，而React也是有辦法實(shí)現(xiàn)的哦。

Vue實(shí)現(xiàn)

Vue的具名插槽主要解決的是一個(gè)組件需要多個(gè)插槽的場(chǎng)景，其實(shí)現(xiàn)是為添加name屬性來實(shí)現(xiàn)了。

1. 我們就上面的需求對(duì)card組件進(jìn)行修改

復(fù)制代碼

2. card組件修改完之后，我們?cè)偃フ{(diào)整一下使用card組件的地方

復(fù)制代碼

React實(shí)現(xiàn)

React連插槽都沒有， 更別提具名插槽了，但是沒有不代表不能模擬出來。對(duì)于React的props，我們不僅僅可以傳入普通的屬性，還可以傳入一個(gè)函數(shù)，這時(shí)候我們就可以在傳入的這個(gè)函數(shù)里面返回JSX,從而就實(shí)現(xiàn)了具名插槽的功能。

1. 對(duì)原有的Card組件進(jìn)行修改

import React from 'react'

export interface CardProps {
  title?: string,
  // 加入了一個(gè)renderTitle屬性，屬性類型是Function
  renderTitle?: Function,
  children: React.ReactNode
}

export default function(props: CardProps) {

  const {title, renderTitle} = props
  // 如果指定了renderTtile，則使用renderTitle,否則使用默認(rèn)的title
  let titleEl = renderTitle ? renderTitle() : {title}

  return (
    

      
{titleEl}
      

        {/**每個(gè)組件都可以獲取到 props.children。它包含組件的開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容 */}
        {props.children}
      
    
  );
}
復(fù)制代碼

2. 這時(shí)候就可以在外部自定義title了

import React from 'react'
import Card from './components/Card'

export default function () {
  return (
    

       {
          return 我是自定義的標(biāo)題
        }
      }>
        
我將被放在card組件的body區(qū)域內(nèi)容
      
    
  );
}
復(fù)制代碼

作用域插槽

有時(shí)讓插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)是很有用的，這個(gè)就是Vue提供作用域插槽的原因。我們繼續(xù)使用上面的Card組件為例，現(xiàn)在我基于上面的卡片組件開發(fā)了一個(gè)人員信息卡片組件，用戶直接使用人員信息卡片組件就可以將人員信息顯示到界面中，但是在某些業(yè)務(wù)模塊需要自定義人員信息顯示方式，這時(shí)候我們就需要使用到作用域插槽了。

Vue實(shí)現(xiàn)

1. 實(shí)現(xiàn)用戶信息卡片組件，里面使用了作用域插槽

復(fù)制代碼

2. 在外部使用人員信息組件

復(fù)制代碼

React實(shí)現(xiàn)

在具名插槽那一小節(jié)我們通過給組件傳入了一個(gè)函數(shù)，然后在函數(shù)中返回JSX的方式來模擬了具名插槽，那么對(duì)于作用域插槽，我們依然可以使用函數(shù)的這種方式，而作用域插槽傳遞的參數(shù)我們可以使用給函數(shù)傳參的方式來替代

1. 實(shí)現(xiàn)人員信息卡片組件

   import React, { useState } from 'react'
   
   import Card from './Card'
   
   interface UserCardProps {
     renderUserInfo?: Function
   }
   
   export interface UserInfo {
     name: string;
     age: number;
     sex: string;
   }
   
   export default function(props: UserCardProps) {
     const [userInfo] = useState({
       name: "張三",
       age: 25,
       sex: "男",
     });
   
     const content = props.renderUserInfo ? (
       props.renderUserInfo(userInfo)
     ) : (
       
   
         姓名: {userInfo.name}
         年齡: {userInfo.age}
         性別: {userInfo.sex}
       
     );
   
     return 
       {content}
     
   }
   復(fù)制代碼

2. 在外部使用人員信息卡片組件

   import React from 'react'
   import UserCard, { UserInfo } from "./components/UserCard";
   
   export default function () {
   
     return (
       
   
          {
             return (
               
   
                 
   姓名： {userInfo.name}
               
             );
           }}
         >
       
     );
   }
   復(fù)制代碼

Context, React中的provide/inject

通常我們?cè)陧?xiàng)目開發(fā)中，對(duì)于多組件之間的狀態(tài)管理，在Vue中會(huì)使用到Vuex,在React中會(huì)使用到redux或者Mobx,但對(duì)于小項(xiàng)目來說，使用這些狀態(tài)管理庫就顯得比較大材小用了，那么在不使用這些庫的情況下，如何去完成數(shù)據(jù)管理呢？比如面試最常問的祖孫組件通信。在Vue中我們可以使用provide/inject，在React中我們可以使用Context。

假設(shè)有這樣一個(gè)場(chǎng)景，系統(tǒng)現(xiàn)在需要提供一個(gè)換膚功能，用戶可以切換皮膚，現(xiàn)在我們分別使用Vue和React來實(shí)現(xiàn)這個(gè)功能。

Vue中的provide/inject

在Vue中我們可以使用provide/inject來實(shí)現(xiàn)跨多級(jí)組件進(jìn)行傳值，就以上面所說場(chǎng)景為例，我們使用provide/inject來實(shí)現(xiàn)以下

首先，修改App.vue內(nèi)容為以下內(nèi)容

復(fù)制代碼

然后在任意層級(jí)的子組件中像下面這樣使用

復(fù)制代碼

這樣就可以實(shí)現(xiàn)theme在所有子組件中進(jìn)行共享了

React中的Context

在Vue中我們使用provide/inject實(shí)現(xiàn)了組件跨層級(jí)傳值功能，在React中也提供了類似的功能即Context，下面我們使用Context來實(shí)現(xiàn)相同的功能。

在項(xiàng)目src目錄下新建context目錄，添加MyContext.js文件，然后添加以下內(nèi)容

import {createContext} from 'react'
// 定義 MyContext,指定默認(rèn)的主題為`light`
export const MyContext = createContext({
  theme: 'light'
})
復(fù)制代碼

MyContext提供了一個(gè)Provider，通過Provider可以將theme共享到所有的子組件?，F(xiàn)在我們?cè)谒械慕M件的共同父組件比如App.js上面添加MyContext.Provider將theme共享出去

import { MyContext } from '@/context/MyContext';

export default function() {
  
  const [theme, setTheme] = useState('dark')
  
  return (
    
        
     
    )
  }

復(fù)制代碼

然后這時(shí)候就可以直接在所有的子組件里面使用定義的主題theme了

import React, { useContext } from 'react'
import { MyContext } from '@/context/MyContext';

export default function() {
   const {theme}  = useContext(MyContext)
   return 

}

復(fù)制代碼

沒有了v-model,但也不影響使用

我們知道React和Vue都是單向數(shù)據(jù)流的，即數(shù)據(jù)的流向都是由外層向內(nèi)層組件進(jìn)行傳遞和更新的，比如下面這段React代碼就是標(biāo)準(zhǔn)的單向數(shù)據(jù)流.

import React, { useState } from "react";

export default function(){
  const [name] = useState('子君')
  return 
}
復(fù)制代碼

在vue中使用v-model

如上代碼，我們?cè)谕ㄟ^通過value屬性將外部的值傳遞給了input組件，這個(gè)就是一個(gè)簡(jiǎn)單的單向數(shù)據(jù)流。但是在使用Vue的時(shí)候，還有兩個(gè)比較特殊的語法糖v-model和.sync，這兩個(gè)語法糖可以讓Vue組件擁有雙向數(shù)據(jù)綁定的能力，比如下面的代碼

復(fù)制代碼

通過v-model,當(dāng)用戶修改input的值的時(shí)候，外部的name的值也將同步被修改。但這是Vue的語法糖啊，React是不支持的，所以React應(yīng)該怎么辦呢？這時(shí)候再想想自定義v-model，v-model實(shí)際上是通過定義value屬性同時(shí)監(jiān)聽input事件來實(shí)現(xiàn)的，比如這樣:

復(fù)制代碼

在react尋找v-model替代方案

同理，React雖然沒有v-model語法糖，但是也可以通過傳入屬性然后監(jiān)聽事件來實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。

import React, { useState } from 'react'

export default function() {
  const [name, setName] = useState('子君')

  const handleChange = (e) => {
    setName(e.target.value)
  }
  return 

    
  
}
復(fù)制代碼

小編剛開始使用react，感覺沒有v-model就顯得比較麻煩，不過麻煩歸麻煩，代碼改寫也要寫。就像上文代碼一樣，每一個(gè)表單元素都需要監(jiān)聽onChange事件，越發(fā)顯得麻煩了，這時(shí)候就可以考慮將多個(gè)onChange事件合并成一個(gè)，比如像下面代碼這樣

import React, { useState } from 'react'

export default function () {
  const [name, setName] = useState('子君')
  const [sex, setSex] = useState('男')

  const handleChange = (e:any, method: Function) => {
    method(e.target.value)
  }
  return 

     handleChange(e, setName)}>
     handleChange(e, setSex)}>
  
}
復(fù)制代碼

沒有了指令，我感覺好迷茫

在Vue中我們一般繪制頁面都會(huì)使用到template，template里面提供了大量的指令幫助我們完成業(yè)務(wù)開發(fā)，但是在React中使用的是JSX,并沒有指令，那么我們應(yīng)該怎么做呢？下面我們就將Vue中最常用的一些指令轉(zhuǎn)換為JSX里面的語法(注意: 在Vue中也可以使用JSX)

v-show與v-if

在Vue中我們隱藏顯示元素可以使用v-show或者v-if,當(dāng)然這兩者的使用場(chǎng)景是有所不同的，v-show是通過設(shè)置元素的display樣式來顯示隱藏元素的，而v-if隱藏元素是直接將元素從dom中移除掉。

1. 看一下Vue中的v-show與v-if的用法

   
   
   
   復(fù)制代碼

2. 將v-show，v-if轉(zhuǎn)換為JSX中的語法

   在Vue中指令是為了在template方便動(dòng)態(tài)操作數(shù)據(jù)而存在的，但是到了React中我們寫的是JSX,可以直接使用JS,所以指令是不需要存在的，那么上面的v-show,v-if如何在JSX中替代呢

   import React, { useState } from 'react'
   
   export default function() {
     const [showName] = useState(false)
   
     const [showDept] = useState(true)
   
     const [userInfo] = useState({
       name:'子君',
       dept: '銀河帝國(guó)'
     })
   
     return (
       
   
         {/**模擬 v-show */}
         {userInfo.name}
         {/**模擬 v-if */}
         {showDept ? {userInfo.dept}: undefined}
       
     )
   }
   復(fù)制代碼

v-for

v-for在Vue中是用來遍歷數(shù)據(jù)的，同時(shí)我們?cè)谑褂?code>v-for的時(shí)候需要給元素指定key，key的值一般是數(shù)據(jù)的id或者其他唯一且固定的值。不僅在Vue中，在React中也是存在key的，兩者的key存在的意義基本一致，都是為了優(yōu)化虛擬DOM diff算法而存在的。

1. 在Vue中使用v-for

   
   
   
   復(fù)制代碼

2. 在React中使用v-for的替代語法

   在react中雖然沒有v-for，但是JSX中可以直接使用JS,所以我們可以直接遍歷數(shù)組

   import React from 'react'
   
   export default function() {
     const data = http://www.wxapp-union.com/[
       {
         id: 1,
         name:"子君",
       },
       {
         id: "2",
         name: "張三",
       },
       {
         id: "3",
         name: "李四",
       },
     ];
   
     return (
       
   
         
   
           {
           data.map(item => {
             return 
   {item.name}
           })
         }
         
       
     )
   }
   復(fù)制代碼

v-bind與v-on

v-bind在Vue中是動(dòng)態(tài)綁定屬性的，v-on是用于監(jiān)聽事件的,因?yàn)?code>React也有屬性和事件的概念，所以我們?cè)?code>React也能發(fā)現(xiàn)可替代的方式。

1. 在Vue中使用v-bind與v-on

   
   
   
   復(fù)制代碼

2. 在React中尋找替代方案

   在Vue中，作者將事件和屬性進(jìn)行了分離，但是在React中，其實(shí)事件也是屬性，所以在本小節(jié)我們不僅看一下如何使用屬性和事件，再了解一下如何在React中自定義事件

   • 開發(fā)一個(gè)CustomInput組件

     import React from 'react'
     
     export interface CustomInputProps {
       value: string;
       //可以看出 onChange是一個(gè)普通的函數(shù),也被定義到了組件的props里面了
       onChange: ((value: string,event: React.ChangeEvent) => void) | undefined;
     }
     
     export default function(props: CustomInputProps) {
       
       function handleChange(e: React.ChangeEvent) {
         // props.onChange是一個(gè)屬性，也是自定義的一個(gè)事件
         props.onChange && props.onChange(e.target.value, e)
       }
     
       return (
         
       )
     }
     復(fù)制代碼

• 使用CustomInput組件

  import React, { useState } from 'react'
  
  import CustomInput from './components/CustomInput'
  
  export default function() {
   const [value, setValue] =  useState('')
  
   function handleChange(value: string) {
     setValue(value)
   }
  
    return (
      
  
        
      
    )
  }
  復(fù)制代碼

  總結(jié)

  剛開始從Vue轉(zhuǎn)到React的時(shí)候，其實(shí)是有點(diǎn)不適應(yīng)的，但是當(dāng)慢慢的習(xí)慣之后，就會(huì)發(fā)現(xiàn)Vue和React是存在很多共性的，可以參考的去學(xué)習(xí)。當(dāng)然無論Vue還是React，上手比較快，但是想深入學(xué)習(xí)還是需要下功夫的，后續(xù)小編將會(huì)對(duì)Vue和React的用法在做更深入的介紹，敬請(qǐng)期待。