目录
九、高阶组件和组件补充
1、认识高阶组件
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './layout/App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App name="黄婷婷"/>);
import React from "react";
/**
* 1、高阶函数的维基百科定义：至少满足以下条件之一
* - 接收一个或多个函数作为输入
* - 输出一个函数
* 2、那么什么是高阶组件呢
* - 高阶组件的英文是Higher-Order Components，简称为HOC
* - 官方的定义：高阶组件是参数为组件，返回值为新组件的函数
* - 我们可以进行如下的解析
* ~ 首先，高阶组件本身不是一个组件，而是一个函数
* ~ 其次，这个函数的参数是一个组件，返回值也是一个组件
* 3、高阶组件的定义
* - 高阶组件的调用过程类似于这样：
* const EnhancedComponent = higherOrderComponent(WrappedComponent)
* 4、devtools的组件展示名称默认取class后的类名，如果class后没有类名则取父类class的类名。
* 也可以手动取组件的展示名称：
* - class App {};App.displayName = '展示名称';
* - const App = class {};App.displayName = '展示名称';
*/
class App extends React.PureComponent {
render() {
return (<div>
姓名：{this.props.name}
</div>)
}
}
function enhanceComponent(WrappedComponent) {
return class NewComponent extends React.PureComponent {
render() {
return <WrappedComponent {...this.props}/>
}
}
}
const EnhanceComponent = enhanceComponent(App)
export default EnhanceComponent
2、高阶组件应用-增强props
import React from "react";
export default class App extends React.PureComponent {
render() {
return (<EnhanceComponent name="阿尔萨斯"/>)
}
}
class Home extends React.PureComponent {
render() {
return (<div>
<div>姓名：{this.props.name}</div>
<div>年龄：{this.props.age}</div>
</div>)
}
}
function enhanceComponent(WrappedComponent) {
return props => {
return (<Home {...props} age={18}/>)
}
}
const EnhanceComponent = enhanceComponent(App)
import React from "react";
const UserContext = React.createContext({
name: "希尔瓦娜斯",
age: 19
})
export default class App extends React.PureComponent {
render() {
return (<EnhanceComponent/>)
}
}
class Home extends React.PureComponent {
render() {
return (<div>
<div>姓名：{this.props.name}</div>
<div>年龄：{this.props.age}</div>
</div>)
}
}
function enhanceComponent(WrappedComponent) {
return props => {
return (<UserContext.Consumer>
{
value => {
return <Home {...props} {...value}/>
}
}
</UserContext.Consumer>)
}
}
const EnhanceComponent = enhanceComponent(App)
3、高阶组件应用-登录鉴权操作
import React from "react";
function withAuth(WrappedComponent) {
return class AuthCartPage extends React.PureComponent {
render() {
const {isLogin} = this.props
if (isLogin) {
// 注意：组件名一定要大写开头
return <WrappedComponent {...this.props}/>
} else {
return <LoginPage {...this.props}/>
}
}
}
}
class CartPage extends React.PureComponent {
render() {
return (<div>CartPage</div>)
}
}
const AuthCartPage = withAuth(CartPage);
class LoginPage extends React.PureComponent {
render() {
return (<div>LoginPage</div>)
}
}
export default class App extends React.PureComponent {
render() {
return (<div>
<AuthCartPage isLogin={false}/>
</div>)
}
}
4、高阶组件应用-生命周期劫持
import React from "react";
function withRenderTime(WrappedComponent) {
return class extends React.PureComponent {
UNSAFE_componentWillMount() {
this.beginTime = Date.now()
}
render() {
return (<WrappedComponent {...this.props}/>)
}
componentDidMount() {
this.endTime = Date.now()
const interval = this.endTime - this.beginTime
console.log(`${WrappedComponent.name}渲染时间：${interval}`)
}
}
}
class Home extends React.PureComponent {
render() {
return (<div>Home</div>)
}
}
class About extends React.PureComponent {
render() {
return (<div>About</div>)
}
}
const TimeHome = withRenderTime(Home);
const TimeAbout = withRenderTime(About);
export default class App extends React.PureComponent {
render() {
return (<div>
<TimeHome/>
<TimeAbout/>
</div>)
}
}
5、ref的转发
import React from "react";
class Home extends React.PureComponent {
render() {
return (<div>Home</div>)
}
}
const Profile = React.forwardRef(function (props, ref) {
return (<div ref={ref}>Profile</div>)
})
export default class App extends React.PureComponent {
constructor(props) {
super(props);
this.titleRef = React.createRef()
this.homeRef = React.createRef()
this.profileRef = React.createRef()
}
render() {
return (<div>
<div ref={this.titleRef}>hello world</div>
<Home ref={this.homeRef}/>
<Profile ref={this.profileRef}/>
<button onClick={e => this.printRef()}>打印ref</button>
</div>)
}
printRef() {
console.log(this.titleRef.current)
console.log(this.homeRef.current)
console.log(this.profileRef.current)
}
}
6、Portals的使用
import React from "react";
import ReactDOM from "react-dom"
// ui框架dialog的实现原理
class Modal extends React.PureComponent {
render() {
const div = document.createElement("div");
Object.assign(div.style, {
position: "fixed",
left: "50%",
top: "50%",
transform: "translate(-50%,-50%)"
})
document.body.appendChild(div)
return ReactDOM.createPortal(
this.props.children,
div
)
}
}
class Home extends React.PureComponent {
render() {
return (<div>
<div>Home</div>
<Modal>
<div>Title</div>
</Modal>
</div>)
}
}
export default class App extends React.PureComponent {
render() {
return (<div>
<Home/>
</div>)
}
}