詳解React中函數(shù)式組件與類組件的不同

更新時間：2023年09月13日 10:17:59 作者：圓圓圈圈扁扁

React?函數(shù)式組件與類組件的主要區(qū)別在于它們的定義和聲明方式以及它們之間的一些特性,所以本文就詳細的給大家講講React中函數(shù)式組件與類組件有何不同,需要的朋友可以參考下

Function Component 與 Class Component 有何不同

文章核心觀點：

Function components capture the rendered values.函數(shù)式組件捕獲的是已經(jīng)被render的值

解釋一下：

請看代碼：

Class component

class ProfilePage extends React.Component {
  showMessage = () => {
    alert('Followed ' + this.props.user);
  };
  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };
  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

Function Component

function ProfilePage(props) {
  const showMessage = () => {
    alert('Followed ' + props.user);
  };
  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };
  return (
    <button onClick={handleClick}>Follow</button>
  );
}

pjqnl16lm7 - CodeSandbox效果：

LiveDemo

這里有bug：

點擊在Sophie的profile的時候，follow這個人，然后在三秒之內(nèi)快速切換到另一個頁面（dan）。Function彈出框的效果是follow sophie，class 彈出框 follow dan。

所以說，function 是我們想要的效果，但是class 不是我們想要的效果。

為什么會出現(xiàn)這種情況呢？

Class Component:

在Class Component中，this.props是通過類的實例來訪問的，它指向組件的props。當setTimeout中的this.showMessage函數(shù)被調(diào)用時，它仍然引用了Class Component的實例，因此它可以訪問最新的this.props，這是為什么你看到Class Component中的this.props.user是最新的值的原因。

Function Component:

在Function Component中，props是通過函數(shù)的參數(shù)傳遞的。當setTimeout中的showMessage函數(shù)被調(diào)用時，它只是一個普通的JavaScript函數(shù)，沒有與Function Component的實例關(guān)聯(lián)，因此它只能訪問在函數(shù)定義時傳遞給它的props，而不是最新的props值。

React 文檔中描述的 props 不是不可變（Immutable）數(shù)據(jù)嗎？什么是不可變數(shù)據(jù)？

React 中的 props 通常被描述為不可變（immutable）數(shù)據(jù)，這意味著一旦 props 被傳遞給組件，它們不應(yīng)該在組件內(nèi)部被直接修改。這種不可變性有助于確保組件的可預(yù)測性和穩(wěn)定性，因為它防止了組件在不知情的情況下更改外部傳遞的數(shù)據(jù)。

然而，有一點需要注意：props 對象本身是不可變的，但傳遞給 props 的值可能是可變的。如果你將一個可變對象（例如一個數(shù)組或?qū)ο螅┳鳛?props 傳遞給組件，那么這個對象的內(nèi)容可以在組件內(nèi)部被修改。這并不違反 React 的不可變性原則，因為 React 控制的是 props 對象的不可變性，而不控制傳遞給 props 的值的不可變性。

function ParentComponent() {
  const mutableArray = [1, 2, 3];
  return <ChildComponent items={mutableArray} />;
}

在這種情況下，mutableArray 是一個可變的數(shù)組。如果在 ChildComponent 內(nèi)部修改了 items 數(shù)組，它將影響到原始數(shù)組。這并不是 React 的 props 不可變性引起的問題，而是因為 JavaScript 中的對象和數(shù)組是引用類型。如果你希望在 ChildComponent 中不修改原始數(shù)組，可以在內(nèi)部創(chuàng)建副本來操作數(shù)據(jù)，以保持原始數(shù)據(jù)的不可變性。

總之，React 中的 props 本身是不可變的，但你需要注意傳遞給 props 的值的可變性，特別是當傳遞引用類型的值時。在組件內(nèi)部，始終確保遵循不可變性原則，以避免意外的副作用。

有沒有辦法解決這個問題？

class ProfilePage extends React.Component {
  render() {
    // Capture the props!
    const props = this.props;
    // Note: we are *inside render*.
    // These aren't class methods.
    const showMessage = () => {
      alert('Followed ' + props.user);
    };
    const handleClick = () => {
      setTimeout(showMessage, 3000);
    };
    return <button onClick={handleClick}>Follow</button>;
  }
}

通過在 render 方法內(nèi)部創(chuàng)建一個局部變量 props 并將其設(shè)置為 this.props 的值，你捕獲了初始渲染時的 props 值。這意味著 props 變量將包含初始渲染時傳遞給組件的值，不受后續(xù)渲染的影響。

這種方法有時被用來解決在閉包函數(shù)（如 showMessage 和 handleClick 中的函數(shù)）中訪問最新 props 值的需求。由于在函數(shù)內(nèi)部，props 變量是一個常數(shù)（const），所以它將保持對初始 props 值的引用，不會隨后的渲染而改變。

那么我想在Function Component中，如何獲取到最新的數(shù)據(jù)？

使用React的useEffect鉤子，以依賴props的變化來執(zhí)行相應(yīng)的操作。這樣，當props更新時，useEffect內(nèi)的代碼會重新運行，確保你獲取到最新的props值。

import { useEffect } from 'react';
function ProfilePage(props) {
  useEffect(() => {
    // 依賴props的變化，當props更新時，這里的代碼會重新運行
    console.log(props);
  }, [props]);
}

那么在異步的時候，為什么有捕獲到初始值的情況？

Function Components是純函數(shù)，它們的行為在某種程度上類似于閉包。當函數(shù)組件被創(chuàng)建時，它會捕獲當前的作用域（包括props和其他變量）。這意味著在函數(shù)組件內(nèi)部，函數(shù)參數(shù)（包括props）的值在組件的整個生命周期內(nèi)保持不變，即使父組件在此期間重新渲染了。

function MyComponent(props) {
  const someValue = props.someProp;
  setTimeout(() => {
    console.log(someValue); // 這里的someValue是在組件初始渲染時捕獲的值
  }, 3000);
}

在這個示例中，someValue 變量在組件初始渲染時捕獲了 props.someProp 的值，即使在異步操作中訪問 someValue，它仍然保持不變，因為它是在函數(shù)作用域內(nèi)被捕獲的。

這就是為什么在Function Component中，在異步操作中可能會訪問到初始的props值的原因。如果你希望在異步操作中訪問最新的props值，你可以使用React的useEffect Hook來處理副作用，以依賴props的變化來執(zhí)行相應(yīng)的操作。這樣，當props更新時，useEffect內(nèi)的代碼會重新運行，確保你獲取到最新的props值。