如何看待React的useReducer和useState前段时间面试，面试官问了一道React中useReducer和

前言

前段时间面试，面试官问了一道React中useReducer和useState的区别和适用场景，一时语塞，没有说的太明白。所以写成文章来区别useReducer和useState，让xdm不要去踩坑，接下来一起往下看吧。

实现

目前有一个需求的实现，实现最简单的加减乘除功能，分别看下使用useReducer和useState是怎么实现的。React版本是使用React17进行开发。

useState方式实现

  import { useState } from "react";

  const App = () => {
    const [count, setCount] = useState(0);

    // 加法
    const add = () => {
      const newCount = count + 2;
      setCount(newCount);
    }

    // 减法
    const reduce = () => {
      const newCount = count - 2;
      setCount(newCount);
    }

    // 乘法
    const ride = () => {
      const newCount = count * 2;
      setCount(newCount);
    }

    // 除法
    const except = () => {
      const newCount = count / 2;
      setCount(newCount);
    }

    return (
      <div className="useState">
        {count}
        <button onClick={add}> + 2 </button>
        <button onClick={reduce}> + 2 </button>
        <button onClick={ride}> + 2 </button>
        <button onClick={except}> + 2 </button>
      </div>
    )
  }

  export default App

可以看出定义4个按钮执行不同的事件实现加减乘除的方式。下面看下useReducer的实现。

useReducer方式实现

  import { useReducer } from "react";

  const App = () => {
    const [count, dispatch] = useReducer((state, action) => {
      switch (action) {
        case "add": // 加法
          return state + 2;
        case "reduce": // 减法
          return state - 2;
        case "ride": // 乘法
          return state * 2;
        case "except": // 除法
          return state / 2;
        default:
          return state;
      }
    }, 0);


    return (
      <div className="useReducer">
          {count}
          <button onClick={() => dispatch("add")}> + 2 </button>
          <button onClick={() => dispatch("reduce")}> - 2 </button>
          <button onClick={() => dispatch("ride")}> x 2 </button>
          <button onClick={() => dispatch("except")}> / 2 </button>
      </div>
    )
  }

  export default App

可以看出定义4个按钮，通过执行dispatch指定的参数触发执行条件。

结语

上面通过useState和useReducer实现加减乘除同样功能的方式，可以看出useReducer的写法略胜一筹，useReducer可以更好的描述如何更新状态，通过dispatch，可以减少状态值的传递，代码行为更加可以预测。

如果文章对你有帮助，留下你们的点赞吧。