一文帶你搞懂React的函數(shù)組件

更新時間：2023年06月16日 09:30:05 作者：何遇er

React中函數(shù)式組件的基本意義是,組件實際上是一個函數(shù),不是類,下面就來給大家介紹一下關于React中函數(shù)組件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

函數(shù)組件與類組件有什么區(qū)別？如果你對 React Hooks 有基本了解，在這里請拋開 React Hooks 回答這個問題。你的答案是函數(shù)組件沒有自己的 state，也沒有與類組件類似的生命周期概念嗎？在本小節(jié)不討論 state 和生命周期，先看一個函數(shù)調(diào)用的示例，代碼如下：

function getName(params: {name: string}) {
    const count = 0
    return params.name + '-' + count
}
getName({name: '何遇'})
getName({name: 'Bella'})

getName 是一個純函數(shù)，不產(chǎn)生任何副作用，當執(zhí)行結(jié)束，它的執(zhí)行上下文和活動對象會被銷毀，前后兩次調(diào)用互不影響。對于不使用任何 Hooks 的函數(shù)組件而言，它也是純函數(shù)，那么函數(shù)組件前后兩次渲染你還能得出與前后兩次調(diào)用 getName 函數(shù)類似的結(jié)論嗎？

要對比函數(shù)組件和類組件的區(qū)別，下面用類組件和函數(shù)組件實現(xiàn)相同的功能，即：在瀏覽器顯示一個按鈕，點擊按鈕調(diào)用 props 中的方法去更新父組件的 state，隔 1s 之后打印 props.count 的值。類組件的代碼如下：

class ClassCom extends React.Component<Props, never> {
    render(): React.ReactNode {
        return (
            <button onClick={this.onClick}>這是類組件：刷新瀏覽器打開開發(fā)者工具再點擊</button>
        )
    }

    onClick = () => {
	 this.props.updateCount()
        // 隔1s之后打印this.props.count的值
        setTimeout(() => {
            console.log(this.props.count)
        }, 1000);
    }
}

函數(shù)組件的代碼如下：

function FuncCom(props: Props) {
    const onClick = () => {
        props.updateCount()
    // 隔1s之后打印props.count的值
        setTimeout(() => {
            console.log(props.count)
        }, 1000);
    }
    return (
        <button onClick={onClick}>這是函數(shù)組件：刷新瀏覽器打開開發(fā)者工具再點擊</button>
    )
}

FuncCom 和 ClassCom 組件的父級相同，代碼如下：

class FuncComVsClassCom extends React.Component<{},State> {
    state: State = {count: 0}
    render(): React.ReactNode {
        return (
            <>
                <FuncCom 
                    count={this.state.count}
                    updateCount={this.updateCount}
                />
                <ClassCom
                    count={this.state.count}
                    updateCount={this.updateCount}
                />
            </>
        )
    }
    updateCount = () => {
        this.setState((prevSate: State) => {
            return {count: prevSate.count + 1}
        })
    }
}

觀察上述代碼可以發(fā)現(xiàn)傳遞給 FuncCom 和 ClassCom 組件的 props 一樣，但在瀏覽器界面上點擊各自的按鈕，開發(fā)者工具打印的結(jié)果不一樣，F(xiàn)uncCom 組件打印的值為 0，ClassCom 組件打印的值為 1。

現(xiàn)在揭曉答案，點擊 FuncCom 和 ClassCom 組件中的按鈕都會使它們的父級重新渲染，從而導致 FuncCom 和 ClassCom 重新渲染。ClassCom 是類組件，它重新渲染不會創(chuàng)建新的組件實例，在 setTimeout 的回調(diào)函數(shù)中 this.props 拿到了最新的值。FuncCom 是函數(shù)組件，它重新渲染會創(chuàng)建新的執(zhí)行環(huán)境和活動變量，所以在其中訪問 props，不論何時拿到的都是調(diào)用 FuncCom 時傳遞給它的參數(shù)，該參數(shù)不可變。

FuncCom 和 ClassCom 組件打印出不同的值，原因在于 props 不可變但類組件實例是可變的，訪問 this.props 將始終得到類組件最新的 props。將ClassCom 的 this.props 賦值給一個變量，在 setTimeout 的回調(diào)函數(shù)中，用該變量訪問 count 屬性能讓兩個組件打印出相同的值。

后續(xù)介紹React Hooks時將繼續(xù)介紹函數(shù)組件只得到本次渲染時 props 和 state 的值。

到此這篇關于一文帶你搞懂React的函數(shù)組件的文章就介紹到這了,更多相關React函數(shù)組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: