React Native组件输入/点击时闪屏求助（已尝试React.memo）

你的问题核心是内部组件定义在父组件内部导致React.memo失效，加上状态更新触发父组件重渲染，连带所有子组件重新渲染，最终引发闪屏。以下是具体解决方案：

1. 将内部组件移到父组件外部 #

你现在把PostJobModal、DescriptionStep、JobTypeStep都定义在CompanyHomePage内部，每次父组件重渲染时，这些组件都会被重新创建（相当于新的组件类型），React.memo根本无法生效——因为React会认为这是完全不同的组件，必然重渲染。

把这些组件移到CompanyHomePage函数外部，通过props传递状态和回调：

// 移到外部，避免每次父组件重渲染重新创建
const DescriptionStep = React.memo(({ jobTitle, setJobTitle, location, setLocation, description, setDescription }) => {
    return (
        <View>
            <Text style={styles.questionText}>Job Title</Text>
            <TextInput
                style={styles.textInputSmall}
                value={jobTitle}
                onChangeText={setJobTitle}
            />
            <Text style={styles.questionText}>Location</Text>
            <TextInput
                style={styles.textInputSmall}
                value={location}
                onChangeText={setLocation}
            />
            <View>
                <Text style={styles.currentLocationText}>Current Location</Text>
            </View>
            <Text style={styles.questionText}>Description</Text>
            <TextInput
                multiline={true}
                style={styles.textInputBig}
                value={description}
                onChangeText={setDescription}
            />
        </View>
    );
});

const JobTypeStep = React.memo(({ radioButtons, selectedId, setSelectedId }) => {
    return (
        <View>
            <Text style={styles.questionText}>Job Type</Text>
            <RadioGroup
                radioButtons={radioButtons}
                onPress={setSelectedId}
                selectedId={selectedId}
                layout='row'
            />
        </View>
    );
});

const PostJobModal = React.memo(({ visible, jobTitle, setJobTitle, location, setLocation, description, setDescription, radioButtons, selectedId, setSelectedId }) => {
    return (
        <Modal visible={visible}>
                <ProgressSteps>
                    <ProgressStep label="Description" nextBtnTextStyle={styles.progressStepText1} previousBtnTextStyle={styles.progressStepText}>
                        <DescriptionStep 
                            jobTitle={jobTitle}
                            setJobTitle={setJobTitle}
                            location={location}
                            setLocation={setLocation}
                            description={description}
                            setDescription={setDescription}
                        />
                    </ProgressStep>
                    <ProgressStep label="Job Type" nextBtnTextStyle={styles.progressStepText1} previousBtnTextStyle={styles.progressStepText}>
                        <JobTypeStep 
                            radioButtons={radioButtons}
                            selectedId={selectedId}
                            setSelectedId={setSelectedId}
                        />
                    </ProgressStep>
                </ProgressSteps>
        </Modal>
    );
});

export default function CompanyHomePage() {
    // 状态定义
    const [jobTitle, setJobTitle] = useState('');
    const [location, setLocation] = useState('');
    const [description, setDescription] = useState('');
    const [selectedId, setSelectedId] = useState('');
    const [radioButtons] = useState([/* 你的选项数据 */]);
    const [modalVisible, setModalVisible] = useState(false);

    // 用useCallback包裹回调，确保引用稳定
    const handleSetJobTitle = useCallback((text) => setJobTitle(text), []);
    const handleSetLocation = useCallback((text) => setLocation(text), []);
    const handleSetDescription = useCallback((text) => setDescription(text), []);
    const handleSetSelectedId = useCallback((id) => setSelectedId(id), []);

    return (
        {/* 页面其他内容 */}
        <Button title="Post Job" onPress={() => setModalVisible(true)} />
        <PostJobModal 
            visible={modalVisible}
            jobTitle={jobTitle}
            setJobTitle={handleSetJobTitle}
            location={location}
            setLocation={handleSetLocation}
            description={description}
            setDescription={handleSetDescription}
            radioButtons={radioButtons}
            selectedId={selectedId}
            setSelectedId={handleSetSelectedId}
        />
    );
}

// 统一管理样式，避免内联样式每次渲染生成新对象
const styles = StyleSheet.create({
    questionText: { /* 你的样式定义 */ },
    textInputSmall: { /* 你的样式定义 */ },
    textInputBig: { /* 你的样式定义 */ },
    progressStepText1: { /* 你的样式定义 */ },
    progressStepText: { /* 你的样式定义 */ },
    currentLocationText: {
        color: "#1348AA", 
        fontSize: 14, 
        fontFamily: "LibreBaskerville-Bold", 
        fontWeight: "400", 
        width: "100%", 
        textAlign: "left", 
        left: 90, 
        marginTop: -20,
    }
});

2. 确保props引用稳定 #

• 对于传递给子组件的回调函数，用useCallback包裹，避免每次父组件重渲染生成新的函数引用，导致React.memo认为props变化而重渲染。
• 对于静态数据（比如radioButtons），用useState初始化或者useMemo缓存，确保引用不变。

3. 优化Modal的渲染 #

• 确保Modal的visible状态只在需要显示/隐藏时更新，避免不必要的状态变更触发重渲染。
• 用React.memo包裹Modal组件，减少因父组件其他状态变化导致的Modal重渲染。

4. 统一管理样式 #

避免在组件内部每次渲染时创建新的内联样式对象，把所有样式移到StyleSheet.create中统一管理，减少因为样式引用变化导致的重渲染。

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