React组件代码优化疑问：为何将方法移至组件外，而非全部逻辑移出？

我编写了如下ResetPasswordButton组件：

interface Props {
  email: string;
}
const getErrorMessage = (payload: any) => {
  if (typeof payload.data === 'string') {
    return payload.data;
  } else if (payload.data && 'payloads' in payload.data) {
    return payload.data.errors
      .map(({ title }: { title: string }) => title)
      .join('. ');
  } else {
    return 'Something went wrong.';
  }
};
const ResetPasswordButton: FC<Props> = ({ email }) => {
  const [forgotPassword, { isLoading }] = useForgotPasswordMutation();

  const handleResetPassword: MouseEventHandler<HTMLButtonElement> = async (
    event: any
  ) => {
    event.preventDefault();

    try {
      await forgotPassword({ email: email });

      toast.success('password reset email sent', {
        position: 'bottom-center',
        autoClose: 8000,
        hideProgressBar: true,
        closeOnClick: true,
        pauseOnHover: true
      });
    } catch (error: any) {
      toast.error(getErrorMessage(error), {
        position: 'bottom-center',
        autoClose: 8000,
        hideProgressBar: true,
        closeOnClick: true,
        pauseOnHover: true
      });
    }
  };
  return (
    <button
      className="cursor-pointer text-right text-sm text-inpay-gossamer"
      onClick={handleResetPassword}
      disabled={isLoading}
    >
      Reset Password
    </button>
  );
};

export default ResetPasswordButton;

代码评审后，我被要求将getErrorMessage方法移至组件外，以避免组件每次重渲染时重新定义该方法。由于该方法无依赖，我未使用useCallback进行包裹。但我产生了疑问：为何不将所有内容（比如onClick处理函数等）都移至组件外？应该如何判断哪些逻辑适合放在组件内或外？

为什么getErrorMessage可以移到组件外 #

getErrorMessage是纯函数：它的输出完全由输入决定，不依赖组件内的任何变量、状态、Hook返回值或上下文。这类工具函数放在组件外，既能避免每次组件渲染时重新创建函数实例，也方便单独复用和测试。

为什么handleResetPassword不能随意移到组件外 #

handleResetPassword依赖组件内部的多个上下文内容：

• 依赖组件传入的email props
• 依赖Hook返回的forgotPassword请求方法
• 依赖组件内的toast配置（虽然toast可能是全局工具，但业务逻辑和组件状态绑定）

如果硬要把它移到组件外，必须把所有依赖项作为参数传入，比如：

// 组件外定义
const handleResetPassword = async (
  event: React.MouseEventHandler<HTMLButtonElement>,
  email: string,
  forgotPassword: any,
  toastOptions: ToastOptions
) => {
  event.preventDefault();
  try {
    await forgotPassword({ email });
    toast.success('password reset email sent', toastOptions);
  } catch (error: any) {
    toast.error(getErrorMessage(error), toastOptions);
  }
};

// 组件内调用
<button
  onClick={(e) => handleResetPassword(e, email, forgotPassword, toastOptions)}
  // ...其他属性
>
  Reset Password
</button>

这种写法会增加代码的耦合度，反而不如直接在组件内定义直观。而且React中函数实例的重新创建在大多数场景下性能影响可以忽略，只有当该函数作为props传递给频繁重渲染的子组件时，才需要用useCallback包裹优化。

判断逻辑位置的核心标准 #

• 优先放组件外的情况：
  • 纯函数，无任何组件内部依赖（props、state、Hook返回值等）
  • 可能被多个组件复用的工具逻辑（比如错误解析、数据格式化）
  • 独立的业务逻辑片段，不依赖组件上下文
• 必须放组件内的情况：
  • 依赖组件props、state、Hook返回值的逻辑（比如事件处理、状态更新）
  • 和组件生命周期强绑定的逻辑
  • 仅属于当前组件的专属业务逻辑，复用性极低

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