Question

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:
      throw new Error();
  }
}

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

这直接来自React文档。我想具体说明这一行代码：

const [state, dispatch] = useReducer(reducer, initialState);

在新创建的变量state和dispatch中，我们将reducer分配给dispatch，将initialState分配给state。这对我来说似乎是落后的。如果useReducer从函数的第二个参数（initialState）赋值，为什么我们要先声明状态。我希望我对这个问题很清楚...我知道理解我的要求可能很棘手。基本上，为什么不这样设置代码？

const [dispatch, state] = useReducer(reducer, initialState);

或者：

const [state, dispatch] = useReducer(initialState, reducer);

Answer 1

useReducer返回一个数组，其第一个值为状态，第二个值为调度。您正在解构这些值。

const someArray = () => ['value1','value2']
const [value1 , value2] = someArray()
console.log(value1)
console.log(value2)

关于订单的原样：

useState将数组返回为[state, setState]

useReducer返回一个数组为[state , dispatch]

您会看到两者非常相似

此外：调用函数时，一个常见的主题是将主参数（reducer）作为第一个参数，然后将其选项（initialState）作为参数传递。 useReducer(reducer, initialState)

更新后的“编辑扩展答案”：

这是因为您将始终传递主参数，而可能不会传递其选项

如果useReducer要求您使用useReducer(initialValues, reducer)来调用它，那么在没有useReducer(reducer)这样的initalValues的情况下就无法调用它，因为useReducer会认为reducer是您的initalValues，并且没有传递reducer内。

反应小组本来可以选择接受{initalValues, reducer}之类的对象，顺序并不重要，但事实并非如此

为什么useReducer以这种方式设置？感觉像是在向后编写代码？

1 个答案: