React Native中return语句内console.log无限打印原因咨询

原因分析 #

你把console.log("hello")放在了JSX的{}表达式中，这会导致每次组件渲染时，这个console.log都会被执行一次。

React函数组件的工作机制是：每当组件需要更新（比如父组件渲染、自身状态/ props变化，甚至React严格模式下的双重渲染校验），整个组件函数体都会重新执行，return里的JSX也会重新求值。如果没有控制渲染触发的条件，console.log就会反复执行，看起来像是无限打印。

另外，你在组件函数内部每次渲染都调用require('react-native-fs')，虽然这不一定直接导致无限渲染，但会让每次渲染都重复加载模块，属于不必要的性能损耗，建议把模块引入移到文件顶部。

解决方案 #

1. 把console.log移到组件函数体顶层（非JSX内）

如果只是想在每次组件渲染时打印，放在函数体里即可，不会嵌入到JSX渲染流程中：

import * as React from'react';
import { Text, View } from 'react-native';
import RNFS from 'react-native-fs'; // 改用import并移到顶部

function ExportFile() {
    console.log("hello");
    return (
        <View>
            <Text>ExportFile</Text>
        </View>
    );
}

export default ExportFile;

2. 仅在组件挂载时打印一次（用useEffect）

如果只需要打印一次，使用useEffect并传入空依赖数组，确保只在组件挂载完成后执行一次：

import * as React from'react';
import { Text, View } from 'react-native';
import RNFS from 'react-native-fs';

function ExportFile() {
    React.useEffect(() => {
        console.log("hello");
    }, []); // 空数组表示仅在挂载和卸载时执行

    return (
        <View>
            <Text>ExportFile</Text>
        </View>
    );
}

export default ExportFile;

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