React中Hooks是什么

這篇文章給大家分享的是有關React中Hooks是什么的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

什么是 Hooks

Hooks 譯為鉤子，Hooks 就是在函數組件內，負責鉤進外部功能的函數。

React 提供了一些常用鉤子，React 也支持自定義鉤子，這些鉤子都是用于為函數引入外部功能。

當我們在組件中，需要引入外部功能時，就可以使用 React 提供的鉤子，或者自定義鉤子。

比如在組件內引入可管理 state 的功能，就可以使用 useState 函數，下文會詳細介紹 useState 的用法。

為什么要用 Hooks

使用 Hooks 有 2 大原因：

• 簡化邏輯復用；

• 讓復雜組件更易理解。

1. 簡化邏輯復用

在 Hooks 出現之前，React 必須借用高階組件、render props 等復雜的設計模式才能實現邏輯的復用，但是高階組件會產生冗余的組件節點，讓調試更加復雜。

Hooks 讓我們可以在無需修改組件結構的情況下復用狀態邏輯，下文會詳細介紹自定義 Hooks 的用法。

2. 讓復雜組件更易理解

在 class 組件中，同一個業務邏輯的代碼分散在組件的不同生命周期函數中，而 Hooks 能夠讓針對同一個業務邏輯的代碼聚合在一塊，讓業務邏輯清晰地隔離開，讓代碼更加容易理解和維護。

四、常用的 Hooks

1. useState

useState 是允許你在 React 函數組件中添加 state 的 Hook。

使用示例如下：

import React, { useState } from 'react';

function Example() {
  // 聲明一個叫 "count" 的 state 變量
  const [count, setCount] = useState(0);
  // ...

以上代碼聲明了一個初始值為 0 的 state 變量 count，通過調用 setCount 來更新當前的 count。

2. useEffect

useEffect 可以讓你在函數組件中執行副作用操作。

副作用是指一段和當前執行結果無關的代碼，常用的副作用操作如數據獲取、設置訂閱、手動更改 React 組件中的 DOM。

useEffect 可以接收兩個參數，代碼如下：

useEffect(callback, dependencies)

第一個參數是要執行的函數 callback，第二個參數是可選的依賴項數組 dependencies。

其中依賴項是可選的，如果不指定，那么 callback 就會在每次函數組件執行完后都執行；如果指定了，那么只有依賴項中的值發生變化的時候，它才會執行。

使用示例如下：

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;

    return () => {
        // 可用于做清除，相當于 class 組件的 componentWillUnmount
    }

  }, [count]); // 指定依賴項為 count，在 count 更新時執行該副作用
  // ...

以上代碼通過 useEffect 實現了當依賴項 count 更新時，執行副作用函數，并通過返回回調函數清除上一次的執行結果。

另外，useEffect 提供了四種執行副作用的時機：

• 每次 render 后執行：不提供第二個依賴項參數。比如 useEffect(() => {})；

• 僅第一次 render 后執行：提供一個空數組作為依賴項。比如 useEffect(() => {}, [])；

• 第一次以及依賴項發生變化后執行：提供依賴項數組。比如 useEffect(() => {}, [deps])；

• 組件 unmount 后執行：返回一個回調函數。比如 useEffect() => { return () => {} }, [])。

3. useCallback

useCallback 定義的回調函數只會在依賴項改變時重新聲明這個回調函數，這樣就保證了組件不會創建重復的回調函數。而接收這個回調函數作為屬性的組件，也不會頻繁地需要重新渲染。

使用示例如下：

const memoizedCallback = useCallback(() => {
  doSomething(a, b)
}, [a, b])

以上代碼在依賴項 a、b 發生變化時，才會重新聲明回調函數。

4. useMemo

useMemo 定義的創建函數只會在某個依賴項改變時才重新計算，有助于每次渲染時不會重復的高開銷的計算，而接收這個計算值作為屬性的組件，也不會頻繁地需要重新渲染。

使用示例如下：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

以上代碼在依賴項 a、b 發生變化時，才會重新計算。

5. useRef

useRef 返回一個 ref 對象，這個 ref 對象在組件的整個生命周期內持續存在。

他有 2 個用處：

• 保存 DOM 節點的引用；

• 在多次渲染之間共享數據。

保存 DOM 節點的引入使用示例如下：

function TextInputWithFocusButton() {
  const inputEl = useRef(null)
  const onButtonClick = () => {
    // `current` 指向已掛載到 DOM 上的文本輸入元素
    inputEl.current.focus()
  }
  return (
    <>
      <input ref={inputEl} type='text' />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  )
}

以上代碼通過 useRef 創建了 ref 對象，保存了 DOM 節點的引用，可以對 ref.current 做 DOM 操作。

在多次渲染之間共享數據示例如下：

import React, { useState, useCallback, useRef } from 'react'

export default function Timer() {
  // 定義 time state 用于保存計時的累積時間
  const [time, setTime] = useState(0)

  // 定義 timer 這樣一個容器用于在跨組件渲染之間保存一個變量
  const timer = useRef(null)

  // 開始計時的事件處理函數
  const handleStart = useCallback(() => {
    // 使用 current 屬性設置 ref 的值
    timer.current = window.setInterval(() => {
      setTime((time) => time + 1)
    }, 100)
  }, [])

  // 暫停計時的事件處理函數
  const handlePause = useCallback(() => {
    // 使用 clearInterval 來停止計時
    window.clearInterval(timer.current)
    timer.current = null
  }, [])

  return (
    <div>
      {time / 10} seconds.
      <br />
      <button onClick={handleStart}>Start</button>
      <button onClick={handlePause}>Pause</button>
    </div>
  )
}

以上代碼通過 useRef 創建了一個變量名為 timer 的 ref 對象，該對象可以在跨組件渲染時調用，在開始計時時新建計時器，在暫停計時時清空計時器。

6. useContext

useContext 用于接收一個 context 對象并返回該 context 的值，可以實現跨層級的數據共享。

示例如下：

// 創建一個 context 對象
const MyContext = React.createContext(initialValue)
function App() {
  return (
    // 通過 Context.Provider 傳遞 context 的值
    <MyContext.Provider value='1'>
      <Container />
    </MyContext.Provider>
  )
}

function Container() {
  return <Test />
}

function Test() {
  // 獲取 Context 的值
  const theme = useContext(MyContext) // 1
  return <div></div>
}

以上代碼通過 useContext 取得了 App 組件中定義的 Context，做到了跨層次組件的數據共享。

7. useReducer

useReducer 用來引入 Reducer 功能。

示例如下：

const [state, dispatch] = useReducer(reducer, initialState)

它接受 Reducer 函數和狀態的初始值作為參數，返回一個數組。數組的第一個成員是狀態的當前值，第二個成員是發送 action 的 dispatch 函數。

五、自定義 Hooks

通過自定義 Hooks，可以將組件邏輯提取到可重用的函數中。

1. 如何創建自定義 Hooks？

自定義 Hooks 就是函數，它有 2 個特征區分于普通函數：

• 名稱以 “use” 開頭；

• 函數內部調用其他的 Hook。

示例如下：

import { useState, useCallback } from 'react'

function useCounter() {
  // 定義 count 這個 state 用于保存當前數值
  const [count, setCount] = useState(0)
  // 實現加 1 的操作
  const increment = useCallback(() => setCount(count + 1), [count])
  // 實現減 1 的操作
  const decrement = useCallback(() => setCount(count - 1), [count])
  // 重置計數器
  const reset = useCallback(() => setCount(0), [])

  // 將業務邏輯的操作 export 出去供調用者使用
  return { count, increment, decrement, reset }
}

// 組件1
function MyComponent1() {
  const { count, increment, decrement, reset } = useCounter()
}

// 組件2
function MyComponent2() {
  const { count, increment, decrement, reset } = useCounter()
}

以上代碼通過自定義 Hooks useCounter，輕松的在 MyComponent1 組件和 MyComponent2 組件之間復用業務邏輯。

2. 自定義 Hooks 庫 - react-use

React 官方提供了 react-use 庫，其中封裝了大量可直接使用的自定義 Hooks，幫助我們簡化組件內部邏輯，提高代碼可讀性、可維護性。

其中我們常用的自定義 Hooks 有：

• useLocation 和 useSearchParam：跟蹤頁面導航欄位置狀態；

• useScroll：跟蹤 HTML 元素的滾動位置；

• useScrolling：跟蹤 HTML 元素是否正在滾動；

• useAsync, useAsyncFn, and useAsyncRetry：解析一個 async 函數；

• useTitle：設置頁面的標題。

感謝各位的閱讀！關于“React中Hooks是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！