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

【React】高阶组件

news 2025/7/1 17:50:00

概述

高阶组件并非一个组件，而是增强组件功能的一个函数。

高阶组件的作用是对多个组件公共逻辑进行横向抽离。

高阶组件 – React (reactjs.org)

示例

ChildCom1.jsx

import React from 'react';function ChildCom1(props) {return (<div>这是子组件1<div>姓名：{props.name}</div></div>);
}export default ChildCom1;

ChildCom2.jsx

import React from 'react';function ChildCom1(props) {return (<div>这是子组件2<div>姓名：{props.age}</div></div>);
}export default ChildCom2;

withLog.js

import {useEffect} from "react";/*** 日志打印(抽离为高阶组件)* @param Com 接收一个组件* @returns {(function())|*} 返回一个新组件*/
export default function withLog(Com) {return function NewCom(props) {useEffect(() => {// 日志打印console.log(`${Com.name}已经创建，创建时间是：`, new Date().toLocaleString());return function () {// 组件销毁时执行console.log(`${Com.name}已经销毁，销毁时间是：`, new Date().toLocaleString());}}, []);// 一般来讲，传入的组件会作为新组件的视图返回return <Com {...props}/>}
}

withTimer.js

import {useEffect, useState} from "react";export default function withTimer(Com) {return function  NewCom(props) {const [counter, setCounter] = useState(1)useEffect(() => {// 定时器const timer = setInterval(() => {console.log(counter)setCounter(counter + 1)}, 1000)return () => {clearInterval(timer)}}, [counter]);return <Com {...props} />}
}

App.js

import ChildCom1 from "./components/ChildCom1";
import ChildCom2 from "./components/ChildCom2";
import withLog from "./HOC/withLog";
import withTimer from "./HOC/withTimer";const NewChildCom1 = withTimer(withLog(ChildCom1))
const NewChildCom2 = withTimer(withLog(ChildCom2))function App() {return (<div className="App"><h1>我是 App</h1><NewChildCom1 name={"xiuxiu"}/><NewChildCom2 age={18}/></div>);
}export default App;