日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
適合Vue用戶的React教程，你值得擁有

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

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

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

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.

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

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.

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

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

1.使用React定義Card組件

 
 
 
 
    
  
  
  
  
  1. import React from 'react'
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. export interface CardProps {
    4. 
  
  
  
  
  4.   title: string,
    5. 
  
  
  
  
  5.   children: React.ReactNode
    6. 
  
  
  
  
  6. }
    7. 
  
  
  
  
  7. 
  
  
  
  
  8. export default function(props: CardProps) {
    9. 
  
  
  
  
  9. 
  
  
  
  
  10.   return (
    11. 
  
  
  
  
  11.     
    12. 
  
  
  
  
  12.       
    13. 
  
  
  
  
  13.         {props.title}
    14. 
  
  
  
  
  14.       
  •       
  •         {/**每個(gè)組件都可以獲取到 props.children。它包含組件的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容 */}
  •         {props.children}
  •       
  •     
  •   );

    •  
 
 
 
      
  
  
  
  
    1. import React from 'react'
      2. 
  
  
  
  
    2. import Card from './components/Card'
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. export default function () {
      5. 
  
  
  
  
    5. 
  
  
  
  
    6.   return (
      7. 
  
  
  
  
    7.     
      8. 
  
  
  
  
    8.       
      9. 
  
  
  
  
    9.         
      我將被放在card組件的body區(qū)域內(nèi)容
      10. 
  
  
  
  
    10.       
      11. 
  
  
  
  
    11.     
  •   );
  • }

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

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

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.       
      我將被放在card組件的默認(rèn)插槽里面
      3. 
  
  
  
  
    3.     
      4. 
  
  
  
  
    4.   

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

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

     
 
 
 
      
  
  
  
  
    1. import React from 'react'
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. export interface CardProps {
      4. 
  
  
  
  
    4.   title?: string,
      5. 
  
  
  
  
    5.   // 加入了一個(gè)renderTitle屬性，屬性類(lèi)型是Function
      6. 
  
  
  
  
    6.   renderTitle?: Function,
      7. 
  
  
  
  
    7.   children: React.ReactNode
      8. 
  
  
  
  
    8. }
      9. 
  
  
  
  
    9. 
  
  
  
  
    10. export default function(props: CardProps) {
      11. 
  
  
  
  
    11. 
  
  
  
  
    12.   const {title, renderTitle} = props
      13. 
  
  
  
  
    13.   // 如果指定了renderTtile，則使用renderTitle,否則使用默認(rèn)的title
      14. 
  
  
  
  
    14.   let titleEl = renderTitle ? renderTitle() : {title}
      15. 
  
  
  
  
    15. 
  
  
  
  
    16.   return (
      17. 
  
  
  
  
    17.     
      18. 
  
  
  
  
    18.       {titleEl}
  •       
  •         {/**每個(gè)組件都可以獲取到 props.children。它包含組件的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容 */}
  •         {props.children}
  •       
  •     
  •   );
  • }

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

     
 
 
 
      
  
  
  
  
    1. import React from 'react'
      2. 
  
  
  
  
    2. import Card from './components/Card'
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. export default function () {
      5. 
  
  
  
  
    5.   return (
      6. 
  
  
  
  
    6.     
      7. 
  
  
  
  
    7.       
  
  
  
  
    8.         () => {
      9. 
  
  
  
  
    9.           return 我是自定義的標(biāo)題
      10. 
  
  
  
  
    10.         }
      11. 
  
  
  
  
    11.       }>
      12. 
  
  
  
  
    12.         
      我將被放在card組件的body區(qū)域內(nèi)容
      13. 
  
  
  
  
    13.       
      14. 
  
  
  
  
    14.     
  •   );
  • }

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

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.     
      3. 
  
  
  
  
    3.   

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

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

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from 'react'
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. import Card from './Card'
      4. 
  
  
  
  
    4. 
  
  
  
  
    5. interface UserCardProps {
      6. 
  
  
  
  
    6.   renderUserInfo?: Function
      7. 
  
  
  
  
    7. }
      8. 
  
  
  
  
    8. 
  
  
  
  
    9. export interface UserInfo {
      10. 
  
  
  
  
    10.   name: string;
      11. 
  
  
  
  
    11.   age: number;
      12. 
  
  
  
  
    12.   sex: string;
      13. 
  
  
  
  
    13. }
      14. 
  
  
  
  
    14. 
  
  
  
  
    15. export default function(props: UserCardProps) {
      16. 
  
  
  
  
    16.   const [userInfo] = useState({
      17. 
  
  
  
  
    17.     name: "張三",
      18. 
  
  
  
  
    18.     age: 25,
      19. 
  
  
  
  
    19.     sex: "男",
      20. 
  
  
  
  
    20.   });
      21. 
  
  
  
  
    21. 
  
  
  
  
    22.   const content = props.renderUserInfo ? (
      23. 
  
  
  
  
    23.     props.renderUserInfo(userInfo)
      24. 
  
  
  
  
    24.   ) : (
      25. 
  
  
  
  
    25.     
      26. 
  
  
  
  
    26.       姓名: {userInfo.name}
      27. 
  
  
  
  
    27.       年齡: {userInfo.age}
      28. 
  
  
  
  
    28.       性別: {userInfo.sex}
      29. 
  
  
  
  
    29.     
  •   );
  •   return 
  •     {content}
  •   
  • }

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

     
 
 
 
      
  
  
  
  
    1. import React from 'react'
      2. 
  
  
  
  
    2. import UserCard, { UserInfo } from "./components/UserCard";
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. export default function () {
      5. 
  
  
  
  
    5. 
  
  
  
  
    6.   return (
      7. 
  
  
  
  
    7.     
      8. 
  
  
  
  
    8.       
  
  
  
  
    9.         renderUserInfo={(userInfo: UserInfo) => {
      10. 
  
  
  
  
    10.           return (
      11. 
  
  
  
  
    11.             
        
  
  
  
  
      •               
      • 姓名： {userInfo.name}
        • 
  
  
  
  
      •             
      12. 
  
  
  
  
    12.           );
      13. 
  
  
  
  
    13.         }}
      14. 
  
  
  
  
    14.       >
      15. 
  
  
  
  
    15.     
  •   );
  • }

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

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

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

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2. 
  
  
  
  
    3.

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.

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

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

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

     
 
 
 
      
  
  
  
  
    1. import {createContext} from 'react'
      2. 
  
  
  
  
    2. // 定義 MyContext,指定默認(rèn)的主題為`light`
      3. 
  
  
  
  
    3. export const MyContext = createContext({
      4. 
  
  
  
  
    4.   theme: 'light'
      5. 
  
  
  
  
    5. })
      6.

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

     
 
 
 
      
  
  
  
  
    1. import { MyContext } from '@/context/MyContext';
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. export default function() {
      4. 
  
  
  
  
    4.   
      5. 
  
  
  
  
    5.   const [theme, setTheme] = useState('dark')
      6. 
  
  
  
  
    6.   
      7. 
  
  
  
  
    7.   return (
      8. 
  
  
  
  
    8.     
  
  
  
  
    9.         value={{
      10. 
  
  
  
  
    10.           theme
      11. 
  
  
  
  
    11.         }}
      12. 
  
  
  
  
    12.       >
      13. 
  
  
  
  
    13.         
      14. 
  
  
  
  
    14.      
      15. 
  
  
  
  
    15.     )
      16. 
  
  
  
  
    16.   }
      17.

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

     
 
 
 
      
  
  
  
  
    1. import React, { useContext } from 'react'
      2. 
  
  
  
  
    2. import { MyContext } from '@/context/MyContext';
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. export default function() {
      5. 
  
  
  
  
    5.    const {theme}  = useContext(MyContext)
      6. 
  
  
  
  
    6.    return 
      7. 
  
  
  
  
    7. }
      8.

    沒(méi)有了v-model,但也不影響使用
    我們知道React和Vue都是單向數(shù)據(jù)流的，即數(shù)據(jù)的流向都是由外層向內(nèi)層組件進(jìn)行傳遞和更新的，比如下面這段React代碼就是標(biāo)準(zhǔn)的單向數(shù)據(jù)流.

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from "react";
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. export default function(){
      4. 
  
  
  
  
    4.   const [name] = useState('子君')
      5. 
  
  
  
  
    5.   return 
      6. 
  
  
  
  
    6. }
      7.

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.

    在react尋找v-model替代方案
    同理，React雖然沒(méi)有v-model語(yǔ)法糖，但是也可以通過(guò)傳入屬性然后監(jiān)聽(tīng)事件來(lái)實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from 'react'
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. export default function() {
      4. 
  
  
  
  
    4.   const [name, setName] = useState('子君')
      5. 
  
  
  
  
    5. 
  
  
  
  
    6.   const handleChange = (e) => {
      7. 
  
  
  
  
    7.     setName(e.target.value)
      8. 
  
  
  
  
    8.   }
      9. 
  
  
  
  
    9.   return 
      10. 
  
  
  
  
    10.     
      11. 
  
  
  
  
    11.   
      12. 
  
  
  
  
    12. }
      13.

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

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from 'react'
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. export default function () {
      4. 
  
  
  
  
    4.   const [name, setName] = useState('子君')
      5. 
  
  
  
  
    5.   const [sex, setSex] = useState('男')
      6. 
  
  
  
  
    6. 
  
  
  
  
    7.   const handleChange = (e:any, method: Function) => {
      8. 
  
  
  
  
    8.     method(e.target.value)
      9. 
  
  
  
  
    9.   }
      10. 
  
  
  
  
    10.   return 
      11. 
  
  
  
  
    11.      handleChange(e, setName)}>
      12. 
  
  
  
  
    12.      handleChange(e, setSex)}>
      13. 
  
  
  
  
    13.   
      14. 
  
  
  
  
    14. }
      15.

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

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

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.

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

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

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from 'react'
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. export default function() {
      4. 
  
  
  
  
    4.   const [showName] = useState(false)
      5. 
  
  
  
  
    5. 
  
  
  
  
    6.   const [showDept] = useState(true)
      7. 
  
  
  
  
    7. 
  
  
  
  
    8.   const [userInfo] = useState({
      9. 
  
  
  
  
    9.     name:'子君',
      10. 
  
  
  
  
    10.     dept: '銀河帝國(guó)'
      11. 
  
  
  
  
    11.   })
      12. 
  
  
  
  
    12. 
  
  
  
  
    13.   return (
      14. 
  
  
  
  
    14.     
      15. 
  
  
  
  
    15.       {/**模擬 v-show */}
      16. 
  
  
  
  
    16.       {userInfo.name}
      17. 
  
  
  
  
    17.       {/**模擬 v-show */}
      18. 
  
  
  
  
    18.       {showDept ? {userInfo.dept}: undefined}
      19. 
  
  
  
  
    19.     
      20. 
  
  
  
  
    20.   )
      21. 
  
  
  
  
    21. }
      22.

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

    1.在Vue中使用v-for

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.

    2.在React中使用v-for的替代語(yǔ)法

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

     
 
 
 
      
  
  
  
  
    1. import React from 'react'
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. export default function() {
      4. 
  
  
  
  
    4.   const data = [
      5. 
  
  
  
  
    5.     {
      6. 
  
  
  
  
    6.       id: 1,
      7. 
  
  
  
  
    7.       name: "子君",
      8. 
  
  
  
  
    8.     },
      9. 
  
  
  
  
    9.     {
      10. 
  
  
  
  
    10.       id: "2",
      11. 
  
  
  
  
    11.       name: "張三",
      12. 
  
  
  
  
    12.     },
      13. 
  
  
  
  
    13.     {
      14. 
  
  
  
  
    14.       id: "3",
      15. 
  
  
  
  
    15.       name: "李四",
      16. 
  
  
  
  
    16.     },
      17. 
  
  
  
  
    17.   ];
      18. 
  
  
  
  
    18. 
  
  
  
  
    19.   return (
      20. 
  
  
  
  
    20.     
      21. 
  
  
  
  
    21.       
        
  
  
  
  
      •         {
        • 
  
  
  
  
      •         data.map(item => {
        • 
  
  
  
  
      •           return {item.name}
        • 
  
  
  
  
      •         })
        • 
  
  
  
  
      •       }
        • 
  
  
  
  
      •       
      22. 
  
  
  
  
    22.     
      23. 
  
  
  
  
    23.   )
      24. 
  
  
  
  
    24. }
      25.

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

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.

    2.在React中尋找替代方案

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

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

     
 
 
 
      
  
  
  
  
    1. import React from 'react'
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. export interface CustomInputProps {
      4. 
  
  
  
  
    4.   value: string;
      5. 
  
  
  
  
    5.   //可以看出 onChange是一個(gè)普通的函數(shù),也被定義到了組件的props里面了
      6. 
  
  
  
  
    6.   onChange: ((value: string,event: React.ChangeEvent) => void) | undefined;
      7. 
  
  
  
  
    7. }
      8. 
  
  
  
  
    8. 
  
  
  
  
    9. export default function(props: CustomInputProps) {
      10. 
  
  
  
  
    10.   
      11. 
  
  
  
  
    11.   function handleChange(e: React.ChangeEvent) {
      12. 
  
  
  
  
    12.     // props.onChange是一個(gè)屬性，也是自定義的一個(gè)事件
      13. 
  
  
  
  
    13.     props.onChange && props.onChange(e.target.value, e)
      14. 
  
  
  
  
    14.   }
      15. 
  
  
  
  
    15. 
  
  
  
  
    16.   return (
      17. 
  
  
  
  
    17.     
      18. 
  
  
  
  
    18.   )
      19. 
  
  
  
  
    19. }
      20.

    使用CustomInput組件

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from 'react'
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. import CustomInput from './components/CustomInput'
      4. 
  
  
  
  
    4. 
  
  
  
  
    5. export default function() {
      6. 
  
  
  
  
    6.  const [value, setValue] =  useState('')
      7. 
  
  
  
  
    7. 
  
  
  
  
    8.  function handleChange(value: string) {
      9. 
  
  
  
  
    9.    setValue(value)
      10. 
  
  
  
  
    10.  }
      11. 
  
  
  
  
    11. 
  
  
  
  
    12.   return (
      13. 
  
  
  
  
    13.     
      14. 
  
  
  
  
    14.       
      15. 
  
  
  
  
    15.     
      16. 
  
  
  
  
    16.   )
      17. 
  
  
  
  
    17. }
      18.

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


    當(dāng)前標(biāo)題：適合Vue用戶的React教程，你值得擁有
    分享網(wǎng)址：http://www.dlmjj.cn/article/dpedohe.html

    其他資訊