一、類組件的問(wèn)題

自從React推出Hooks之后，函數(shù)組件寫法大行其道，而類組件寫法日漸式微。為什么會(huì)這樣呢？ 我覺得有以下三個(gè)原因：

原因一、因?yàn)閠his帶來(lái)的問(wèn)題：

有一個(gè)著名的案例展示了類組件this帶來(lái)的問(wèn)題，下面我將其本土化復(fù)現(xiàn)一下這個(gè)案例。

import React from "react"

const ProfileFunction: React.FC<{goods:string}> = (props) => {
    const showMessage = () => {
        alert(`你下單的是“${props.goods}”！` )
    }
    const handleClick = () => {
        setTimeout(showMessage, 3 * 1000)
    }
    return (
        <button onClick={handleClick}>購(gòu)買</button>
    )
}

class ProfileClass extends React.Component<
    { goods: string },  // props 類型
    {}  // state 類型
> {
    showMessage = () => {
        alert(`你下單的是“${this.props.goods}”！` )
    }
    handleClick = () => {
        setTimeout(this.showMessage, 3 * 1000)
    }
    render() {
        return <button onClick={this.handleClick}>購(gòu)買</button>
    }
}


export default class App extends React.Component {
    state = {
        goods: '蘋果',
    };
    render() {
        return (
            <>
                <label>
                    請(qǐng)選擇：
                    <select
                        value={this.state.goods}
                        onChange={e => this.setState({ goods: e.target.value })}
                    >
                        <option value="蘋果">蘋果</option>
                        <option value="香蕉">香蕉</option>
                        <option value="西瓜">西瓜</option>
                    </select>
                </label>
                <h1>{this.state.goods}</h1>
                <p>
                    <ProfileFunction goods={this.state.goods} />
                    <b> (function)</b>
                </p>
                <p>
                    <ProfileClass goods={this.state.goods} />
                    <b> (class)</b>
                </p>
            </>
        )
    }
}

這里有在線案例，有興趣的朋友可以在線體驗(yàn)一下這個(gè)案例。

問(wèn)題描述

• 函數(shù)組件：當(dāng)用戶選擇蘋果，點(diǎn)擊購(gòu)買后，再切換瀏覽香蕉，提示信息反饋用戶下單的是蘋果。
• 類 組 件 ：當(dāng)用戶選擇蘋果，點(diǎn)擊購(gòu)買后，再切換瀏覽西瓜，提示信息反饋用戶下單的是西瓜！

問(wèn)題解析

粗看函數(shù)組件和類組件的代碼，都是返回一個(gè)按鈕，該按鈕3秒(模擬網(wǎng)絡(luò)延遲)后會(huì)彈出一個(gè)alert提示用戶下單的商品。為什么結(jié)果不一致呢？ 參數(shù)props本身是不可變的，函數(shù)組件中的showMessage在3秒延遲后拿到的仍然是原來(lái)的props.goods。 但是類組件中實(shí)例的this是可變的，類組件中的showMessage在3秒延遲后去拿this.props.goods時(shí)，由于this發(fā)生了變化，所以造成取到的值不是原來(lái)的值。

原因二、類組件代碼量比函數(shù)組件多：

這個(gè)從上面的案例中可見一斑，同樣功能的函數(shù)組件代碼量比類組件少一些。

原因三、類組件過(guò)于臃腫不易拆分：

類組件和函數(shù)組件最大的不同還在于代碼思路方面的不同。類組件是面向?qū)ο缶幊趟季S方式，函數(shù)組件是面向過(guò)程編程思維方式。React的設(shè)計(jì)思路更推崇組合，而不是繼承。在類組件中大量使用繼承會(huì)造成組件過(guò)重，功能難以拆分。

二、函數(shù)組件的問(wèn)題

函數(shù)組件以前被叫做無(wú)狀態(tài)組件，就是因?yàn)楹瘮?shù)組件內(nèi)部不能保存state。自從react官方推出各類hooks后，函數(shù)式組件變得越來(lái)越流行。react官方宣稱將來(lái)會(huì)推出更多hooks以實(shí)現(xiàn)所有類組件的功能，不過(guò)這個(gè)flag立了挺久的，至今還有很多沒有實(shí)現(xiàn)。 下面來(lái)按生命周期的順序盤點(diǎn)一下類組件的方法與函數(shù)組件對(duì)應(yīng)的hooks。

掛載階段：getDerviedStateFromProps VS 無(wú)

• 該方法用于在props被傳入后根據(jù)props更新state。
• 函數(shù)組件中也可以寫代碼根據(jù)props更新state，但這樣做會(huì)造成重復(fù)渲染。如果遇到需要根據(jù)props更新state的情況，應(yīng)該考慮做狀態(tài)提升。如果你發(fā)現(xiàn)在某個(gè)組件中必須要根據(jù)props更新state又無(wú)法做狀態(tài)提升，那么該組件應(yīng)該寫成類式組件，而不是函數(shù)式組件。

掛載階段：UNSAFE_componentWillMount VS 無(wú)

• 該方法用于在組件掛載之前處理一些邏輯，但它在異步渲染模式下容易造成重復(fù)調(diào)用，react官方已將其標(biāo)記為廢棄。
• 函數(shù)組件可以無(wú)視該方法。

掛載階段：componentDidMount VS useEffect

• 該方法用于在組件掛載以后執(zhí)行副作用操作，如發(fā)起網(wǎng)絡(luò)請(qǐng)求、設(shè)置計(jì)時(shí)器、創(chuàng)建訂閱等。
• 函數(shù)組件有useEffect。

render：

• 在類組件的render方法中返回要渲染的內(nèi)容。render里不能有副作用和setState！
• 函數(shù)組件的return和類組件render方法的return效果一致。

生命周期，更新階段：UNSAFE_componentWillRerciveProps VS 無(wú)

• 該方法作用跟getDerviedStateFromProps的一樣，都是在組件掛載之前處理一些邏輯，但react官方已將其標(biāo)記為廢棄。
• 函數(shù)組件可以無(wú)視該方法。

生命周期，更新階段：getDerviedStateFromProps VS 無(wú)

同掛載階段的同名方法一樣。

生命周期，更新階段：shouldComponentUpdate VS memo、useMemo、useCallback

• 該方法返回true表示需要更新、返回false表示無(wú)需更新?？稍诖颂砑优袛鄺l件做性能優(yōu)化，另外PureComponent實(shí)現(xiàn)原理也相同。
• 函數(shù)組件對(duì)應(yīng)的hooks有很多，常用的有memo、useMemo、useCallback，同樣可以做性能優(yōu)化。

生命周期，更新階段：UNSAFE_componentWillUpdate VS 無(wú)

• 該方法原來(lái)在組件重新渲染之前做一些操作，react官方已將其標(biāo)記為廢棄。
• 函數(shù)組件可以無(wú)視該方法。

render：

同掛載階段一樣。

生命周期，更新階段：getSnapshotBeforeUpdate VS 無(wú)

• 該方法在最近一次渲染輸出(提交到DOM節(jié)點(diǎn))之前調(diào)用。它使得組件能在發(fā)生更改之前從DOM中捕獲一些信息(如滾動(dòng)位置等)。此生命周期方法的任何返回值將作為參數(shù)傳遞給componentDidUpdate()。此用法并不常見，但它可能出現(xiàn)在UI 處理中，如以特殊方式處理滾動(dòng)位置的聊天線程等。
• 函數(shù)組件無(wú)該方法對(duì)應(yīng)的hooks。

生命周期，更新階段：componentDidUpdate VS 無(wú)

• 組件更新后會(huì)立即調(diào)用該方法，首次渲染不會(huì)調(diào)用。當(dāng)組件更新后，可以在此處對(duì)DOM進(jìn)行操作。注意：在該方法中慎用setState，如果要用必須將其包裹在條件語(yǔ)句里。
• 函數(shù)組件無(wú)該方法對(duì)應(yīng)的hooks，因?yàn)镽eact本身設(shè)計(jì)是減少直接操作DOM，在React中除了useRef外直接操作DOM的場(chǎng)景很少，函數(shù)組件沒有該方法對(duì)應(yīng)的hooks不算什么問(wèn)題。

生命周期，卸載階段：componentWillUnmount VS useEffect

• 該方法會(huì)在組件卸載及銷毀之前直接調(diào)用。在此方法中執(zhí)行必要的清理操作，例如：清除計(jì)時(shí)器、取消網(wǎng)絡(luò)請(qǐng)求或清除訂閱等。
• 函數(shù)組件有useEffect。

其他，錯(cuò)誤邊界：componentDidCatch、static getDerivedStateFromError VS 無(wú)

• 在類組件中定義了static getDerivedStateFromError或componentDidCatch這兩個(gè)生命周期方法中的任意一個(gè)或兩個(gè)時(shí)，那么它就變成一個(gè)錯(cuò)誤邊界。當(dāng)拋出錯(cuò)誤后，請(qǐng)使用static getDerivedStateFromError渲染備用UI，使用componentDidCatch打印錯(cuò)誤信息。
• 函數(shù)組件無(wú)錯(cuò)誤邊界對(duì)應(yīng)的hooks

三、總結(jié)

函數(shù)組件和類組件各有優(yōu)勢(shì)。類組件功能最為完備和強(qiáng)大，某些特殊用途(如錯(cuò)誤邊界)組件只能寫成類式組件。函數(shù)組件沒有this困擾且代碼簡(jiǎn)潔，大部分的普通組件都可以寫成函數(shù)組件。

到此這篇關(guān)于React函數(shù)組件與類組件使用及優(yōu)劣對(duì)比的文章就介紹到這了,更多相關(guān)React函數(shù)組件與類組件 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論