React Native Hooks 类组件转函数组件实现正确性咨询

当前尝试代码的核心错误 #

• 对props的认知偏差：原类组件中的people是从父组件传入的props值，并非组件内部维护的本地状态，完全不需要为其调用useState。你错误地在自定义函数myTitle内部声明了const [ people, setPeople ] = useState()，既把props错误当成了内部状态，又违反了React Hooks的强制规则——所有Hook必须在函数组件的顶层作用域调用，不能嵌套在普通函数、条件判断、循环逻辑中，这种写法会导致Hook调用顺序错乱，直接触发React运行时错误。
• 缺失props接收逻辑：函数组件没有声明入参解构，就算去掉错误的useState，也无法拿到从父组件传入的people参数，和原类组件的this.props.people逻辑完全不匹配。
• 漏写基础导入：不管是类组件还是函数组件版本，原生组件View都需要从react-native导入，否则会触发未定义引用报错。

基础正确版本（完全匹配原类组件逻辑） #

import React from 'react';
import { View } from 'react-native';
import { useTranslation } from 'i18next';

// 直接从函数入参解构props中的people，和原类组件this.props.people逻辑等价
function Booking({ people }) {
    const { t } = useTranslation();
    
    // 纯计算逻辑，不嵌套任何Hook调用
    const myTitle = () => {
        const nameFirst = idx(people, __ => __.nameFirst);
        return nameFirst ? t('Generate.NameOk', { nameFirst }) : t('Generate.NameNull');
    };

    return(
        <View>
            {myTitle()}
        </View>
    )
}

export default Booking;

性能优化版本（适合复杂计算场景） #

如果标题计算逻辑存在较多分支判断，可以用useMemo缓存计算结果，避免组件无关状态变化时的重复计算：

import React, { useMemo } from 'react';
import { View } from 'react-native';
import { useTranslation } from 'i18next';

function Booking({ people }) {
    const { t } = useTranslation();
    
    // 仅当people或t翻译函数变化时，才重新计算标题
    const title = useMemo(() => {
        const nameFirst = idx(people, __ => __.nameFirst);
        return nameFirst ? t('Generate.NameOk', { nameFirst }) : t('Generate.NameNull');
    }, [people, t]);

    return(
        <View>
            {title}
        </View>
    )
}

export default Booking;

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