你真的需要'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。