javascript - 为什么用useReducer这样设置？感觉像是在向后编写代码？

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);

最佳答案

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

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

至于为什么顺序是这样的：


  useState将数组返回为[state, setState]
  
  useReducer将数组返回为[state , dispatch]
  
  如您所见，两者非常相似


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

更新了“编辑扩展答案”：

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

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

相反，React Team可以选择接受{initalValues, reducer}之类的对象，顺序并不重要，但事实并非如此