一文帶你深入了解React Hooks！

React中你了解Hooks嗎？這篇文章帶大家來深入了解下React Hooks，希望對大家有幫助！

前言

Hooks 用於不寫 class 的情況下，使用 state 以及其他 React 特性。那麼 Hooks 究竟是什麼，為什麼要使用 Hooks，React 提供了哪些常用 Hooks，以及如何自訂 Hooks 呢，下文將為您一一揭曉。 【相關推薦：Redis影片教學】

什麼是 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=&#39;text&#39; />
      <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=&#39;1&#39;>
      <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-use 官网学习使用。

六、小结

本文从 Hooks 究竟是什么，为什么要使用 Hooks，React 提供了哪些常用 Hooks，以及如何自定义 Hooks 4 个方面介绍了 React Hooks，相信大家对 React Hooks 已经有了更加深入的理解。

希望能对你有所帮助，感谢阅读～

更多编程相关知识，请访问：编程入门！！

以上是一文帶你深入了解React Hooks！的詳細內容。更多資訊請關注PHP中文網其他相關文章！