React中的Component組件詳解

更新時(shí)間：2023年06月10日 10:43:58 作者：江擁羨橙

本章節(jié)，我們將一起探討 React 中類組件和函數(shù)組件的定義，不同組件的通信方式，以及常規(guī)組件的強(qiáng)化方式，幫助你全方位認(rèn)識(shí) React 組件，從而對(duì) React 的底層邏輯有進(jìn)一步的理解，感興趣的朋友跟隨小編一起看看吧

一前言

在 React 世界里，一切皆組件，我們寫的 React 項(xiàng)目全部起源于組件。組件可以分為兩類，一類是類（ Class ）組件，一類是函數(shù)（ Function ）組件。

本章節(jié)，我們將一起探討 React 中類組件和函數(shù)組件的定義，不同組件的通信方式，以及常規(guī)組件的強(qiáng)化方式，幫助你全方位認(rèn)識(shí) React 組件，從而對(duì) React 的底層邏輯有進(jìn)一步的理解。

二什么是React組件？

想要理解 React 組件是什么？我們首先要來(lái)分析一下組件和常規(guī)的函數(shù)和類到底有什么本質(zhì)的區(qū)別。

/* 類 */
class textClass {
    sayHello=()=>console.log('hello, my name is alien')
}
/* 類組件 */
class Index extends React.Component{
    state={ message:`hello ，world!` }
    sayHello=()=> this.setState({ message : 'hello, my name is alien' })
    render(){
        return <div style={{ marginTop:'50px' }} onClick={ this.sayHello } > { this.state.message }  </div>
    }
}
/* 函數(shù) */
function textFun (){ 
    return 'hello, world'
}
/* 函數(shù)組件 */
function FunComponent(){
    const [ message , setMessage ] = useState('hello,world')
    return <div onClick={ ()=> setMessage('hello, my name is alien')  } >{ message }</div>
}

我們從上面可以清楚地看到，組件本質(zhì)上就是類和函數(shù)，但是與常規(guī)的類和函數(shù)不同的是，組件承載了渲染視圖的 UI 和更新視圖的 setState 、 useState 等方法。React 在底層邏輯上會(huì)像正常實(shí)例化類和正常執(zhí)行函數(shù)那樣處理的組件。

因此，函數(shù)與類上的特性在 React 組件上同樣具有，比如原型鏈，繼承，靜態(tài)屬性等，所以不要把 React 組件和類與函數(shù)獨(dú)立開來(lái)。

接下來(lái)，我們一起著重看一下 React 對(duì)組件的處理流程。

對(duì)于類組件的執(zhí)行，是在react-reconciler/src/ReactFiberClassComponent.js中：

function constructClassInstance(
    workInProgress, // 當(dāng)前正在工作的 fiber 對(duì)象
    ctor,           // 我們的類組件
    props           // props 
){
     /* 實(shí)例化組件，得到組件實(shí)例 instance */
     const instance = new ctor(props, context)
}

對(duì)于函數(shù)組件的執(zhí)行，是在react-reconciler/src/ReactFiberHooks.js中

function renderWithHooks(
  current,          // 當(dāng)前函數(shù)組件對(duì)應(yīng)的 `fiber`， 初始化
  workInProgress,   // 當(dāng)前正在工作的 fiber 對(duì)象
  Component,        // 我們函數(shù)組件
  props,            // 函數(shù)組件第一個(gè)參數(shù) props
  secondArg,        // 函數(shù)組件其他參數(shù)
  nextRenderExpirationTime, //下次渲染過(guò)期時(shí)間
){
     /* 執(zhí)行我們的函數(shù)組件，得到 return 返回的 React.element對(duì)象 */
     let children = Component(props, secondArg);
}

從中，找到了執(zhí)行類組件和函數(shù)組件的函數(shù)。那么為了搞清楚 React 底層是如何處理組件的，首先來(lái)看一下類和函數(shù)組件是什么時(shí)候被實(shí)例化和執(zhí)行的？

在 React 調(diào)和渲染 fiber 節(jié)點(diǎn)的時(shí)候，如果發(fā)現(xiàn) fiber tag 是 ClassComponent = 1，則按照類組件邏輯處理，如果是 FunctionComponent = 0 則按照函數(shù)組件邏輯處理。當(dāng)然 React 也提供了一些內(nèi)置的組件，比如說(shuō) Suspense 、Profiler 等。

三二種不同 React 組件

1 class類組件

類組件的定義

在 class 組件中，除了繼承 React.Component ，底層還加入了 updater 對(duì)象，組件中調(diào)用的 setState 和 forceUpdate 本質(zhì)上是調(diào)用了 updater 對(duì)象上的 enqueueSetState 和 enqueueForceUpdate 方法。

那么，React 底層是如何定義類組件的呢？

react/src/ReactBaseClasses.js

function Component(props, context, updater) {
  this.props = props;      //綁定props
  this.context = context;  //綁定context
  this.refs = emptyObject; //綁定ref
  this.updater = updater || ReactNoopUpdateQueue; //上面所屬的updater 對(duì)象
}
/* 綁定setState 方法 */
Component.prototype.setState = function(partialState, callback) {
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
}
/* 綁定forceupdate 方法 */
Component.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
}

如上可以看出 Component 底層 React 的處理邏輯是，類組件執(zhí)行構(gòu)造函數(shù)過(guò)程中會(huì)在實(shí)例上綁定 props 和 context ，初始化置空 refs 屬性，原型鏈上綁定setState、forceUpdate 方法。對(duì)于 updater，React 在實(shí)例化類組件之后會(huì)單獨(dú)綁定 update 對(duì)象。

｜--------問(wèn)與答---------｜

問(wèn)：如果沒(méi)有在 constructor 的 super 函數(shù)中傳遞 props，那么接下來(lái) constructor 執(zhí)行上下文中就獲取不到 props ，這是為什么呢？

/* 假設(shè)我們?cè)?constructor 中這么寫 */
constructor(){
    super()
    console.log(this.props) // 打印 undefined 為什么?
}

答案很簡(jiǎn)單，剛才的 Component 源碼已經(jīng)說(shuō)得明明白白了，綁定 props 是在父類 Component 構(gòu)造函數(shù)中，執(zhí)行 super 等于執(zhí)行 Component 函數(shù)，此時(shí) props 沒(méi)有作為第一個(gè)參數(shù)傳給 super() ，在 Component 中就會(huì)找不到 props 參數(shù)，從而變成 undefined ，在接下來(lái) constructor 代碼中打印 props 為 undefined 。

/* 解決問(wèn)題 */
constructor(props){ 
    super(props)
}

｜---------end----------｜

為了更好地使用 React 類組件，我們首先看一下類組件各個(gè)部分的功能：

class Index extends React.Component{
    constructor(...arg){
       super(...arg)                        /* 執(zhí)行 react 底層 Component 函數(shù) */
    }
    state = {}                              /* state */
    static number = 1                       /* 內(nèi)置靜態(tài)屬性 */
    handleClick= () => console.log(111)     /* 方法： 箭頭函數(shù)方法直接綁定在this實(shí)例上 */
    componentDidMount(){                    /* 生命周期 */
        console.log(Index.number,Index.number1) // 打印 1 , 2 
    }
    render(){                               /* 渲染函數(shù) */
        return <div style={{ marginTop:'50px' }} onClick={ this.handerClick }  >hello,React!</div>
    }
}
Index.number1 = 2                           /* 外置靜態(tài)屬性 */
Index.prototype.handleClick = ()=> console.log(222) /* 方法: 綁定在 Index 原型鏈的 方法*/

上面把類組件的主要組成部分都展示給大家了。針對(duì) state ，生命周期等部分，后續(xù)會(huì)有專門的章節(jié)進(jìn)行講解。

｜--------問(wèn)與答---------｜

問(wèn)：上述綁定了兩個(gè) handleClick ，那么點(diǎn)擊 div 之后會(huì)打印什么呢？

答：結(jié)果是 111 。因?yàn)樵?class 類內(nèi)部，箭頭函數(shù)是直接綁定在實(shí)例對(duì)象上的，而第二個(gè) handleClick 是綁定在 prototype 原型鏈上的，它們的優(yōu)先級(jí)是：實(shí)例對(duì)象上方法屬性 > 原型鏈對(duì)象上方法屬性。

｜---------end----------｜

對(duì)于 pureComponent 會(huì)在 React 渲染優(yōu)化章節(jié)，詳細(xì)探討。

2 函數(shù)組件

ReactV16.8 hooks 問(wèn)世以來(lái)，對(duì)函數(shù)組件的功能加以強(qiáng)化，可以在 function 組件中，做類組件一切能做的事情，甚至完全取締類組件。函數(shù)組件的結(jié)構(gòu)相比類組件就簡(jiǎn)單多了，比如說(shuō)，下面寫了一個(gè)常規(guī)的函數(shù)組件：

class Index extends React.Component{
    constructor(...arg){
       super(...arg)                        /* 執(zhí)行 react 底層 Component 函數(shù) */
    }
    state = {}                              /* state */
    static number = 1                       /* 內(nèi)置靜態(tài)屬性 */
    handleClick= () => console.log(111)     /* 方法： 箭頭函數(shù)方法直接綁定在this實(shí)例上 */
    componentDidMount(){                    /* 生命周期 */
        console.log(Index.number,Index.number1) // 打印 1 , 2 
    }
    render(){                               /* 渲染函數(shù) */
        return <div style={{ marginTop:'50px' }} onClick={ this.handerClick }  >hello,React!</div>
    }
}
Index.number1 = 2                           /* 外置靜態(tài)屬性 */
Index.prototype.handleClick = ()=> console.log(222) /* 方法: 綁定在 Index 原型鏈的 方法*/

注意：不要嘗試給函數(shù)組件 prototype 綁定屬性或方法，即使綁定了也沒(méi)有任何作用，因?yàn)橥ㄟ^(guò)上面源碼中 React 對(duì)函數(shù)組件的調(diào)用，是采用直接執(zhí)行函數(shù)的方式，而不是通過(guò)new的方式。

那么，函數(shù)組件和類組件本質(zhì)的區(qū)別是什么呢？

對(duì)于類組件來(lái)說(shuō)，底層只需要實(shí)例化一次，實(shí)例中保存了組件的 state 等狀態(tài)。對(duì)于每一次更新只需要調(diào)用 render 方法以及對(duì)應(yīng)的生命周期就可以了。但是在函數(shù)組件中，每一次更新都是一次新的函數(shù)執(zhí)行，一次函數(shù)組件的更新，里面的變量會(huì)重新聲明。

為了能讓函數(shù)組件可以保存一些狀態(tài)，執(zhí)行一些副作用鉤子，React Hooks 應(yīng)運(yùn)而生，它可以幫助記錄 React 中組件的狀態(tài)，處理一些額外的副作用。

四組件通信方式

React 一共有 5 種主流的通信方式：

props 和 callback 方式
ref 方式。
React-redux 或 React-mobx 狀態(tài)管理方式。
context 上下文方式。
event bus 事件總線。

這里主要講一下第1種和第5種，其余的會(huì)在對(duì)應(yīng)章節(jié)詳細(xì)解讀。

① props 和 callback 方式

props 和 callback 可以作為 React 組件最基本的通信方式，父組件可以通過(guò) props 將信息傳遞給子組件，子組件可以通過(guò)執(zhí)行 props 中的回調(diào)函數(shù) callback 來(lái)觸發(fā)父組件的方法，實(shí)現(xiàn)父與子的消息通訊。

父組件 -> 通過(guò)自身 state 改變，重新渲染，傳遞 props -> 通知子組件

子組件 -> 通過(guò)調(diào)用父組件 props 方法 -> 通知父組件。

/* 子組件 */
function Son(props){
    const {  fatherSay , sayFather  } = props
    return <div className='son' >
         我是子組件
        <div> 父組件對(duì)我說(shuō)：{ fatherSay } </div>
        <input placeholder="我對(duì)父組件說(shuō)" onChange={ (e)=>sayFather(e.target.value) }   />
    </div>
}
/* 父組件 */
function Father(){
    const [ childSay , setChildSay ] = useState('')
    const [ fatherSay , setFatherSay ] = useState('')
    return <div className="box father" >
        我是父組件
       <div> 子組件對(duì)我說(shuō)：{ childSay } </div>
       <input placeholder="我對(duì)子組件說(shuō)" onChange={ (e)=>setFatherSay(e.target.value) }   />
       <Son fatherSay={fatherSay}  sayFather={ setChildSay }  />
    </div>
}

效果

⑤event bus事件總線

當(dāng)然利用 eventBus 也可以實(shí)現(xiàn)組件通信，但是在 React 中并不提倡用這種方式，我還是更提倡用 props 方式通信。如果說(shuō)非要用 eventBus，我覺(jué)得它更適合用 React 做基礎(chǔ)構(gòu)建的小程序，比如 Taro。接下來(lái)將上述 demo 通過(guò) eventBus 方式進(jìn)行改造。

import { BusService } from './eventBus'
/* event Bus  */
function Son(){
    const [ fatherSay , setFatherSay ] = useState('')
    React.useEffect(()=>{ 
        BusService.on('fatherSay',(value)=>{  /* 事件綁定 , 給父組件綁定事件 */
            setFatherSay(value)
       })
       return function(){  BusService.off('fatherSay') /* 解綁事件 */ }
    },[])
    return <div className='son' >
         我是子組件
        <div> 父組件對(duì)我說(shuō)：{ fatherSay } </div>
        <input placeholder="我對(duì)父組件說(shuō)" onChange={ (e)=> BusService.emit('childSay',e.target.value)  }   />
    </div>
}
/* 父組件 */
function Father(){
    const [ childSay , setChildSay ] = useState('')
    React.useEffect(()=>{    /* 事件綁定 , 給子組件綁定事件 */
        BusService.on('childSay',(value)=>{
             setChildSay(value)
        })
        return function(){  BusService.off('childSay') /* 解綁事件 */ }
    },[])
    return <div className="box father" >
        我是父組件
       <div> 子組件對(duì)我說(shuō)：{ childSay } </div>
       <input placeholder="我對(duì)子組件說(shuō)" onChange={ (e)=> BusService.emit('fatherSay',e.target.value) }   />
       <Son  />
    </div>
}

這樣做不僅達(dá)到了和使用 props 同樣的效果，還能跨層級(jí)，不會(huì)受到 React 父子組件層級(jí)的影響。但是為什么很多人都不推薦這種方式呢？因?yàn)樗幸恍┲旅秉c(diǎn)。

需要手動(dòng)綁定和解綁。
對(duì)于小型項(xiàng)目還好，但是對(duì)于中大型項(xiàng)目，這種方式的組件通信，會(huì)造成牽一發(fā)動(dòng)全身的影響，而且后期難以維護(hù)，組件之間的狀態(tài)也是未知的。
一定程度上違背了 React 數(shù)據(jù)流向原則。

五組件的強(qiáng)化方式

①類組件繼承

對(duì)于類組件的強(qiáng)化，首先想到的是繼承方式，之前開發(fā)的開源項(xiàng)目 react-keepalive-router 就是通過(guò)繼承 React-Router 中的 Switch 和 Router ，來(lái)達(dá)到緩存頁(yè)面的功能的。因?yàn)?React 中類組件，有良好的繼承屬性，所以可以針對(duì)一些基礎(chǔ)組件，首先實(shí)現(xiàn)一部分基礎(chǔ)功能，再針對(duì)項(xiàng)目要求進(jìn)行有方向的改造、強(qiáng)化、添加額外功能。

基礎(chǔ)組件：

/* 人類 */
class Person extends React.Component{
    constructor(props){
        super(props)
        console.log('hello , i am person')
    }
    componentDidMount(){ console.log(1111)  }
    eat(){    /* 吃飯 */ }
    sleep(){  /* 睡覺(jué) */  }
    ddd(){   console.log('打豆豆')  /* 打豆豆 */ }
    render(){
        return <div>
            大家好，我是一個(gè)person
        </div>
    }
}
/* 程序員 */
class Programmer extends Person{
    constructor(props){
        super(props)
        console.log('hello , i am Programmer too')
    }
    componentDidMount(){  console.log(this)  }
    code(){ /* 敲代碼 */ }
    render(){
        return <div style={ { marginTop:'50px' } } >
            { super.render() } { /* 讓 Person 中的 render 執(zhí)行 */ }
            我還是一個(gè)程序員！    { /* 添加自己的內(nèi)容 */ }
        </div>
    }
}
export default Programmer

效果：