在 React 生态中，“函数形式”主要围绕 函数组件（Function Components） 展开，它是 React 16.8+ 后推荐的组件编写方式（替代早期的类组件），核心是通过 JavaScript 函数定义组件，并结合 Hooks 实现状态管理、生命周期等特性。以下从核心概念、分类、关键特性及使用场景等方面，系统总结 React 中的函数形式：

一、核心：函数组件（Function Components）

函数组件是 React 中最基础的“函数形式”，本质是一个 接收 props 作为参数、并返回 React 元素（虚拟 DOM） 的 JavaScript 函数。

1. 基础语法（无状态）

早期函数组件仅用于“展示型组件”（无自身状态，仅依赖 props 渲染），语法极简：

// 定义：接收 props 并返回 JSX
function Greeting(props) {
  // 从 props 中解构参数（更简洁）
  const { name } = props;
  // 返回 React 元素（必须有一个根节点，如 div、<> 空片段）
  return <h1>Hello, {name}!</h1>;
}

// 使用：像标签一样调用，通过属性传递 props
function App() {
  return <Greeting name="React" />; // 渲染结果：<h1>Hello, React!</h1>
}

2. 关键特点

• 无 this 绑定：类组件需处理 this 指向问题（如 this.props、this.setState），函数组件直接通过参数和变量访问数据，避免 this 陷阱。
• 纯函数特性（无状态时）：若仅依赖 props 渲染，输入相同则输出一定相同，符合“纯函数”定义，便于测试和优化。
• 依赖 Hooks 扩展能力：16.8+ 引入 Hooks 后，函数组件可通过 useState、useEffect 等 Hooks 实现状态管理、生命周期逻辑，彻底替代类组件。

二、带状态的函数组件：结合 Hooks

Hooks 是 React 为函数组件设计的“增强工具”，让函数组件能拥有 状态（State） 和 副作用（Side Effect，如请求、DOM 操作）。以下是与“函数形式”强相关的核心 Hooks：

Hook 名称	作用	函数形式示例
useState	为函数组件添加“局部状态”	const [count, setCount] = useState(0);（初始值 0，setCount 用于更新状态）
useEffect	处理副作用（模拟类组件生命周期）	useEffect(() => { /* 组件挂载/更新时执行 */ }, [deps]);
useContext	跨组件共享状态（避免 props 逐层传递）	const theme = useContext(ThemeContext);
useReducer	复杂状态管理（替代 useState 处理多状态依赖）	const [state, dispatch] = useReducer(reducer, initialState);
useCallback	缓存函数（避免子组件不必要重渲染）	const handleClick = useCallback(() => {}, []);
useMemo	缓存计算结果（避免重复昂贵计算）	const sum = useMemo(() => a + b, [a, b]);
useRef	保存 DOM 元素或持久化变量（不触发重渲染）	const inputRef = useRef(null);（通过 inputRef.current 访问 DOM）

示例：带状态和副作用的函数组件

import { useState, useEffect } from 'react';

function Counter() {
  // 1. 用 useState 定义状态：count（值）和 setCount（更新函数）
  const [count, setCount] = useState(0);
  const [title, setTitle] = useState('Counter');

  // 2. 用 useEffect 处理副作用：更新文档标题（模拟类组件的 componentDidMount/Update）
  useEffect(() => {
    document.title = `${title}: ${count}`; // 组件挂载/更新时执行
  }, [count, title]); // 依赖数组：仅当 count 或 title 变化时重新执行

  // 3. 定义事件处理函数
  const increment = () => setCount(prev => prev + 1); // 函数式更新（避免状态依赖问题）
  const changeTitle = () => setTitle('New Counter');

  // 4. 返回 JSX
  return (
    <div>
      <h2>{title}</h2>
      <p>当前计数：{count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={changeTitle}>修改标题</button>
    </div>
  );
}

三、函数组件的进阶形式

除了基础函数组件，React 中还有几种常见的“函数形式”变体，用于特定场景：

1. 箭头函数组件（简洁写法）

用 JavaScript 箭头函数定义组件，语法更短，适合简单组件：

// 基础箭头函数组件（接收 props）
const Button = (props) => <button onClick={props.onClick}>{props.label}</button>;

// 解构 props + 多行 JSX（需加 {} 和 return）
const Card = ({ title, content }) => {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{content}</p>
    </div>
  );
};

2. 高阶函数组件（Higher-Order Components, HOC）

HOC 是一个 接收组件作为参数、并返回新组件 的函数，用于复用组件逻辑（如权限控制、数据请求）。
⚠️ 注意：HOC 是早期 React 的复用方案，现在更推荐用 useContext + 自定义 Hooks 替代，但仍需了解其原理。

// 定义 HOC：为组件添加“权限校验”逻辑
function withAuth(WrappedComponent) {
  // 返回新的函数组件
  return function AuthComponent(props) {
    const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';

    // 权限校验：未登录则跳转登录页，否则渲染原组件
    if (!isLoggedIn) {
      return <div>请先登录！</div>;
    }

    // 将 props 传递给原组件（避免 props 丢失）
    return <WrappedComponent {...props} />;
  };
}

// 使用 HOC：为 Profile 组件添加权限控制
const Profile = () => <div>用户个人中心</div>;
const AuthProfile = withAuth(Profile); // 增强后的组件

// 在 App 中使用
function App() {
  return <AuthProfile />; // 若未登录，显示“请先登录”；否则显示 Profile
}

3. 自定义 Hooks（函数形式的逻辑复用）

自定义 Hooks 是 命名以 use 开头的函数，用于抽取和复用组件中的逻辑（如请求数据、表单处理），是 React 16.8+ 推荐的逻辑复用方案。

// 自定义 Hook：复用“数据请求”逻辑
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 异步请求函数（useEffect 不能直接写 async，需嵌套）
    const fetchData = async () => {
      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error('请求失败');
        const json = await res.json();
        setData(json);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  // 返回状态：供组件使用
  return { data, loading, error };
}

// 使用自定义 Hook：在组件中复用请求逻辑
function UserList() {
  // 调用自定义 Hook，传入请求地址
  const { data: users, loading, error } = useFetch('https://api.example.com/users');

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

四、函数组件 vs 类组件（为什么推荐函数形式）

React 早期以类组件为主，但 16.8+ 后函数组件成为主流，核心优势如下：

对比维度	函数组件（Function Components）	类组件（Class Components）
语法简洁性	极简，无 class、constructor、this	繁琐，需定义类、render 方法、处理 this
状态管理	依赖 Hooks（useState/useReducer）	依赖 this.state 和 this.setState
生命周期	依赖 useEffect 统一处理（更灵活）	需区分 componentDidMount/Update 等多个方法
逻辑复用	自定义 Hooks（简洁、无嵌套）	HOC 或 Render Props（易产生“嵌套地狱”）
性能优化	useCallback/useMemo 精准缓存	shouldComponentUpdate/PureComponent（较繁琐）
学习成本	低（仅需掌握 JS 函数 + Hooks 规则）	高（需理解类、this、生命周期钩子）

五、函数组件的核心规则

1. 组件名称首字母必须大写：React 通过首字母区分“组件”和“普通 HTML 标签”（如 <Greeting> 是组件，<div> 是标签）。
2. 必须返回单个根元素：JSX 必须有一个顶层容器（可使用 <> 空片段避免多余 DOM）。
3. Hooks 必须在函数组件/自定义 Hooks 顶部调用：不能在 if、for 或嵌套函数中调用 Hooks（React 依赖 Hooks 调用顺序确保状态正确）。
4. Hooks 命名必须以 use 开头：如 useState、useFetch（自定义 Hooks），便于 React 识别和校验。

总结

React 中的“函数形式”本质是 以 JavaScript 函数为载体，实现组件定义、状态管理、逻辑复用 的范式，核心包括：

1. 基础函数组件：接收 props 并返回 JSX，无状态时为纯函数；
2. 带 Hooks 的函数组件：通过 useState/useEffect 等 Hooks 拥有状态和副作用，替代类组件；
3. 进阶形式：箭头函数组件（简洁）、HOC（早期复用）、自定义 Hooks（现代逻辑复用）；

其核心优势是 语法简洁、无 this 陷阱、逻辑复用灵活，是当前 React 开发的首选方案。