去后台更新一下网站,网站建设与维护公司,wordpress keywords,怎么注册网址免费概述
高阶组件并非一个组件#xff0c;而是增强组件功能的一个函数。
高阶组件的作用是对多个组件公共逻辑进行横向抽离。 高阶组件 – React (reactjs.org) 示例
ChildCom1.jsx
import React from react;function ChildCom1(props) {return (div这是子组件1d…概述
高阶组件并非一个组件而是增强组件功能的一个函数。
高阶组件的作用是对多个组件公共逻辑进行横向抽离。 高阶组件 – React (reactjs.org) 示例
ChildCom1.jsx
import React from react;function ChildCom1(props) {return (div这是子组件1div姓名{props.name}/div/div);
}export default ChildCom1;ChildCom2.jsx
import React from react;function ChildCom1(props) {return (div这是子组件2div姓名{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 classNameApph1我是 App/h1NewChildCom1 name{xiuxiu}/NewChildCom2 age{18}//div);
}export default App;
