你真的需要'useState”來處理所有事情嗎？探索替代方案-js教程-PHP中文網

Do You Really Need

當你第一次深入 React 時，useState 感覺就像是讓一切正常運轉的魔咒。想要一個按鈕來追蹤點擊次數嗎？使用 useState.需要切換模式嗎？再次使用狀態。但隨著您深入 React 開發，您可能會開始想知道：useState 是適合每種情況的正確選擇嗎？

不出所料，答案是否定的。雖然 useState 用途廣泛，但 React 還提供了其他可能更適合您的特定需求的鉤子和模式。讓我們探索一些替代方案，例如 useRef、useReducer 和 useContext，看看它們何時發揮作用。

何時使用 useRef 而不是 useState

React 初學者的典型錯誤是使用 useState 來取得實際上不會影響渲染的值。當您需要跨渲染保留資料而不觸發重新渲染時，useRef 是理想的選擇。

一個實際的例子：

想像一下您正在追蹤按鈕被點擊的次數，但您不需要每次都重新渲染元件。

function ClickTracker() {
  const clickCount = useRef(0);

  const handleClick = () => {
    clickCount.current += 1;
    console.log(`Button clicked ${clickCount.current} times`);
  };

  return <button onClick={handleClick}>Click me</button>;
}

登入後複製

在這種情況下，useRef 會保存點擊計數，而不會導致不必要的重新渲染。如果您使用 useState，元件將在每次單擊時重新渲染，這在此處是不必要的。

何時選擇 useRef：

追蹤不需要觸發 UI 更新的值。
儲存 DOM 元素或先前狀態值的參考。

當 useReducer 超越 useState 時

對於更複雜的狀態邏輯，特別是當您的狀態涉及多個子值或操作時，useReducer 可以是一個強大的替代方案。當您管理多個相互依賴的狀態時，useState 可能會開始感覺笨重。

真實場景：

假設您正在建立一個表單，用於管理多個輸入，例如姓名、電子郵件和密碼。對每個輸入使用 useState 很快就會變得乏味。

function formReducer(state, action) {
  switch (action.type) {
    case 'SET_NAME':
      return { ...state, name: action.payload };
    case 'SET_EMAIL':
      return { ...state, email: action.payload };
    case 'SET_PASSWORD':
      return { ...state, password: action.payload };
    default:
      return state;
  }
}

function SignupForm() {
  const [formState, dispatch] = useReducer(formReducer, {
    name: '',
    email: '',
    password: ''
  });

  return (
    <>
      <input
        value={formState.name}
        onChange={(e) => dispatch({ type: 'SET_NAME', payload: e.target.value })}
        placeholder="Name"
      />
      <input
        value={formState.email}
        onChange={(e) => dispatch({ type: 'SET_EMAIL', payload: e.target.value })}
        placeholder="Email"
      />
      <input
        value={formState.password}
        onChange={(e) => dispatch({ type: 'SET_PASSWORD', payload: e.target.value })}
        placeholder="Password"
      />
    </>
  );
}

登入後複製

這裡，useReducer 將所有狀態更新集中到一個函數中，比多個 useState 呼叫更容易管理。

何時選擇 useReducer：

使用多個子值或運算來處理複雜的狀態邏輯。
當狀態轉換遵循清晰的、基於操作的流程（例如，SET、ADD、REMOVE）。

您應該使用 useContext 嗎？

如果您的狀態在許多組件之間共享，那麼道具鑽探很快就會變成一場噩夢。這就是 useContext 的用武之地——它可以幫助您共享狀態，而無需將 props 傳遞到多個層級。

一個上下文範例：

想像一下您正在建造一個購物車。您需要可以在應用程式的不同部分（可能是標題、結帳頁面和購物車預覽）存取購物車的狀態（新增的商品、總價等）。

const CartContext = React.createContext();

function CartProvider({ children }) {
  const [cart, setCart] = useState([]);

  return (
    <CartContext.Provider value={{ cart, setCart }}>
      {children}
    </CartContext.Provider>
  );
}

function Header() {
  const { cart } = React.useContext(CartContext);
  return <div>Items in cart: {cart.length}</div>;
}

function App() {
  return (
    <CartProvider>
      <Header />
      {/* Other components */}
    </CartProvider>
  );
}

登入後複製

在這種情況下，useContext 可讓購物車狀態可供任何需要它的組件使用，而無需手動傳遞 props。