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

织梦新手网站建设关键词网络推广企业

wzjs 2025/7/27 21:45:44

织梦新手网站建设,关键词网络推广企业,厦门加盟网站建设,网站开发的排期1. 纯函数（Pure Function） 1.1 什么是纯函数？ 纯函数是指一个函数，只要输入相同，输出就一定相同，而且不会产生任何副作用（比如修改外部变量、发起网络请求、操作 DOM 等）。简单来…

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);