传入useReducer()的reducer函数是否应声明在组件外部？

把reducer放在组件外部不只是惯例，而是有明确的实质性好处，其中你关注的函数引用稳定性是核心原因，具体如下：

• 避免不必要的重渲染与性能开销
  组件每次渲染时，内部声明的函数都会被重新创建，引用地址随之改变。如果把reducer写在组件内部，每次组件渲染都会生成一个新的reducer函数实例。虽然React不会因为reducer引用变化就重置状态，但会带来两个问题：

  1. useReducer内部会检测到reducer变化，触发额外的内部逻辑开销；
  2. 如果组件中有依赖reducer的hooks（比如useCallback），或者需要把reducer传递给子组件，引用变化会导致这些依赖项或子组件触发不必要的重渲染。
     而将reducer放在组件外部作为顶级函数，它的引用地址永远稳定，不会随组件渲染发生变化，从根源上避免了这类性能问题。

• 提升代码可维护性与复用性
  把状态处理逻辑（reducer）和UI渲染逻辑（组件）分离，代码结构更清晰，后续维护时能快速定位状态相关逻辑。如果多个组件需要用到相同的状态处理规则，直接复用这个外部reducer即可，无需在每个组件内重复编写相同逻辑。

• 便于单元测试
  标准的reducer是纯函数（输入相同的state和action，必然输出相同的新state），放在组件外部后，可以单独对它编写单元测试，不需要依赖React组件环境，测试逻辑更简洁直接。

例外情况：reducer依赖组件内部值 #

如果你的reducer需要用到组件的props或内部变量，那只能把它写在组件内部，但此时一定要用useCallback包裹reducer，保证其引用稳定性：

import { useReducer, useCallback } from 'react';

function Counter({ step }) {
  const reducer = useCallback((state, action) => {
    switch(action.type) {
      case 'increment':
        return { count: state.count + step };
      default:
        return state;
    }
  }, [step]); // 依赖step，只有step变化时才生成新的reducer

  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <p>Count: {state.count}</p>
    </>
  );
}

内容的提问来源于stack exchange，提问作者Ben