哪个是最好的 useReducer -> reducer 函数声明

Which is the best `useReducer` -> reducer function declaration

查看react doc，有一个初步的方法可以做到。但与许多其他方法一样，这很少是有效的方法。

所以，我想知道哪种是声明 reducer 函数的最好/最有效/更简洁的方法，因为它是一个 pure function :

assume import React, { useReducer, useCallback } from 'react'

1。外部函数（文档样式）

const reducer = (state, action) => state
const MyComp = () => {
  const [state, dispatch] = useReducer(reducer, {})
}

2。 useCallback声明

const MyComp = () => {
  const reducer = useCallback((state, action) => state, [])
  const [state, dispatch] = useReducer(reducer, {})
}

3。 useCallback 内联声明替代方法

const MyComp = () => {
  const [state, dispatch] = useReducer(useCallback((state, action) => state, []), {})
}

4。内联函数声明

const MyComp = () => {
  const [state, dispatch] = useReducer((state, action) => state, {})
}

Note: readability is a concern of course but I don't need this argument here :)

所有这些方法 "works" 而且我看不到过度的函数重新声明。但我想知道为什么 React 文档没有描述 2. useCallback 的方式，如果发现它更干净。

我更喜欢第一种方法。

这是最简单的，而且您 运行 不太可能遇到任何性能问题。

React 核心团队自己警告不要过早优化。在不需要的地方使用 useCallback 是过早的优化，会增加不必要的复杂性。

关于内联函数：我（以及我认识的许多开发人员）不赞成内联函数，例如（方法 3 或 4）。没什么大不了的，但也不是 "clean".