能否将React函数式组件仅用于封装函数而不返回JSX？

首先给出结论：可以导入这类函数，但这么做没有任何意义，完全不符合React组件的设计逻辑。

为什么你的示例没用？ #

看你写的代码：

const Example = () => {
    function exampleFunction(){
        const first = 1;
        const second = 2;
        console.log('first:', first);
        console.log('second:', second);
    }
}

export default Example;

这里的Example只是一个普通函数，但它既没有返回任何可渲染的JSX/React元素，也没有把内部的exampleFunction暴露出来。就算你导入它，你既不能把它当作React组件渲染（React会报错，因为组件必须返回可渲染内容），也没法调用里面的exampleFunction（它是函数内部的私有方法，外部访问不到）。

正确的封装函数方式 #

如果只是想封装通用函数，根本不需要套React组件的壳，直接导出函数或者工具对象就行：

方式1：直接导出单个函数

// Example.js
export const exampleFunction = () => {
    const first = 1;
    const second = 2;
    console.log('first:', first);
    console.log('second:', second);
}

导入使用：

import { exampleFunction } from './Example';

// 直接调用函数
exampleFunction();

方式2：导出多个函数的集合

// Example.js
const exampleFunction = () => {
    const first = 1;
    const second = 2;
    console.log('first:', first);
    console.log('second:', second);
}

const anotherHelper = () => {
    // 其他逻辑
}

export default { exampleFunction, anotherHelper };

导入使用：

import utils from './Example';

utils.exampleFunction();
utils.anotherHelper();

如果依赖React特性怎么办？ #

如果你要封装的函数需要用到React的hooks（比如useState、useEffect），那应该用自定义hooks，而不是无返回的组件。比如：

// useExample.js
import { useState } from 'react';

export const useExample = () => {
    const [count, setCount] = useState(0);

    const incrementCount = () => {
        setCount(prev => prev + 1);
        console.log('current count:', count);
    }

    return { count, incrementCount };
}

其他组件可以这样用：

import { useExample } from './useExample';

const MyComponent = () => {
    const { count, incrementCount } = useExample();

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={incrementCount}>加1</button>
        </div>
    );
}

总结 #

• 单纯封装工具函数：别用React组件，直接导出函数/对象，简单高效
• 封装依赖React特性的逻辑：用自定义hooks，这是React官方推荐的复用逻辑方式
• 无返回的"假组件"：导入后既不能渲染也不能用内部函数，完全没用

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