组件内函数是否应将Props作为参数传入？

两种写法没有绝对的优劣，核心看你的使用场景和后续维护需求，下面拆解具体的决策因素和适用场景：

两种写法的本质区别 #

写法1：直接访问Props #

function MyComponent({number}){
    function numberPlusOne(){
        return number + 1;
    }

    return(
        <h1>{numberPlusOne()}</h1>
    )
}

这个numberPlusOne和组件的number props强绑定，属于组件上下文依赖型函数——它的输出完全由组件当前的props决定，不需要额外传参。

写法2：参数传入 #

function MyComponent({number}){
    function numberPlusOne(number){
        return number + 1;
    }

    return(
        <h1>{numberPlusOne(number)}</h1>
    )
}

这里的numberPlusOne是纯函数——输出只和输入参数有关，不依赖组件的任何上下文，拿到任何数字都能返回正确结果。

影响决策的核心因素 #

1. 函数的复用场景 #

• 如果这个辅助函数只在当前组件里用一次，且只处理这个特定props：写法1更简洁，少了传参的冗余代码，完全没必要增加复杂度。
• 如果函数需要处理多个不同的值（比如组件里还有state里的count，需要调用numberPlusOne(count)），或者以后可能抽到公共工具库给其他组件用：写法2更灵活，不用修改函数逻辑就能适配不同输入。

2. 可测试性 #

纯函数（写法2）的测试成本极低：直接给不同的输入值，断言输出即可，不需要模拟组件的props或上下文。而写法1的函数依赖组件环境，测试时需要把它放在组件渲染的上下文里，或者额外抽离逻辑，步骤更繁琐。

3. 组件的耦合度与维护成本 #

• 组件规模小、逻辑简单时：写法1的耦合问题可以忽略，代码更直观。
• 组件规模大、props/state多的时候：写法1会让函数和组件强绑定，以后如果修改number的命名、或者调整props结构，容易漏改函数里的引用，维护起来更麻烦。写法2的函数和组件解耦，修改组件逻辑不会影响函数本身。

4. 性能（极端场景） #

如果辅助函数需要传给子组件，写法2的纯函数可以用useCallback缓存（依赖数组为空），避免子组件不必要的重渲染。而写法1的函数用useCallback时，依赖数组必须加上number，每次number变化都会重新创建函数——不过这种性能差异只有在高频渲染的组件里才需要考虑，普通场景下可以忽略。

总结建议 #

• 简单场景（函数只处理当前组件的单个props，无复用需求）：选写法1，代码更简洁。
• 复用/测试/复杂组件场景：选写法2，灵活性和可维护性更高。

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