React函數(shù)組件與類組件怎么使用

這篇“React函數(shù)組件與類組件怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“React函數(shù)組件與類組件怎么使用”文章吧。

一、類組件的問題

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

原因一、因為this帶來的問題：

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

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}>購買</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}>購買</button>
    }
}


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

這里有在線案例，有興趣的朋友可以在線體驗一下這個案例。

問題描述

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

• 類 組 件 ：當(dāng)用戶選擇蘋果，點擊購買后，再切換瀏覽西瓜，提示信息反饋用戶下單的是西瓜！

問題解析

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

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

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

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

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

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

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

掛載階段：getDerviedStateFromProps VS 無

• 該方法用于在props被傳入后根據(jù)props更新state。

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

掛載階段：UNSAFE_componentWillMount VS 無

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

• 函數(shù)組件可以無視該方法。

掛載階段：componentDidMount VS useEffect

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

• 函數(shù)組件有useEffect。

render：

• 在類組件的render方法中返回要渲染的內(nèi)容。render里不能有副作用和setState！

• 函數(shù)組件的return和類組件render方法的return效果一致。

生命周期，更新階段：UNSAFE_componentWillRerciveProps VS 無

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

• 函數(shù)組件可以無視該方法。

生命周期，更新階段：getDerviedStateFromProps VS 無

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

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

• 該方法返回true表示需要更新、返回false表示無需更新?？稍诖颂砑优袛鄺l件做性能優(yōu)化，另外PureComponent實現(xiàn)原理也相同。

• 函數(shù)組件對應(yīng)的hooks有很多，常用的有memo、useMemo、useCallback，同樣可以做性能優(yōu)化。

生命周期，更新階段：UNSAFE_componentWillUpdate VS 無

• 該方法原來在組件重新渲染之前做一些操作，react官方已將其標(biāo)記為廢棄。

• 函數(shù)組件可以無視該方法。

render：

同掛載階段一樣。

生命周期，更新階段：getSnapshotBeforeUpdate VS 無

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

• 函數(shù)組件無該方法對應(yīng)的hooks。

生命周期，更新階段：componentDidUpdate VS 無

• 組件更新后會立即調(diào)用該方法，首次渲染不會調(diào)用。當(dāng)組件更新后，可以在此處對DOM進(jìn)行操作。注意：在該方法中慎用setState，如果要用必須將其包裹在條件語句里。

• 函數(shù)組件無該方法對應(yīng)的hooks，因為React本身設(shè)計是減少直接操作DOM，在React中除了useRef外直接操作DOM的場景很少，函數(shù)組件沒有該方法對應(yīng)的hooks不算什么問題。

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

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

• 函數(shù)組件有useEffect。

其他，錯誤邊界：componentDidCatch、static getDerivedStateFromError VS 無

• 在類組件中定義了static getDerivedStateFromError或componentDidCatch這兩個生命周期方法中的任意一個或兩個時，那么它就變成一個錯誤邊界。當(dāng)拋出錯誤后，請使用static getDerivedStateFromError渲染備用UI，使用componentDidCatch打印錯誤信息。

• 函數(shù)組件無錯誤邊界對應(yīng)的hooks

以上就是關(guān)于“React函數(shù)組件與類組件怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。