React 組件在其生命周期中有多個(gè)階段，每個(gè)階段都有特定的生命周期函數(shù)（Lifecycle Methods）。這些函數(shù)允許你在組件的不同階段執(zhí)行特定的操作。以下是 React 組件生命周期的主要階段及其對(duì)應(yīng)的生命周期函數(shù)，并結(jié)合了 React 16.3+ 的變化。

---

一、掛載階段（Mounting）

在組件首次被掛載到 DOM 時(shí)會(huì)觸發(fā)的一系列生命周期函數(shù)。

• constructor(props)：

  • 初始化組件的狀態(tài)和綁定事件處理器。
  • 注意：盡量避免在此進(jìn)行復(fù)雜的計(jì)算或副作用操作。

  constructor(props) {super(props);this.state = { count: 0 };this.handleClick = this.handleClick.bind(this); // 綁定事件處理器
  }
  

• static getDerivedStateFromProps(nextProps, prevState)：

  • 在組件掛載和更新之前調(diào)用，用于根據(jù)新的 props 更新 state。
  • 返回一個(gè)對(duì)象來(lái)更新 state，或者返回 null 表示不需要更新。

  static getDerivedStateFromProps(nextProps, prevState) {if (nextProps.value !== prevState.value) {return { value: nextProps.value };}return null;
  }
  

• render()：

  • 必須實(shí)現(xiàn)的方法，用于渲染組件的虛擬 DOM。
  • 不應(yīng)該在這里進(jìn)行副作用操作（如 API 調(diào)用、DOM 操作等）。

  render() {return <div>{this.state.count}</div>;
  }
  

• componentDidMount()：

  • 組件掛載完成后調(diào)用，通常用于發(fā)起網(wǎng)絡(luò)請(qǐng)求、訂閱事件等副作用操作。

  componentDidMount() {fetch('/api/data').then(response => this.setState({ data: response.data }));
  }
  

---

二、更新階段（Updating）

當(dāng)組件的 props 或 state 發(fā)生變化時(shí)，會(huì)觸發(fā)一系列更新階段的生命周期函數(shù)。

• static getDerivedStateFromProps(nextProps, prevState)：

  • 同掛載階段的 getDerivedStateFromProps，用于根據(jù)新的 props 更新 state。

• shouldComponentUpdate(nextProps, nextState)：

  • 判斷組件是否需要重新渲染。返回 false 可以阻止不必要的重新渲染，從而優(yōu)化性能。

  shouldComponentUpdate(nextProps, nextState) {return nextState.count !== this.state.count;
  }
  

• render()：

  • 同掛載階段的 render() 方法，用于渲染組件的虛擬 DOM。

• getSnapshotBeforeUpdate(prevProps, prevState)：

  • 在最新的渲染輸出提交給 DOM 之前調(diào)用，可以捕獲一些 DOM 信息（如滾動(dòng)位置），以便在 componentDidUpdate 中使用。

  getSnapshotBeforeUpdate(prevProps, prevState) {if (prevProps.items.length < this.props.items.length) {return this.listRef.scrollHeight;}return null;
  }
  

• componentDidUpdate(prevProps, prevState, snapshot)：

  • 組件更新完成后調(diào)用，可以在此進(jìn)行副作用操作（如網(wǎng)絡(luò)請(qǐng)求、DOM 操作等）。

  componentDidUpdate(prevProps, prevState, snapshot) {if (snapshot !== null) {this.listRef.scrollTop = this.listRef.scrollHeight - snapshot;}
  }
  

---

三、卸載階段（Unmounting）

當(dāng)組件從 DOM 中卸載時(shí)會(huì)觸發(fā)的生命周期函數(shù)。

• componentWillUnmount()：

  • 組件卸載和銷(xiāo)毀之前立刻調(diào)用，通常用于清理工作，如取消網(wǎng)絡(luò)請(qǐng)求、清除定時(shí)器、移除事件監(jiān)聽(tīng)器等。

  componentWillUnmount() {clearInterval(this.timerID);this.subscription.remove();
  }
  

---

四、錯(cuò)誤處理階段（Error Handling）

當(dāng)組件拋出錯(cuò)誤時(shí)會(huì)觸發(fā)的生命周期函數(shù)。

• static getDerivedStateFromError(error)：

  • 當(dāng)子組件拋出錯(cuò)誤時(shí)調(diào)用，用于更新 state 以便顯示錯(cuò)誤 UI。

  static getDerivedStateFromError(error) {return { hasError: true };
  }
  

• componentDidCatch(error, info)：

  • 當(dāng)子組件拋出錯(cuò)誤時(shí)調(diào)用，通常用于記錄錯(cuò)誤日志或上報(bào)錯(cuò)誤。

  componentDidCatch(error, info) {logErrorToService(error, info);
  }
  

---

五、React 16.3+ 生命周期變化

隨著 React 16.3+ 的發(fā)布，部分生命周期函數(shù)被廢棄或新增了一些新的生命周期函數(shù)：

• 廢棄的生命周期：

  • componentWillMount（建議使用 componentDidMount）
  • componentWillReceiveProps（建議使用 static getDerivedStateFromProps）
  • componentWillUpdate（建議使用 getSnapshotBeforeUpdate）

• 新增的生命周期：

  • getDerivedStateFromProps：用于在掛載和更新前根據(jù) props 更新 state。
  • getSnapshotBeforeUpdate：在最新的渲染輸出提交給 DOM 之前調(diào)用，捕獲一些 DOM 信息。

---

鉤子函數(shù)（Hooks）

隨著 React Hooks 的引入，許多類(lèi)組件的生命周期方法可以通過(guò)鉤子函數(shù)來(lái)實(shí)現(xiàn)：

• useEffect：

  • 相當(dāng)于 componentDidMount、componentDidUpdate 和 componentWillUnmount 的組合。

  useEffect(() => {// 類(lèi)似 componentDidMount 和 componentDidUpdatefetchData().then(data => setState({ data }));// 清理函數(shù)，類(lèi)似 componentWillUnmountreturn () => {cleanup();};
  }, [props.userID]); // 依賴(lài)項(xiàng)數(shù)組
  

• useLayoutEffect：

  • 類(lèi)似 useEffect，但在所有 DOM 變更之后同步調(diào)用，適用于需要同步執(zhí)行的副作用操作。

• useMemo 和 useCallback：

  • 用于性能優(yōu)化，類(lèi)似于 shouldComponentUpdate。

---

總結(jié)

React 組件的生命周期分為三個(gè)主要階段：掛載（Mounting）、更新（Updating）和卸載（Unmounting）。每個(gè)階段都有相應(yīng)的生命周期函數(shù)，幫助開(kāi)發(fā)者在組件的不同生命周期中執(zhí)行特定的操作。

• 掛載階段：初始化狀態(tài)、渲染組件、發(fā)起數(shù)據(jù)請(qǐng)求等。
• 更新階段：判斷是否需要重新渲染、捕獲 DOM 信息、執(zhí)行副作用操作等。
• 卸載階段：清理資源、取消訂閱等。

通過(guò)合理使用這些生命周期函數(shù)，可以構(gòu)建出更加健壯和高效的 React 應(yīng)用程序。同時(shí)，現(xiàn)代 React 開(kāi)發(fā)中推薦使用 Hooks 來(lái)替代類(lèi)組件的生命周期方法，以簡(jiǎn)化代碼并提高可維護(hù)性。

理解這些生命周期函數(shù)及其作用，不僅有助于編寫(xiě)高效且易于維護(hù)的 React 組件，還能更好地應(yīng)對(duì)復(fù)雜的應(yīng)用場(chǎng)景。