React Native如何从Pressable中提取通用onPress函数避免无限重渲染

• 无限重渲染核心原因：onPress属性需要接收函数引用作为点击回调，你写成onPress={addNumber('addition')}的写法会在组件渲染阶段直接执行addNumber函数，触发setNumber更新状态，状态更新会触发组件重渲染，重渲染又会再次执行addNumber，形成无限循环触发重渲染上限报错。
• 额外的代码错误：
  • 函数名拼写不匹配：你定义的函数名为addString，调用时写的是addNumber
  • 函数定义拼写错误：你写的funtion是错误拼写，正确关键字为function
  • 状态更新写法不严谨：直接使用getNumber + stringToAdd更新状态可能遇到闭包陷阱，无法拿到最新的状态值，推荐使用useState的函数式更新写法。

方案1：调用时包裹箭头函数 #

该方案无需修改封装的函数逻辑，直观易懂：

export default function App() {
    const [getNumber, setNumber] = useState('');

    function addString(stringToAdd){
        // 函数式更新保证拿到最新的状态值
        setNumber(prevNumber => prevNumber + stringToAdd);
    }
    return(
        <>
        ...
            {/* 用箭头函数包裹，仅在点击时执行更新逻辑 */}
            <Pressable style={styles.key} onPress={() => addString('addition')}>
                <Text>Add</Text>
            </Pressable>
            {/* 其余11个Pressable直接复用，仅修改传入的字符串参数即可 */}
            <Pressable style={styles.key} onPress={() => addString('customStr')}>
                <Text>Add Custom</Text>
            </Pressable>
        ...
        </>
    );
}

方案2：封装高阶函数返回回调 #

如果要简化调用代码，可将addString封装为高阶函数，直接返回供onPress使用的回调：

export default function App() {
    const [getNumber, setNumber] = useState('');

    // 高阶函数：调用后返回点击触发的回调函数
    function addString(stringToAdd){
        return function() {
            setNumber(prevNumber => prevNumber + stringToAdd);
        }
    }
    return(
        <>
        ...
            {/* 直接传入函数调用结果即可，渲染阶段不会触发状态更新 */}
            <Pressable style={styles.key} onPress={addString('addition')}>
                <Text>Add</Text>
            </Pressable>
        ...
        </>
    );
}

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