当前位置：首页 > news >正文

大白话详细解读React框架的纯函数和高阶函数

news 来源：原创 2025/5/10 10:41:19

1. 纯函数（Pure Function）

1.1 什么是纯函数？

纯函数是指一个函数，只要输入相同，输出就一定相同，而且不会产生任何副作用（比如修改外部变量、发起网络请求、操作 DOM 等）。

简单来说，纯函数就像一个“数学函数”，它只关心输入和输出，不会对外界造成任何影响。

1.2 纯函数的特点

确定性：相同的输入，总是得到相同的输出。
无副作用：不会修改外部的状态或变量。

1.3 纯函数的例子

// 纯函数
function add(a, b) {
  return a + b;
}

// 非纯函数
let counter = 0;
function increment() {
  counter++; // 修改了外部变量，有副作用
  return counter;
}

add 是纯函数，因为它只依赖输入 a 和 b，并且不会修改外部状态。
increment 是非纯函数，因为它修改了外部变量 counter。

1.4 纯函数在 React 中的应用

在 React 中，纯函数常用于：

组件：函数式组件应该是纯函数，只根据 props 和 state 返回 UI。
Reducer：Redux 或 useReducer 中的 reducer 必须是纯函数，因为它负责根据 state 和 action 返回新的 state。

// 纯函数组件
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

2. 高阶函数（Higher-Order Function, HOF）

2.1 什么是高阶函数？

高阶函数是指一个函数，它接收一个或多个函数作为参数，或者返回一个函数。

简单来说，高阶函数就是“操作函数的函数”。

2.2 高阶函数的特点

接收函数作为参数：比如 map、filter、reduce 等。
返回一个函数：比如 React 的 HOC（高阶组件）。

2.3 高阶函数的例子

// 高阶函数：接收函数作为参数
function map(array, fn) {
  const result = [];
  for (let item of array) {
    result.push(fn(item));
  }
  return result;
}

// 高阶函数：返回一个函数
function createAdder(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = createAdder(5);
console.log(add5(2)); // 输出 7

2.4 高阶函数在 React 中的应用

在 React 中，高阶函数常用于：

高阶组件（HOC）：接收一个组件，返回一个新的组件。
事件处理：返回一个函数来处理事件。

// 高阶组件（HOC）
function withLoading(Component) {
  return function({ isLoading, ...props }) {
    if (isLoading) {
      return <div>Loading...</div>;
    }
    return <Component {...props} />;
  };
}

// 使用高阶组件
const UserListWithLoading = withLoading(UserList);

3. 纯函数和高阶函数的区别

纯函数：关注输入和输出，不产生副作用。
高阶函数：关注函数的操作，可以接收或返回函数。

4. 纯函数和高阶函数在 React 中的结合

在 React 中，纯函数和高阶函数经常一起使用。比如：

高阶组件：高阶组件本身是一个高阶函数，但它返回的组件应该是一个纯函数。
Redux 的 reducer：reducer 是纯函数，但它可以被高阶函数（比如 combineReducers）组合。

// 高阶组件 + 纯函数
function withLogger(Component) {
  return function(props) {
    console.log('Rendering:', Component.name);
    return <Component {...props} />;
  };
}

// 纯函数组件
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// 使用高阶组件
const UserListWithLogger = withLogger(UserList);