web前端全系列 教程
1839个小节阅读:2243.5k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
高阶组件(HOC)
是一个函数
高阶组件(HOC)
接受一个组件为参数,返回值为新组件
可以把 高阶组件
看作是组件的加工厂
,接收旧组件返回包装后的新组件
react如果有多个组件都用到了同一段逻辑
, 这时,就可以把共同的逻辑部分提取出来,利用高阶组件的形式将这段逻辑整合到每一个组件中, 从而减少代码的逻辑重复
xxxxxxxxxx
//UserView1.js
import React, { Component } from 'react'
export default class UserView1 extends Component {
constructor(props) {
super(props)
// 初始化state的userInfo属性
this.state = { userInfo: {} }
}
componentDidMount(){
// 获取用户信息,并且存储到state当中
let userInfo = JSON.parse(localStorage.getItem("userInfo"))
this.setState({ userInfo })
}
render() {
return (
<div>
<h3>我是第一个使用用户信息的界面</h3>
用户账号是:{this.state.userInfo.username}
</div>
)
}
}
xxxxxxxxxx
//UserView2.js
import React, { Component } from 'react'
export default class UserView2 extends Component {
constructor(props) {
super(props)
// 初始化state的userInfo属性
this.state = { userInfo: {} }
}
componentDidMount(){
// 获取用户信息,并且存储到state当中
let userInfo = JSON.parse(localStorage.getItem("userInfo"))
this.setState({ userInfo })
}
render() {
return (
<div>
<h3>我是第二个使用用户信息的界面</h3>
用户账号是:{this.state.userInfo.username}
</div>
)
}
}
创建高阶组件
xxxxxxxxxx
export default function withUserData(WrappedComponent) {
return class extends React.Component {
constructor(props) {
super(props)
// 初始化state的userInfo属性
this.state = { userInfo: {} }
}
componentDidMount() {
// 获取用户信息,并且存储到state当中
let userInfo = JSON.parse(localStorage.getItem("userInfo"))
this.setState({ userInfo })
}
render() {
// ...this.props 传递给当前组件的属性继续向下传递
return <WrappedComponent userInfo={this.state.userInfo} {this.props} />
}
}
}
使用高阶组件
xxxxxxxxxx
//UserView1.js
import React, { Component } from 'react'
import withUserData from './components/withUserData'
class UserView1 extends Component {
render() {
return (
<div>
<h3>我是第一个使用用户信息的界面</h3>
用户账号是:{this.props.userInfo.username}
</div>
)
}
}
export default withUserData(UserView1)
xxxxxxxxxx
//UserView2.js
import React, { Component } from 'react'
import withUserData from './components/withUserData'
class UserView2 extends Component {
render() {
return (
<div>
<h3>我是第二个使用用户信息的界面</h3>
用户账号是:{this.props.userInfo.username}
</div>
)
}
}
export default withUserData(UserView2)
实时效果反馈
1. 下列说法错误的是:
A 高阶组件是一个函数
B 高阶组件的参数必须有一个是组件
C 高阶组件可以抽象提取多个组件共享的逻辑
D 高阶组件不接受参数
答案
1=>D