React useState 使用從基礎(chǔ)到高級應(yīng)用示例小結(jié)

更新時間：2025年09月08日 14:50:17 作者：北辰alk

React 的 useState 是一個內(nèi)置的 Hook,它允許我們在函數(shù)組件中添加和管理狀態(tài),本文給大家介紹React useState 使用從基礎(chǔ)到高級應(yīng)用示例小結(jié),感興趣的朋友一起看看吧

1. 什么是 useState？

React 的 useState 是一個內(nèi)置的 Hook，它允許我們在函數(shù)組件中添加和管理狀態(tài)。在 React 16.8 之前，函數(shù)組件只能作為無狀態(tài)組件使用，但有了 Hooks 之后，函數(shù)組件現(xiàn)在可以擁有和類組件相似的狀態(tài)管理能力。

2. useState 基礎(chǔ)用法

2.1 基本語法

import React, { useState } from 'react';
function ExampleComponent() {
  // 聲明一個狀態(tài)變量count，初始值為0
  // setCount是更新count的函數(shù)
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>你點擊了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        點擊我
      </button>
    </div>
  );
}

2.2 初始化狀態(tài)的多種方式

useState 可以接受任何類型的值作為初始狀態(tài)：

function VariousStateTypes() {
  // 數(shù)字類型
  const [count, setCount] = useState(0);
  // 字符串類型
  const [name, setName] = useState('張三');
  // 布爾類型
  const [isVisible, setIsVisible] = useState(false);
  // 數(shù)組類型
  const [items, setItems] = useState([]);
  // 對象類型
  const [user, setUser] = useState({
    name: '李四',
    age: 25,
    email: 'lisi@example.com'
  });
  // 函數(shù)類型（惰性初始化）
  const [value, setValue] = useState(() => {
    // 復(fù)雜的初始化邏輯
    const initialValue = localStorage.getItem('myValue');
    return initialValue ? JSON.parse(initialValue) : 'default';
  });
  return <div>示例組件</div>;
}

3. useState 的工作原理

為了更好地理解 useState 的工作原理，讓我們看一下它的內(nèi)部機制流程圖：

React 使用閉包和鏈表的方式來管理組件的狀態(tài)。每個 useState 調(diào)用都會在組件的"記憶單元"中創(chuàng)建一個狀態(tài)節(jié)點，這些節(jié)點按照調(diào)用的順序被存儲。

4. 更新狀態(tài)的正確方式

4.1 直接更新 vs 函數(shù)式更新

function Counter() {
  const [count, setCount] = useState(0);
  // 直接更新（可能有問題）
  const incrementDirect = () => {
    setCount(count + 1);
    setCount(count + 1); // 這不會工作，因為count還是舊值
  };
  // 函數(shù)式更新（推薦）
  const incrementFunctional = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1); // 這會正確工作
  };
  return (
    <div>
      <p>計數(shù): {count}</p>
      <button onClick={incrementDirect}>直接更新 (+2應(yīng)該但不會)</button>
      <button onClick={incrementFunctional}>函數(shù)式更新 (+2會正確工作)</button>
    </div>
  );
}

4.2 對象和數(shù)組的更新

function UserProfile() {
  const [user, setUser] = useState({
    name: '王五',
    age: 30,
    address: {
      city: '北京',
      street: '朝陽路'
    }
  });
  const [list, setList] = useState([1, 2, 3]);
  // 更新對象 - 錯誤方式（會丟失其他屬性）
  const updateNameWrong = (newName) => {
    setUser({ name: newName }); // age和address會丟失！
  };
  // 更新對象 - 正確方式
  const updateNameCorrect = (newName) => {
    setUser(prevUser => ({
      ...prevUser,        // 展開原有屬性
      name: newName       // 覆蓋需要更新的屬性
    }));
  };
  // 更新嵌套對象
  const updateCity = (newCity) => {
    setUser(prevUser => ({
      ...prevUser,
      address: {
        ...prevUser.address, // 展開嵌套對象
        city: newCity        // 更新嵌套屬性
      }
    }));
  };
  // 添加數(shù)組元素
  const addToList = (item) => {
    setList(prevList => [...prevList, item]); // 使用展開運算符
  };
  // 刪除數(shù)組元素
  const removeFromList = (index) => {
    setList(prevList => prevList.filter((_, i) => i !== index));
  };
  // 更新數(shù)組元素
  const updateListItem = (index, newValue) => {
    setList(prevList => prevList.map((item, i) => 
      i === index ? newValue : item
    ));
  };
  return (
    <div>
      <p>姓名: {user.name}</p>
      <p>城市: {user.address.city}</p>
    </div>
  );
}

5. 常見使用場景和示例

5.1 表單處理

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  // 處理輸入變化
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevData => ({
      ...prevData,
      [name]: value
    }));
    // 清除對應(yīng)字段的錯誤
    if (errors[name]) {
      setErrors(prevErrors => ({
        ...prevErrors,
        [name]: ''
      }));
    }
  };
  // 表單驗證
  const validateForm = () => {
    const newErrors = {};
    if (!formData.name.trim()) {
      newErrors.name = '姓名不能為空';
    }
    if (!formData.email.trim()) {
      newErrors.email = '郵箱不能為空';
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = '郵箱格式不正確';
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  // 提交表單
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!validateForm()) {
      return;
    }
    setIsSubmitting(true);
    try {
      // 模擬API調(diào)用
      await new Promise(resolve => setTimeout(resolve, 1000));
      console.log('表單提交成功:', formData);
      alert('提交成功！');
      // 重置表單
      setFormData({ name: '', email: '', message: '' });
    } catch (error) {
      console.error('提交失敗:', error);
    } finally {
      setIsSubmitting(false);
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>姓名:</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
        />
        {errors.name && <span className="error">{errors.name}</span>}
      </div>
      <div>
        <label>郵箱:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
        />
        {errors.email && <span className="error">{errors.email}</span>}
      </div>
      <div>
        <label>留言:</label>
        <textarea
          name="message"
          value={formData.message}
          onChange={handleInputChange}
        />
      </div>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '提交中...' : '提交'}
      </button>
    </form>
  );
}

5.2 計數(shù)器應(yīng)用

function AdvancedCounter() {
  const [count, setCount] = useState(0);
  const [history, setHistory] = useState([]);
  const [step, setStep] = useState(1);
  // 增加計數(shù)
  const increment = () => {
    setCount(prevCount => {
      const newCount = prevCount + step;
      setHistory(prevHistory => [...prevHistory, {
        type: 'increment',
        from: prevCount,
        to: newCount,
        step: step,
        timestamp: new Date().toISOString()
      }]);
      return newCount;
    });
  };
  // 減少計數(shù)
  const decrement = () => {
    setCount(prevCount => {
      const newCount = prevCount - step;
      setHistory(prevHistory => [...prevHistory, {
        type: 'decrement',
        from: prevCount,
        to: newCount,
        step: step,
        timestamp: new Date().toISOString()
      }]);
      return newCount;
    });
  };
  // 重置計數(shù)
  const reset = () => {
    setCount(0);
    setHistory(prevHistory => [...prevHistory, {
      type: 'reset',
      from: count,
      to: 0,
      timestamp: new Date().toISOString()
    }]);
  };
  // 清除歷史
  const clearHistory = () => {
    setHistory([]);
  };
  return (
    <div>
      <h2>高級計數(shù)器</h2>
      <div className="counter-controls">
        <label>
          步長:
          <input
            type="number"
            value={step}
            onChange={(e) => setStep(Number(e.target.value))}
            min="1"
          />
        </label>
        <button onClick={decrement}>-{step}</button>
        <span className="count-value">{count}</span>
        <button onClick={increment}>+{step}</button>
        <button onClick={reset}>重置</button>
      </div>
      <div className="history-section">
        <h3>操作歷史</h3>
        <button onClick={clearHistory}>清除歷史</button>
        {history.length === 0 ? (
          <p>暫無操作歷史</p>
        ) : (
          <ul>
            {history.map((record, index) => (
              <li key={index}>
                {new Date(record.timestamp).toLocaleTimeString()} - 
                從 {record.from} {record.type === 'increment' ? '+' : '-'}
                {record.step || ''} 到 {record.to}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

5.3 自定義 Hook 封裝 useState

// 自定義 Hook: 使用 localStorage 持久化狀態(tài)
function useLocalStorageState(key, defaultValue) {
  // 從 localStorage 讀取初始值
  const [state, setState] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : defaultValue;
    } catch (error) {
      console.error(`Error reading localStorage key "${key}":`, error);
      return defaultValue;
    }
  });
  // 當(dāng)狀態(tài)變化時更新 localStorage
  const setPersistedState = (value) => {
    try {
      // 允許值是一個函數(shù)（與 useState 相同）
      const valueToStore = value instanceof Function ? value(state) : value;
      setState(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(`Error setting localStorage key "${key}":`, error);
    }
  };
  return [state, setPersistedState];
}
// 使用自定義 Hook
function ThemeSwitcher() {
  const [theme, setTheme] = useLocalStorageState('theme', 'light');
  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };
  return (
    <div className={`app ${theme}`}>
      <h2>當(dāng)前主題: {theme}</h2>
      <button onClick={toggleTheme}>
        切換主題
      </button>
    </div>
  );
}

6. 性能優(yōu)化和最佳實踐

6.1 避免不必要的重新渲染

// 使用 React.memo 避免不必要的重新渲染
const ExpensiveComponent = React.memo(({ data }) => {
  console.log('ExpensiveComponent 渲染了');
  return <div>數(shù)據(jù): {data.value}</div>;
});
function OptimizationExample() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState({ value: '測試數(shù)據(jù)' });
  // 使用 useCallback 避免函數(shù)引用變化
  const updateData = useCallback(() => {
    setData(prevData => ({ ...prevData }));
  }, []);
  return (
    <div>
      <p>計數(shù): {count}</p>
      <button onClick={() => setCount(c => c + 1)}>增加計數(shù)</button>
      {/* 這個組件不會因為計數(shù)變化而重新渲染 */}
      <ExpensiveComponent data={data} />
      <button onClick={updateData}>更新數(shù)據(jù)</button>
    </div>
  );
}

6.2 使用 useReducer 處理復(fù)雜狀態(tài)邏輯

當(dāng)狀態(tài)邏輯變得復(fù)雜時，可以考慮使用 useReducer：

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, {
        id: Date.now(),
        text: action.text,
        completed: false
      }];
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.id
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    case 'DELETE_TODO':
      return state.filter(todo => todo.id !== action.id);
    default:
      return state;
  }
}
function TodoApp() {
  const [todos, dispatch] = useReducer(todoReducer, []);
  const [inputValue, setInputValue] = useState('');
  const addTodo = () => {
    if (inputValue.trim()) {
      dispatch({ type: 'ADD_TODO', text: inputValue });
      setInputValue('');
    }
  };
  return (
    <div>
      <h2>待辦事項</h2>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && addTodo()}
      />
      <button onClick={addTodo}>添加</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <span
              style={{
                textDecoration: todo.completed ? 'line-through' : 'none'
              }}
              onClick={() => dispatch({ type: 'TOGGLE_TODO', id: todo.id })}
            >
              {todo.text}
            </span>
            <button
              onClick={() => dispatch({ type: 'DELETE_TODO', id: todo.id })}
            >
              刪除
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

7. 常見問題和解決方案

7.1 狀態(tài)更新后立即使用新值

function ImmediateUpdateProblem() {
  const [count, setCount] = useState(0);
  // 錯誤：在狀態(tài)更新后立即使用新值
  const incrementProblematic = () => {
    setCount(count + 1);
    console.log('當(dāng)前計數(shù):', count); // 這里還是舊值
  };
  // 正確：使用 useEffect 響應(yīng)狀態(tài)變化
  useEffect(() => {
    console.log('計數(shù)已更新:', count);
  }, [count]);
  // 如果需要基于當(dāng)前狀態(tài)進(jìn)行連續(xù)更新，使用函數(shù)式更新
  const incrementTwice = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1); // 這會正確工作
  };
  return (
    <div>
      <p>計數(shù): {count}</p>
      <button onClick={incrementProblematic}>有問題的方式</button>
      <button onClick={incrementTwice}>增加兩次</button>
    </div>
  );
}

7.2 處理異步狀態(tài)更新

function AsyncStateUpdate() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      // 模擬API調(diào)用
      const response = await new Promise((resolve, reject) => {
        setTimeout(() => {
          Math.random() > 0.2 
            ? resolve({ message: '數(shù)據(jù)獲取成功!' })
            : reject(new Error('獲取數(shù)據(jù)失敗'));
        }, 1000);
      });
      setData(response);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  return (
    <div>
      <button onClick={fetchData} disabled={loading}>
        {loading ? '加載中...' : '獲取數(shù)據(jù)'}
      </button>
      {error && <div className="error">錯誤: {error}</div>}
      {data && <div>數(shù)據(jù): {data.message}</div>}
    </div>
  );
}

8. 總結(jié)

React 的 useState Hook 是函數(shù)組件狀態(tài)管理的核心工具。通過本文的學(xué)習(xí)，你應(yīng)該已經(jīng)掌握了：

useState 的基本用法和語法
如何正確更新各種類型的狀態(tài)（數(shù)字、字符串、對象、數(shù)組）
狀態(tài)更新的最佳實踐（函數(shù)式更新、不可變數(shù)據(jù)）
常見使用場景和示例（表單處理、計數(shù)器等）
性能優(yōu)化技巧和自定義 Hook
常見問題的解決方案

記住，useState 雖然簡單易用，但要真正掌握它需要理解其工作原理和最佳實踐。隨著你對 React 的深入使用，你會發(fā)現(xiàn) useState 與其他 Hook（如 useEffect、useContext、useReducer）的組合使用能解決各種復(fù)雜的狀態(tài)管理問題。

繼續(xù)練習(xí)并在實際項目中應(yīng)用這些知識，你會逐漸成為 React 狀態(tài)管理的高手！

到此這篇關(guān)于React useState 使用詳解：從基礎(chǔ)到高級應(yīng)用的文章就介紹到這了,更多相關(guān)React useState 使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: