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

創(chuàng)新互聯(lián)是一家專業(yè)提供甘谷企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站制作、網(wǎng)站設計、HTML5建站、小程序制作等業(yè)務。10年已為甘谷眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

什么是 Hooks

Hooks 譯為鉤子，Hooks 就是在函數(shù)組件內(nèi)，負責鉤進外部功能的函數(shù)。

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

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

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

為什么要用 Hooks

使用 Hooks 有 2 大原因：

• 簡化邏輯復用；

• 讓復雜組件更易理解。

1. 簡化邏輯復用

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

Hooks 讓我們可以在無需修改組件結(jié)構(gòu)的情況下復用狀態(tài)邏輯，下文會詳細介紹自定義 Hooks 的用法。

2. 讓復雜組件更易理解

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

四、常用的 Hooks

1. useState

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

使用示例如下：

import React, { useState } from 'react';

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

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

2. useEffect

useEffect 可以讓你在函數(shù)組件中執(zhí)行副作用操作。

副作用是指一段和當前執(zhí)行結(jié)果無關(guān)的代碼，常用的副作用操作如數(shù)據(jù)獲取、設置訂閱、手動更改 React 組件中的 DOM。

useEffect 可以接收兩個參數(shù)，代碼如下：

useEffect(callback, dependencies)

第一個參數(shù)是要執(zhí)行的函數(shù) callback，第二個參數(shù)是可選的依賴項數(shù)組 dependencies。

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

使用示例如下：

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 更新時執(zhí)行該副作用
  // ...

以上代碼通過 useEffect 實現(xiàn)了當依賴項 count 更新時，執(zhí)行副作用函數(shù)，并通過返回回調(diào)函數(shù)清除上一次的執(zhí)行結(jié)果。

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

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

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

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

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

3. useCallback

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

使用示例如下：

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

以上代碼在依賴項 a、b 發(fā)生變化時，才會重新聲明回調(diào)函數(shù)。

4. useMemo

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

使用示例如下：

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

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

5. useRef

useRef 返回一個 ref 對象，這個 ref 對象在組件的整個生命周期內(nèi)持續(xù)存在。

他有 2 個用處：

• 保存 DOM 節(jié)點的引用；

• 在多次渲染之間共享數(shù)據(jù)。

保存 DOM 節(jié)點的引入使用示例如下：

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 創(chuàng)建了 ref 對象，保存了 DOM 節(jié)點的引用，可以對 ref.current 做 DOM 操作。

在多次渲染之間共享數(shù)據(jù)示例如下：

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

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

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

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

  // 暫停計時的事件處理函數(shù)
  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 創(chuàng)建了一個變量名為 timer 的 ref 對象，該對象可以在跨組件渲染時調(diào)用，在開始計時時新建計時器，在暫停計時時清空計時器。

6. useContext

useContext 用于接收一個 context 對象并返回該 context 的值，可以實現(xiàn)跨層級的數(shù)據(jù)共享。

示例如下：

// 創(chuàng)建一個 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，做到了跨層次組件的數(shù)據(jù)共享。

7. useReducer

useReducer 用來引入 Reducer 功能。

示例如下：

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

它接受 Reducer 函數(shù)和狀態(tài)的初始值作為參數(shù)，返回一個數(shù)組。數(shù)組的第一個成員是狀態(tài)的當前值，第二個成員是發(fā)送 action 的 dispatch 函數(shù)。

五、自定義 Hooks

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

1. 如何創(chuàng)建自定義 Hooks？

自定義 Hooks 就是函數(shù)，它有 2 個特征區(qū)分于普通函數(shù)：

• 名稱以 “use” 開頭；

• 函數(shù)內(nèi)部調(diào)用其他的 Hook。

示例如下：

import { useState, useCallback } from 'react'

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

  // 將業(yè)務邏輯的操作 export 出去供調(diào)用者使用
  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 組件之間復用業(yè)務邏輯。

2. 自定義 Hooks 庫 - react-use

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

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

• useLocation 和 useSearchParam：跟蹤頁面導航欄位置狀態(tài)；

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

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

• useAsync, useAsyncFn, and useAsyncRetry：解析一個 async 函數(shù)；

• useTitle：設置頁面的標題。

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

文章名稱：React中Hooks是什么
當前網(wǎng)址：http://aaarwkj.com/article42/pdhghc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、企業(yè)建站、網(wǎng)站設計公司、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)