React函数式组件必须用函数表达式或箭头函数定义，不可用函数声明；需返回JSX或null，禁止顶层副作用，组件名大写，推荐const声明并具名导出。
JavaScript 中函数声明本身不适用于 React 函数式组件的定义——函数式组件必须是函数表达式（或箭头函数），且需满足 React 的渲染契约：返回有效的 JSX 或 null。
函数式组件不能用函数声明定义
React 要求组件是一个可被 React 调用并返回 UI 的函数。虽然语法上 function MyComponent() 是合法的 JavaScript 函数声明，但在现代 React（尤其是启用了严格模式、使用 ESLint 规则或与构建工具集成时）中，它会引发问题：
- 函数声明会被提升，但组件在模块顶层被调用前尚未“注册”为 React 组件，可能导致热重载异常或依赖顺序问题；
- ESLint 插件（如
react/display-name、react-hooks/rules-of-hooks）默认只对函数表达式和箭头函数做 Hook 检查，对函数声明可能漏报； - 当组件内使用 Hooks（如
useState、useEffect）时，React 依赖调用栈识别组件函数类型，函数声明在某些打包器或开发服务器中可能无法被正确识别为“组件函数”。
推荐写法：命名函数表达式或箭头函数
标准实践是将组件定义为常量赋值的函数表达式，确保其具有明确的标识、可预测的执行时机，并兼容所有 React 生态工具链：
- 命名函数表达式（推荐）：语义清晰，调试工具中显示函数名，支持 defaultProps 和 propTypes 更自然
-
箭头函数：简洁，适合无状态简单组件；但注意它没有自己的
this，也不支持displayName或defaultProps的直接挂载（需额外设置） - 无论哪种，都应使用
const声明，避免重新赋值
示例：
立即学习“Java免费学习笔记（深入）”；
const Header = function Header({ title }) {<br> return <h1>{title}</h1>;<br>};<br><br>const Footer = ({ children }) => <footer>{children}</footer>;
必须返回有效 JSX，且不能有副作用逻辑在顶层
函数式组件体内部不是普通函数体——它会在每次渲染时执行，因此：
- 顶层代码（return 之前）只能包含：Hook 调用、变量解构、条件逻辑（如 early return）、纯计算；
- 禁止在顶层执行 DOM 操作、发起 API 请求、订阅事件等副作用（应移入
useEffect）； - 必须有明确的返回值：
returnJSX 元素、null、undefined（等价于 null）、或 Fragment（<></>）； - 若需条件渲染，可用三元、逻辑 && 或提前 return，但不可遗漏 return。
命名与导出需保持一致
组件名必须以大写字母开头（React 约定），且文件名通常匹配组件名（如 Button.jsx 导出 Button）。导出方式推荐具名导出：
- 避免
export default function Foo(){}—— 这仍是函数声明，不推荐； - 正确写法：
export default const Foo = () => {...}（语法错误）→ 应写为：
const Button = () => <button>Click me</button>;<br>export default Button;
