React组件文件中用非作用域变量存props值的合理性咨询

嘿，这个做法确实存在不少潜在问题，咱们从功能可靠性和代码风格两方面拆解看看：

功能上的核心问题 #

• 并发渲染下的数据混乱：React的并发模式（甚至是多个组件实例共存的场景）中，文件级变量是全局共享的。如果页面上有多个MyComponent实例，unscopedVar会被最后渲染/更新的实例覆盖，导致其他实例的辅助函数拿到错误的props值，出现难以复现的bug。
• props更新不同步：当组件的props发生变化时，你必须手动同步更新unscopedVar——如果忘了这一步，辅助函数就会一直使用旧值，造成数据不一致的问题，排查起来非常头疼。
• 测试难度飙升：全局变量是跨测试用例的共享状态，每次测试前都要手动重置它，否则前一个测试的残留值会影响后续测试结果，让测试变得不稳定。

代码风格与可维护性问题 #

• 打破React单向数据流：React的核心思想是数据从props/state流向视图，全局变量直接打破了这个清晰的数据流，让unscopedVar的来源和更新路径变得不透明，其他开发者看代码时很难追踪数据的流转。
• 依赖关系隐晦：辅助函数依赖文件级变量，但这种依赖没有明确的声明——新人接手时会困惑unscopedVar到底是哪里来的，为什么辅助函数能直接用它，大大降低了代码的可读性。
• 违背函数式编程原则：函数组件的设计初衷是纯函数（输入props，输出UI），依赖外部可变的全局状态会让组件和辅助函数变得“不纯”，副作用难以控制，也不符合React的设计哲学。

更合理的替代方案 #

方案1：把辅助函数放在组件内部 #

让辅助函数直接访问组件的props，不需要额外存储变量，逻辑最清晰：

// imports go here

const MyComponent = (props) => {
  const myOnBlur = (ev) => {
    console.log(props.targetProp);
    console.log(ev);
  };

  // 组件渲染逻辑
  return <input onBlur={myOnBlur} />;
};

如果担心每次渲染都创建新函数影响性能，可以用useCallback缓存：

import { useCallback } from 'react';

const MyComponent = (props) => {
  const myOnBlur = useCallback((ev) => {
    console.log(props.targetProp);
    console.log(ev);
  }, [props.targetProp]); // 仅当targetProp变化时重新创建函数

  return <input onBlur={myOnBlur} />;
};

方案2：将props作为参数传给辅助函数 #

如果辅助函数需要在多个组件中复用，或者不想放在组件内部，直接把需要的props值作为参数传入即可：

// imports go here

const myOnBlur = (targetProp, ev) => {
  console.log(targetProp);
  console.log(ev);
};

const MyComponent = (props) => {
  return <input onBlur={(ev) => myOnBlur(props.targetProp, ev)} />;
};

同样可以用useCallback优化回调函数的创建：

import { useCallback } from 'react';

const myOnBlur = (targetProp, ev) => {
  console.log(targetProp);
  console.log(ev);
};

const MyComponent = (props) => {
  const handleBlur = useCallback((ev) => {
    myOnBlur(props.targetProp, ev);
  }, [props.targetProp]);

  return <input onBlur={handleBlur} />;
};

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