useState vs useRef 和 useReducer：相同点、不同点和用例

这篇文章解释了 React Hooks —— useState、useRef 和 useReducer 的相同点和不同点，你将了解到它们的基本用法以及不同的用例。

先看看 Hook 的规则

• Hooks 只能从 React 函数的顶层调用
• 不能从嵌套代码（例如循环、条件）中调用 hook
• 也可以从自定义 Hooks 的顶层中调用 Hooks

通常，应该无条件地调用 hook:)

了解useState钩子

useStateHook 可以为函数式组件开发组件状态。

看看下面的代码。

import { useState } from "react";
function AppDemo1() {
  const [darkMode,darkModeUpdater]= useState(true);
 
  return (
    <div>
      <p>{darkMode ? "dark mode on" : "dark mode off"}</p>
      <button onClick={() => darkModeUpdater(!darkMode)}>
        toggle dark mode
      </button>
    </div>
  );
}

useState Hook 返回一个包含两个项目的数组。在示例中，我们实现了一个布尔组件状态，并使用true进行了初始化，

单个参数useState仅在初始渲染周期期间才会被考虑。使用第二个值更新，useState 可以处理从数字到布尔值到对象的各种数据类型，甚至也可以是一个回调函数，在计算后返回值，如果你想在组件第一次渲染时进行拓展计算，这会很有用。

下面的情况下，我们会更偏向于使用 useState

1. 如果我们需要在状态变量更改后重新渲染
2. 具有简单更新和用例的简单状态 —— 如果状态变得复杂或者我们有不同的方式来更新状态，我们应该考虑使用 useReducer 挂钩

了解useRef 钩子

useRef hook 和 useState hook 相似，但在下面的情况下不同：

下面的情况下，我们会更偏向于使用 useRef

1. 更新值不应该重新渲染 UI，否则我们应该使用 useState /useReducer hook
2. 当我们想要直接访问 React 组件或 HTML 元素时
3. 我们可以将其用作当前属性中的数据持久存储

注意：在渲染期间改变 ref，即从刚才提到的地方以外的地方，可能会引入错误。这同样适用于useState。

看看下面的代码。

import { useEffect, useState, useRef } from "react";

const AppDemo13 = () => {
 
  const [count, setCount] = useState(0);
  // Get the previous value (was passed into hook on last render)
  const ref = useRef();
  // Store current value in ref
  useEffect(() => {
    console.log("useEffect");
    ref.current = count;
  }, [count]); // Only re-run if value changes (kind of Component did update)
  return (
    <div className="App">
      <h1>
        Now: {count}, before: {ref.current}
      </h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

了解useReducer 钩子

当你具有涉及多个子值的复杂状态逻辑或下一个状态取决于前一个状态时，useReducer 通常比 useState 更加好用。

看看下面的代码。

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:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

如果在单个状态上工作并有各种调度程序来更改状态，这种方法将教会我们理解 redux 逻辑的方式。

结论

1. 当要管理的状态足够简单时，考虑使用 useState
2. 当我们对各种动作有复杂的逻辑和可靠的状态时，使用 useReducer
3. useRef 存储和持久化重新渲染的数据并直接访问 DOM 元素，如果你想提高受控输入元素的性能，我们可以使用 useRef 来减少每次击键时的重新渲染量。