常规JavaScript函数与React函数组件的区别及示例请求

二者并非只是写法不同，核心定位、运行逻辑和可用特性都有本质差异，以下结合示例说明：

1. 核心定位与返回值要求不同 #

• 常规JavaScript函数是通用逻辑的封装，返回值可以是任意类型（数字、字符串、对象等），目的是完成特定计算或逻辑操作。
• React函数组件是UI渲染单元，必须返回React元素（JSX、null或其他React可渲染节点），目的是生成页面UI。

常规JS函数示例 #

// 封装字符串格式化逻辑的常规函数
function formatName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

// 直接调用获取结果
const fullName = formatName("John", "Doe");
console.log(fullName); // 输出 "John Doe"

React函数组件示例 #

// 渲染用户名称的React组件
function UserName({ firstName, lastName }) {
  // 必须返回JSX（React元素）
  return <span className="user-name">{`${firstName} ${lastName}`}</span>;
}

// 在React应用中作为组件使用
function App() {
  return (
    <div className="app">
      <UserName firstName="John" lastName="Doe" />
    </div>
  );
}

2. 调用方式与运行环境不同 #

• 常规JS函数由开发者主动调用，参数可以是任意值，可在浏览器、Node.js等所有JS环境运行。
• React函数组件由React框架自动调用：当组件被挂载到DOM或props/状态更新时，React会自动执行组件函数，传入的参数是组件的props，且只能在React应用的渲染流程中运行。

3. 可用特性不同 #

• 常规JS函数仅能使用原生JavaScript的所有特性，无法直接使用React专属能力。
• React函数组件除了原生JS特性外，还可以使用React提供的专属API：比如useState、useEffect等Hook来管理状态、处理副作用，以及访问React上下文（Context）等。

带状态的React组件示例 #

import { useState } from 'react';

// 使用React Hook管理状态的函数组件
function Counter() {
  // 用useState创建组件内部状态
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数：{count}</p>
      {/* 点击按钮更新状态，触发组件重新渲染 */}
      <button onClick={() => setCount(count + 1)}>点击加1</button>
    </div>
  );
}

总结 #

所谓“二者无差异只是写法不同”的说法并不准确：一个普通JS函数只有在返回React元素、被React当作UI组件渲染时，才成为React函数组件。二者的核心区别在于用途——前者是逻辑工具，后者是React生态中的UI渲染单元。

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