图文示例讲解useState与useReducer性能区别

function basicStateReducer(state, action) {
  // $FlowFixMe: Flow doesn't like mixed types
  return typeof action === 'function' ? action(state) : action;
}

function App() {
  const [disabled, setDisabled] = React.useState(false);
  return (
    <>
      <button onClick={() => setDisabled((prev) => !prev)}>Disable</button>
      <div>{`Disabled? ${disabled}`}</div>
      <CounterReducer disabled={disabled} />
    </>
  );
}

function CounterReducer({ disabled }) {
  const [count, dispatch] = useReducer((state) => {
    if (disabled) {
      return state;
    }
    return state + 1;
  }, 0);
  return (
    <>
      <button onClick={dispatch}>reducer + 1</button>
      <div>{`Count ${count}`}</div>
    </>
  );
}

function CounterState({ disabled }) {
  const [count, dispatch] = useState(0);
  function dispatchAction() {
    dispatch((state) => {
      if (disabled) {
        return state;
      }
      return state + 1;
    });
  }
  return (
    <>
      <button onClick={dispatchAction}>state + 1</button>
      <div>{`Count ${count}`}</div>
    </>
  );
}

function App() {
  const [count, dispatch] = useState(0);
  return <button onClick={() => dispatch(0)}>点击</button>;
}

// 定义状态
const [count, dispatch] = useState(0);
// 更新状态
dispatch(100)

// 定义状态
const [count, dispatch] = useState(0);
// 更新状态
dispatch(oldState => oldState + 100)

// 状态更新函数本身不变
function change(oldState) {
  // 新状态也不变
  return oldState;
}
function App() {
  const [count, dispatch] = useState(0);
  // 状态更新函数每次render都会变化
  // function change(oldState) {
     // 新状态不变
     // return oldState;
  // }
  return <button onClick={() => dispatch(change)}>点击</button>;
}