探究React Hooks生命周期的實現原理與使用指南

React Hooks 是 React16.8 的新增特性，它極大程度上改變了用 class 去編寫組件的方式，讓我們可以在 function 組件內使用 state、生命周期等 class 組件的能力。Hooks 是一個非常強大的工具，可以讓 React Hook 愛好者們寫出更加簡潔、高效的代碼，我們將在此探究 React Hooks 的實現原理和使用指南。

一、React Hooks 簡介

React Hooks 在 React16.8 中首度亮相，Hooks 可以讓我們在 function 組件內部添加狀態，不再需要使用 class 來編寫組件。Hooks 不僅僅是讓 React 更加簡潔，而且還能讓我們實現很多功能，比如 useEffect 可以讓我們監聽組件的生命周期，使用 state 可以讓我們自定義組件的狀態。

React Hooks 最大的好處就是讓 function 組件擁有了同 class 組件一樣的能力，而且使用起來更加簡單方便。React Hooks 包括了幾個核心特性：

1. useState： 聲明和使用 state 值
2. useEffect: 相當於 componentDidMount, componentDidUpdate 和 componentWillUnmount 這三個生命周期的組合
3. useContext：動態獲取 React context
4. useReducer： 在組件中使用Reducer
5. useCallback和useMemo，用作性能優化
6. useRef： 聲明ref
7. useImperativeHandle: 給自定義組件暴露組件內函數
8. useLayoutEffect：在DOM更新時同步執行副作用

二、React Hooks 原理

正如上面所提到的，Hooks 的出現主要是為了解決 function 組件的痛點，讓function 組件擁有類似 class 組件的能力。那麼想要知道 Hooks 的原理，首先我們需要知道 class 組件是怎麼實現的。在 class 組件內部，有一個 state 屬性，用來存放組件內部狀態的值，state 的值改變後，重新渲染組件。

如果是function 組件，我們知道這個組件中沒有state屬性，也就無法直接存儲組件內部狀態的值，那麼在function 組件中為什麼能使用 Hooks 了呢？ 這是因為React16.8的鉤子中增加了一些特殊的鉤子，這些鉤子類似於在 class 組件中的 state 屬性，可以用來存儲組件狀態，並且修改這些鉤子的值會觸發組件的重新渲染。

useState 鉤子是最常用的一個，它通過數組的方式來存儲 state 值，返回值是一個長度為 2 的數組，第一個值是狀態的當前值，第二個值是用於更新狀態的函數。每當狀態改變時，useState 都會重新渲染組件。

三、React Hooks 實踐

下面是使用 React Hooks 實現一個計數器應用，代碼如下所示：

import React, { useState } from "react";
function Count() {
 const [count, setCount] = useState(0);
 return (
You clicked {count} times
   setCount(count + 1)}>Click me
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/238542.html