React是一款非常流行的JavaScript庫，它提供了許多Hooks，用于管理函數(shù)組件的狀態(tài)和生命周期。下面是React的每個Hooks的使用場景和示例：

No1、useState

useState用于在函數(shù)組件中管理狀態(tài)。
它返回一個包含當(dāng)前狀態(tài)和一個更新狀態(tài)的函數(shù)的數(shù)組。更新狀態(tài)的函數(shù)可以接受一個新的值，并更新狀態(tài)。

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Count: {count}</button>;
}

No2、useEffect

useEffect用于在函數(shù)組件中處理副作用。
它接受兩個參數(shù)：一個副作用函數(shù)和一個依賴數(shù)組。當(dāng)依賴數(shù)組中的任何一個值發(fā)生變化時，副作用函數(shù)將被調(diào)用。

import React, { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(time + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [time]);

  return <div>Time: {time}</div>;
}

No3、useContext

useContext用于在函數(shù)組件中使用上下文。
它接受一個上下文對象并返回上下文的當(dāng)前值。當(dāng)上下文的值發(fā)生變化時，函數(shù)組件將重新渲染。

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function Header() {
  const theme = useContext(ThemeContext);

  return (
    <header style={{ background: theme }}>
      <h1>My App</h1>
    </header>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
    </ThemeContext.Provider>
  );
}

No4、useReducer

useReducer用于在函數(shù)組件中管理復(fù)雜的狀態(tài)。
它接受一個reducer函數(shù)和一個初始狀態(tài)，并返回一個包含當(dāng)前狀態(tài)和一個派發(fā)操作的數(shù)組。派發(fā)操作將一個操作對象發(fā)送到reducer函數(shù)中，并返回一個新的狀態(tài)。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  function handleIncrement() {
    dispatch({ type: 'increment' });
  }

  function handleDecrement() {
    dispatch({ type: 'decrement' });
  }

  return (
    <>
      <button onClick={handleIncrement}>+</button>
      <span>{state.count}</span>
      <button onClick={handleDecrement}>-</button>
    </>
  );
}

No5、useCallback

useCallback用于在函數(shù)組件中緩存回調(diào)函數(shù)。
它接受一個回調(diào)函數(shù)和一個依賴數(shù)組，并返回一個緩存的回調(diào)函數(shù)。當(dāng)依賴數(shù)組中的任何一個值發(fā)生變化時，緩存的回調(diào)函數(shù)將被更新。

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

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <>
      <Child onClick={handleClick} />
      <span>Count: {count}</span>
    </>
  );
}

function Child({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

No6、useMemo

useMemo用于在函數(shù)組件中緩存計算結(jié)果。
它接受一個計算函數(shù)和一個依賴數(shù)組，并返回一個緩存的計算結(jié)果。當(dāng)依賴數(shù)組中的任何一個值發(fā)生變化時，計算函數(shù)將被重新計算。

import React, { useMemo } from 'react';

function ExpensiveComponent({ value1, value2 }) {
  const result = useMemo(() => {
    console.log('calculating result');
       return value1 * value2;
  }, [value1, value2]);

  return <div>Result: {result}</div>;
}

No7、useRef

useRef用于在函數(shù)組件中引用DOM元素或其他值。
它返回一個包含可變引用的對象。當(dāng)在函數(shù)組件中傳遞該對象時，它將保留其引用，即使組件重新渲染。

import React, { useRef } from 'react';

function Input() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus input</button>
    </>
  );
}

以上是React的每個Hooks的使用場景和示例。這些Hooks可以幫助我們更加方便地管理狀態(tài)和生命周期，并且提高代碼的可讀性和可維護性。

總結(jié)

useState：用于在函數(shù)組件中管理狀態(tài)。可以用于跟蹤和更新組件的內(nèi)部狀態(tài)，例如表單輸入、開關(guān)狀態(tài)、計數(shù)器等。

useEffect：用于處理副作用操作，例如數(shù)據(jù)獲取、訂閱事件、DOM操作等?？梢栽诮M件渲染后執(zhí)行一些操作，也可以在組件卸載前進行清理操作。

useContext：用于在組件之間共享數(shù)據(jù)?？梢詣?chuàng)建一個全局的上下文，并在組件樹中的多個組件中訪問和更新該上下文。

useReducer：用于管理復(fù)雜的狀態(tài)邏輯。可以用于替代useState，特別適用于具有復(fù)雜狀態(tài)轉(zhuǎn)換的組件，例如有限狀態(tài)機、游戲狀態(tài)等。

useCallback：用于性能優(yōu)化?？梢跃彺婧瘮?shù)實例，以便在依賴項不變的情況下避免不必要的函數(shù)重新創(chuàng)建，提高組件的性能。

useMemo：用于性能優(yōu)化?？梢跃彺嬗嬎憬Y(jié)果，以便在依賴項不變的情況下避免重復(fù)計算，提高組件的性能。

useRef：用于在函數(shù)組件中保存可變值的引用?？梢杂糜诒４鍰OM元素的引用、保存上一次渲染的值等。文章來源地址http://www.zghlxwxcb.cn/news/detail-489938.html

到了這里，關(guān)于React的10個常用Hooks及使用場景的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！