【React】高阶组件

概述

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

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

高阶组件 – 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;