在React函数组件外部声明变量是否可行？

当然可以啦！不过得看你怎么用，不同场景下的注意点还不一样，我给你拆解几种常见情况：

1. 静态常量/配置项：放心用，非常推荐 #

如果是一些不会变化的固定值，比如接口地址、枚举类型、通用工具函数，完全可以放在组件外面。这样不仅能避免每次组件渲染都重复创建这些值，还能让代码更整洁，多个组件也能直接复用。

举个例子：

// 组件外部的静态常量
const API_BASE_URL = 'https://api.example.com';
const USER_ROLES = { ADMIN: 'admin', REGULAR: 'regular' };

function UserProfile() {
  const fetchUserInfo = async () => {
    const response = await fetch(`${API_BASE_URL}/user/profile`);
    // ...后续逻辑
  };

  return <div>用户角色：{USER_ROLES.REGULAR}</div>;
}

2. 共享可变变量：能用，但组件不会自动响应变化 #

要是你想让变量在多个组件之间共享，比如一个全局的统计值，也可以在组件外声明，但有个关键问题：当这个变量变化时，依赖它的组件不会自动重新渲染。

比如这个例子：

let globalClickCount = 0;

function ClickButton() {
  const handleClick = () => {
    globalClickCount++;
    console.log('当前点击次数：', globalClickCount);
    // 这里变量变了，但组件不会重新渲染，UI上的数字不会更新
  };

  return <button onClick={handleClick}>点击次数：{globalClickCount}</button>;
}

function ClickDisplay() {
  return <div>另一个组件显示的次数：{globalClickCount}</div>;
}

点击按钮后，globalClickCount的值确实会增加，但两个组件的UI都不会更新。所以这种方式只适合那些不需要触发UI变化的共享数据，如果需要组件响应变化，还是用React的Context API或者Redux这类状态管理工具更靠谱。

3. 组件局部状态：千万别放外面！ #

绝对不要把组件自己的局部状态（比如输入框的值、临时弹窗状态）放在组件外部，否则会导致同一个组件的多个实例共享同一个变量，造成状态混乱。

比如这个错误示例：

// 错误做法：把组件局部状态放在外面
let inputValue = '';

function CustomInput() {
  const handleChange = (e) => {
    inputValue = e.target.value;
  };

  return <input value={inputValue} onChange={handleChange} />;
}

如果页面上有两个CustomInput组件，你在其中一个输入内容，另一个也会跟着显示相同的值，这显然不是我们想要的效果。这种情况一定要用useState或者useRef在组件内部管理状态。

• 静态常量、通用配置：大胆放在组件外，高效又省心；
• 需要UI响应的共享数据：别用全局变量，用React官方的状态方案或者状态管理库；
• 组件专属的局部状态：老老实实放在组件内部，用React的钩子管理。

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