React?Hooks之useState,useEffect及自定義Hook的最佳實(shí)踐

更新時(shí)間：2025年09月04日 09:03:23 作者：天天進(jìn)步2015

React?Hooks自16.8版本引入以來,徹底改變了我們編寫React組件的方式,本文將深入探討三個(gè)最重要的Hooks：useState、useEffect,以及如何創(chuàng)建和使用自定義Hooks,感興趣的小伙伴可以了解下

React Hooks自16.8版本引入以來，徹底改變了我們編寫React組件的方式。它們讓函數(shù)組件擁有了狀態(tài)管理和生命周期方法的能力，使代碼更加簡(jiǎn)潔、可復(fù)用且易于測(cè)試。本文將深入探討三個(gè)最重要的Hooks：useState、useEffect，以及如何創(chuàng)建和使用自定義Hooks。

1. useState：狀態(tài)管理的基石

基礎(chǔ)用法

useState是最基礎(chǔ)也是最常用的Hook，它讓函數(shù)組件能夠擁有內(nèi)部狀態(tài)。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>當(dāng)前計(jì)數(shù): {count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </div>
  );
}

狀態(tài)更新的最佳實(shí)踐

1. 使用函數(shù)式更新

當(dāng)新狀態(tài)依賴于舊狀態(tài)時(shí)，推薦使用函數(shù)式更新：

// ? 不推薦：直接使用狀態(tài)值
setCount(count + 1);

// ? 推薦：使用函數(shù)式更新
setCount(prevCount => prevCount + 1);

函數(shù)式更新的優(yōu)勢(shì)在于確保獲取到最新的狀態(tài)值，避免閉包陷阱。

2. 合并對(duì)象狀態(tài)

useState不會(huì)自動(dòng)合并對(duì)象，需要手動(dòng)合并：

const [user, setUser] = useState({
  name: '',
  email: '',
  age: 0
});

// ? 錯(cuò)誤：會(huì)覆蓋整個(gè)對(duì)象
setUser({ name: 'Alice' });

// ? 正確：手動(dòng)合并
setUser(prevUser => ({
  ...prevUser,
  name: 'Alice'
}));

3. 初始狀態(tài)的惰性計(jì)算

對(duì)于復(fù)雜的初始狀態(tài)計(jì)算，使用惰性初始化：

// ? 每次渲染都會(huì)執(zhí)行計(jì)算
const [expensiveValue, setExpensiveValue] = useState(computeExpensiveValue());

// ? 只在初始化時(shí)執(zhí)行一次
const [expensiveValue, setExpensiveValue] = useState(() => computeExpensiveValue());

2. useEffect：副作用管理專家

基礎(chǔ)概念

useEffect用于處理組件的副作用，如數(shù)據(jù)獲取、訂閱、手動(dòng)修改DOM等。

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchUser() {
      setLoading(true);
      try {
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error('獲取用戶信息失敗:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchUser();
  }, [userId]); // 依賴數(shù)組

  if (loading) return <div>加載中...</div>;
  if (!user) return <div>用戶未找到</div>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

依賴數(shù)組的深度理解

1. 空依賴數(shù)組

useEffect(() => {
  // 只在組件掛載時(shí)執(zhí)行一次
  console.log('組件已掛載');
}, []); // 空數(shù)組

2. 無依賴數(shù)組

useEffect(() => {
  // 每次渲染后都執(zhí)行
  console.log('每次渲染后執(zhí)行');
}); // 無依賴數(shù)組

3. 有依賴的數(shù)組

useEffect(() => {
  // 當(dāng)count或name發(fā)生變化時(shí)執(zhí)行
  console.log('count或name發(fā)生了變化');
}, [count, name]); // 依賴count和name

清理副作用

對(duì)于需要清理的副作用（如定時(shí)器、訂閱），useEffect可以返回一個(gè)清理函數(shù)：

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    // 返回清理函數(shù)
    return () => {
      clearInterval(intervalId);
    };
  }, []); // 只設(shè)置一次定時(shí)器

  return <div>已運(yùn)行 {seconds} 秒</div>;
}

useEffect的最佳實(shí)踐

1. 合理拆分effect

將不同關(guān)注點(diǎn)的副作用分離到不同的useEffect中：

function UserDashboard({ userId }) {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);

  // 獲取用戶信息
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);

  // 獲取用戶帖子
  useEffect(() => {
    fetchUserPosts(userId).then(setPosts);
  }, [userId]);

  // 設(shè)置頁(yè)面標(biāo)題
  useEffect(() => {
    if (user) {
      document.title = `${user.name}的儀表板`;
    }
  }, [user]);

  // ...
}

2. 避免無限循環(huán)

確保依賴數(shù)組正確，避免不必要的重新執(zhí)行：

function SearchResults({ query }) {
  const [results, setResults] = useState([]);

  // ? 可能造成無限循環(huán)
  useEffect(() => {
    search(query).then(setResults);
  }, [results]); // results變化會(huì)再次觸發(fā)

  // ? 正確的依賴
  useEffect(() => {
    search(query).then(setResults);
  }, [query]); // 只有query變化時(shí)才執(zhí)行
}

3. 自定義Hook：代碼復(fù)用的藝術(shù)

自定義Hook是以"use"開頭的函數(shù)，可以在其內(nèi)部調(diào)用其他Hook。它們是提取組件邏輯到可重用函數(shù)的強(qiáng)大方式。

創(chuàng)建第一個(gè)自定義Hook

useCounter：計(jì)數(shù)器邏輯

import { useState } from 'react';

function useCounter(initialValue = 0, step = 1) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(prev => prev + step);
  const decrement = () => setCount(prev => prev - step);
  const reset = () => setCount(initialValue);

  return {
    count,
    increment,
    decrement,
    reset,
    setCount
  };
}

// 使用自定義Hook
function Counter() {
  const { count, increment, decrement, reset } = useCounter(0, 2);

  return (
    <div>
      <p>計(jì)數(shù): {count}</p>
      <button onClick={increment}>+2</button>
      <button onClick={decrement}>-2</button>
      <button onClick={reset}>重置</button>
    </div>
  );
}

高級(jí)自定義Hook示例

useAPI：數(shù)據(jù)獲取Hook

import { useState, useEffect } from 'react';

function useAPI(url, options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;

    async function fetchData() {
      setLoading(true);
      setError(null);

      try {
        const response = await fetch(url, options);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        
        if (!cancelled) {
          setData(result);
        }
      } catch (err) {
        if (!cancelled) {
          setError(err.message);
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }

    fetchData();

    // 清理函數(shù)：取消請(qǐng)求
    return () => {
      cancelled = true;
    };
  }, [url, JSON.stringify(options)]);

  const refetch = () => {
    setLoading(true);
    setError(null);
    // 觸發(fā)重新獲取
  };

  return { data, loading, error, refetch };
}

// 使用示例
function UserList() {
  const { data: users, loading, error } = useAPI('/api/users');

  if (loading) return <div>加載中...</div>;
  if (error) return <div>錯(cuò)誤: {error}</div>;

  return (
    <ul>
      {users?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

useLocalStorage：本地存儲(chǔ)Hook

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // 獲取初始值
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(`獲取localStorage中的${key}失敗:`, error);
      return initialValue;
    }
  });

  // 更新localStorage的函數(shù)
  const setValue = value => {
    try {
      // 允許value是函數(shù)，用于函數(shù)式更新
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(`設(shè)置localStorage中的${key}失敗:`, error);
    }
  };

  return [storedValue, setValue];
}

// 使用示例
function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  const [language, setLanguage] = useLocalStorage('language', 'zh');

  return (
    <div>
      <select value={theme} onChange={e => setTheme(e.target.value)}>
        <option value="light">淺色</option>
        <option value="dark">深色</option>
      </select>
      <select value={language} onChange={e => setLanguage(e.target.value)}>
        <option value="zh">中文</option>
        <option value="en">English</option>
      </select>
    </div>
  );
}

自定義Hook的設(shè)計(jì)原則

1. 單一職責(zé)原則

每個(gè)自定義Hook應(yīng)該只做一件事，并且做好：

// ? 好：專注于表單驗(yàn)證
function useFormValidation(initialValues, validationRules) {
  // 驗(yàn)證邏輯
}

// ? 好：專注于API調(diào)用
function useAPI(url) {
  // API調(diào)用邏輯
}

// ? 不好：職責(zé)混亂
function useFormAPIValidation(url, initialValues, rules) {
  // 既處理API又處理驗(yàn)證
}

2. 清晰的接口設(shè)計(jì)

返回值應(yīng)該直觀易懂：

// ? 好：清晰的返回值
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = () => setValue(prev => !prev);
  const setTrue = () => setValue(true);
  const setFalse = () => setValue(false);

  return { value, toggle, setTrue, setFalse };
}

// ? 也可以返回?cái)?shù)組（類似useState）
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = () => setValue(prev => !prev);

  return [value, toggle];
}

3. 處理邊界情況

考慮各種邊界情況和錯(cuò)誤處理：

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    // 處理delay為0或負(fù)數(shù)的情況
    if (delay <= 0) {
      setDebouncedValue(value);
      return;
    }

    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debouncedValue;
}

4. Hook使用的常見陷阱與解決方案

陷阱1：閉包陷阱

// ? 問題代碼
function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1); // 總是使用初始值0
    }, 1000);

    return () => clearInterval(timer);
  }, []); // 空依賴數(shù)組

  return <div>{count}</div>;
}

// ? 解決方案1：使用函數(shù)式更新
function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <div>{count}</div>;
}

// ? 解決方案2：包含依賴
function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, [count]); // 包含count依賴

  return <div>{count}</div>;
}

陷阱2：依賴數(shù)組遺漏

// ? 問題代碼
function UserProfile({ userId, theme }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId, theme).then(setUser);
  }, [userId]); // 遺漏了theme依賴

  return <div>{user?.name}</div>;
}

// ? 解決方案
function UserProfile({ userId, theme }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId, theme).then(setUser);
  }, [userId, theme]); // 包含所有依賴

  return <div>{user?.name}</div>;
}

5. 性能優(yōu)化技巧

使用React.memo減少不必要的渲染

import React, { memo } from 'react';

const ExpensiveComponent = memo(function ExpensiveComponent({ data, onUpdate }) {
  // 只有當(dāng)data或onUpdate發(fā)生變化時(shí)才重新渲染
  return (
    <div>
      {/* 復(fù)雜的渲染邏輯 */}
    </div>
  );
});

使用useCallback和useMemo

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

function OptimizedComponent({ items }) {
  const [query, setQuery] = useState('');

  // 緩存過濾后的結(jié)果
  const filteredItems = useMemo(() => {
    return items.filter(item => 
      item.name.toLowerCase().includes(query.toLowerCase())
    );
  }, [items, query]);

  // 緩存事件處理函數(shù)
  const handleSearch = useCallback((e) => {
    setQuery(e.target.value);
  }, []);

  return (
    <div>
      <input value={query} onChange={handleSearch} />
      <ItemList items={filteredItems} />
    </div>
  );
}

React Hooks為我們提供了強(qiáng)大而靈活的方式來管理組件狀態(tài)和副作用。通過合理使用useState、useEffect和自定義Hook，我們可以編寫出更加簡(jiǎn)潔、可維護(hù)和可復(fù)用的React代碼。

記住這些最佳實(shí)踐：

useState使用函數(shù)式更新避免閉包陷阱
useEffect正確設(shè)置依賴數(shù)組，及時(shí)清理副作用
自定義Hook遵循單一職責(zé)原則，提供清晰的接口
注意性能優(yōu)化，避免不必要的重新渲染

隨著對(duì)Hooks理解的深入，你會(huì)發(fā)現(xiàn)它們不僅改變了我們編寫React的方式，更重要的是改變了我們思考組件邏輯的方式。

到此這篇關(guān)于React Hooks之useState,useEffect及自定義Hook的最佳實(shí)踐的文章就介紹到這了,更多相關(guān)React Hooks介紹內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: