构建你的第一款React高阶组件

前端

2023-12-11 11:12:50

React高阶组件：重用代码的利器

前言

在软件开发领域，代码重用始终是提高效率的一大秘诀。React中，高阶组件（HOC）正是实现组件逻辑重用的有力帮手，降低开发成本的同时提升代码可维护性。

什么是React高阶组件？

简单而言，高阶组件是一种能够生成新组件的函数。新组件继承原组件的逻辑，并在此基础上添加额外的功能和行为。在React中，高阶组件常用于以下场景：

共享逻辑： 当多个组件拥有相同逻辑时，可将其提取到高阶组件中，并在各组件中重复使用，减少代码冗余。
代码重构： 组件过于臃肿或复杂时，可利用高阶组件进行代码重构，将部分逻辑从组件中剥离出来。
扩展组件功能： 高阶组件能为现有组件添加新功能，而无需修改组件本身的代码，例如状态管理或数据获取功能。

打造自己的高阶组件

了解高阶组件的最佳途径莫过于亲自动手实践。让我们逐步构建一个简单的React高阶组件：

创建基础组件：

import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

构建高阶组件：

基于基础组件，我们创建高阶组件，添加日志功能，记录计数器变化：

import React from "react";

export default function withLogging(Component) {
  return function (props) {
    console.log(`Current count: ${props.count}`);
    return <Component {...props} />;
  };
}

使用高阶组件：

将高阶组件应用到基础组件，启用日志功能：

import React from "react";
import Counter from "./Counter";
import withLogging from "./withLogging";

const LoggedCounter = withLogging(Counter);

export default function App() {
  return <LoggedCounter />;
}