最好的`useReducer`-> reducer函数声明

Question

看react doc，有一种初始方法。但是像许多其他方法一样，这几乎不是有效的方法。

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

假设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, {})
}

注意：可读性当然是要考虑的问题，但是我在这里不需要这个参数：）

所有这些方法都可以“正常工作”，而且我看不到过多的函数重新声明。但是我不知道为什么反应文档没有描述2. useCallback的方式，以使其更干净。

Answer 1

我更喜欢第一种方法。

这是最简单的方法，您不太可能遇到任何性能问题。

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

关于内联函数：我（和我认识的许多开发人员）不赞成内联函数，例如（方法3或4）。没什么大不了，但这不是“干净” 。