在 React 中应用函数式编程思想是现代 React 开发的核心实践，尤其随着 Hooks 的引入，函数式编程范式在 React 中得到了更自然的表达。以下是具体应用方式：

1. 组件设计：纯函数组件

React 函数组件本质上是纯函数：接收 props 作为输入，返回 UI 描述（JSX），不依赖外部状态，也不产生副作用。

// 纯函数组件示例
const UserProfile = ({ name, age, isActive }) => (
  <div className="profile">
    <h2>{name}</h2>
    <p>年龄：{age}</p>
    <p>状态：{isActive ? '活跃' : '离线'}</p>
  </div>
);

特点：

• 相同 props 始终渲染相同 UI
• 无内部状态（除非使用 Hooks）
• 易于测试和复用

2. 使用 Hooks 管理状态与副作用

Hooks 允许在函数组件中引入状态和副作用，同时保持函数式特性：

• useState：维护不可变状态（每次更新都是创建新状态）
• useEffect：隔离副作用（数据请求、DOM 操作等）
• useCallback/useMemo：缓存函数和计算结果，避免不必要的重渲染

import { useState, useCallback, useEffect } from 'react';

const UserList = () => {
  // 不可变状态
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);

  // 缓存函数（纯函数）
  const fetchUsers = useCallback(async () => {
    setLoading(true);
    // 副作用隔离在 useEffect 中
    try {
      const res = await fetch('/api/users');
      const data = await res.json();
      setUsers(data); // 不可变更新（替换状态）
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  }, []);

  // 副作用管理
  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]); // 依赖明确

  if (loading) return <div>加载中...</div>;
  
  // 纯函数渲染逻辑
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

3. 状态管理：不可变性优先

React 依赖状态的不可变性来高效更新 DOM，函数式编程强调的不可变数据在这里至关重要：

// 错误：直接修改状态（违反不可变性）
const handleAddUser = (newUser) => {
  users.push(newUser); // 错误！
  setUsers(users);
};

// 正确：创建新状态
const handleAddUser = (newUser) => {
  setUsers([...users, newUser]); // 新数组
};

// 复杂对象更新（使用扩展运算符或 Immer 库）
const handleUpdateAge = (userId, newAge) => {
  setUsers(
    users.map(user => 
      user.id === userId ? { ...user, age: newAge } : user
    )
  );
};

推荐使用 Immer 简化不可变更新：

import { produce } from 'immer';

const handleUpdateAge = (userId, newAge) => {
  setUsers(produce(draft => {
    const user = draft.find(u => u.id === userId);
    if (user) user.age = newAge; // "直接修改" 草稿，Immer 会生成新状态
  }));
};

4. 业务逻辑：函数组合与柯里化

将复杂逻辑拆分为纯函数，通过组合实现复用：

// 纯函数：筛选活跃用户
const filterActiveUsers = (users) => users.filter(u => u.isActive);

// 纯函数：提取用户名
const getUsernames = (users) => users.map(u => u.name);

// 纯函数：格式化名称（柯里化）
const formatName = (prefix) => (name) => `${prefix}${name}`;

// 函数组合：筛选 -> 提取 -> 格式化
const getFormattedActiveUsernames = (users) => {
  const activeUsers = filterActiveUsers(users);
  const usernames = getUsernames(activeUsers);
  return usernames.map(formatName('用户：'));
};

// 在组件中使用
const ActiveUserList = ({ users }) => (
  <div>
    <h3>活跃用户</h3>
    <ul>
      {getFormattedActiveUsernames(users).map((name, i) => (
        <li key={i}>{name}</li>
      ))}
    </ul>
  </div>
);
    

5. 自定义 Hooks：封装可复用逻辑

自定义 Hooks 是函数式编程"提取公共逻辑"思想的体现，本质是纯函数的组合：

// 纯函数逻辑：处理本地存储
const useLocalStorage = (key, initialValue) => {
  // 状态初始化（副作用）
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  // 副作用：同步到本地存储
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  // 返回纯函数操作
  return [value, setValue];
};

// 使用自定义 Hook
const ThemeSwitcher = () => {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      当前主题：{theme}
    </button>
  );
};

6. 状态管理库：Redux 的函数式实践

Redux 完全基于函数式编程思想：

• Reducers：纯函数，接收旧状态和动作，返回新状态
• Actions：纯对象，描述发生的事件
• Middleware：纯函数，处理副作用（如 Redux-Thunk、Redux-Saga）

// Reducer 纯函数示例
const userReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_USER':
      return [...state, action.payload]; // 不可变更新
    case 'REMOVE_USER':
      return state.filter(u => u.id !== action.payload);
    default:
      return state; // 不修改状态
  }
};

核心优势

1. 可预测性：纯函数和不可变状态使程序行为更可预测
2. 可测试性：纯函数无需模拟依赖，直接断言输入输出
3. 可维护性：拆分后的小函数更容易理解和复用
4. 性能优化：不可变性便于 React 进行浅比较优化渲染

React 与函数式编程的结合，让前端开发更简洁、可靠，尤其适合复杂应用的状态管理和逻辑复用。