React Native中传状态给组件外函数的实践合理性与性能问题

关于是否是不良实践 #

这种写法不仅不是不良实践，反而在大部分场景下是值得推广的写法，核心优势非常明确：

• 抽离到组件外的函数所有依赖都是显式传入的，不存在隐式依赖组件闭包变量的问题，不会出现“闭包捕获旧状态”这类隐蔽bug，单测成本极低——不需要渲染组件、不需要mock任何React API，直接传入对应参数就能验证逻辑正确性。
• 逻辑和视图完全解耦，同一段状态处理逻辑如果后续要在多个组件复用，直接引入函数即可，不需要额外封装自定义Hook增加不必要的抽象层级。
• 能强制你拆分逻辑粒度：如果抽离的时候发现一个函数要传七八个参数（状态、setter、dispatch混着传），说明这段逻辑本身耦合度过高，天然提醒你要做拆分，反而比把所有逻辑堆在组件内部更容易维护。

唯一需要注意的场景：如果一段逻辑强绑定组件的生命周期、或者依赖大量不可枚举的组件内部上下文（比如多个ref、不同hooks的返回值），硬要把它抽到组件外传参会导致参数列表过长，可读性反而下降，这种情况把逻辑留在组件内、或者封装成对应自定义Hook更合适。

关于性能收益是否可以忽略 #

要分场景判断，不要走极端：

• 90%以上的普通业务场景里，这点性能差异完全可以忽略。现代JS引擎创建函数的开销极低，日常组件重渲染时创建十几个内部函数的成本，远小于React本身diff虚拟DOM的开销，用户完全感知不到差异，没必要为了省这点成本硬抽函数。
• 两类场景下这个写法的性能收益是明确可感知的：
  • 当你把函数作为props传给被React.memo包裹的子组件时：组件外定义的函数引用永远稳定，不会因为父组件重渲染生成新的函数引用，能彻底避免子组件因为props引用变化触发的无意义重渲染，这时候省下来的是子组件整棵树的diff成本，远大于创建函数本身的开销。
  • 当函数内部包含大计算量逻辑（比如万级条目的数据转换、复杂公式计算）时：把逻辑抽到组件外，配合useMemo缓存计算结果，可以避免每次组件重渲染都重复执行重逻辑，这时候的性能提升也很明显。

补充：你给出的示例代码有几处小笔误：一是onPress的回调多包了一层大括号，正确写法是onPress={() => 函数调用}；二是定义了anotherFunction但没有在第二个按钮处使用，第二个按钮的全局状态逻辑直接调用anotherFunction(globalValue, dispatch)更符合抽离函数的初衷；三是原代码里const newValue = value++用了后置自增，拿到的是自增前的原始值，达不到修改状态的预期。

修正后的示例代码参考：

const coolFunction = (value, setValue) => {
    // do some stuff with value
    const newValue = value + 1;
    setValue(newValue);
}

const anotherFunction = (state, dispatch) => {
    // change state
    const updatedValue = state * 7;
    dispatch ({
        type: "UPDATE",
        payload: updatedValue
    });
} 

const SomeComponent = () => {
    const [someValue, setSomeValue] = useState(0);
    const {globalValue} = useContext(GlobalContext);
    const dispatch = useDispatch();

    return (
        <View>
            <Button onPress={() => coolFunction(someValue, setSomeValue)}>
                local state
            </Button>
            <Button onPress={() => anotherFunction(globalValue, dispatch)}>
                global state
            </Button>
        </View>
    )
}

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