前言
上篇文章给大家介绍了高阶函数的相关的概念，了解了高阶函数的思想后，这篇来带大家学习高阶组件相关的知识。如果没学习上篇的同学，点击下方链接查看精彩内容：
react中高阶函数与高阶组件的运用—（上）（案例详细解释高阶函数）
高阶组件
高阶组件就是一个函数,这个函数接收一个组件作为参数,并返回一个新的组件。高阶组件(HOC)是React中用于复用组件逻辑的一种高级技巧。HOC自身不是React API的一部分,它是一种基于React的组合特性而形成的设计模式。
高阶组件例子说明
这里我们还是写一个例子，写成组件的形式来说明，一共有登录，登出，注册三个：
登录：
import React, {
Component } from 'react'
export class Login extends Component {
state = {
username: ''
}
// 模拟使用axios获取useranem，在生命周期中实现
componentDidMount() {
const username = 'admin'
this.setState({
username: username})
}
render() {
return (
<div>
<h1>Login</h1>
<p>{
this.state.username}登录了</p>
</div>
)
}
}
export default Login
登出和注册的内容跟上面一样，就名字不同，这里我就不贴代码了影响篇幅
可以看到这三个组价都会有重复的部分，比如这里的获取username，那么我们这么避免这些组件里的冗余代码呢？我们需要写一个高阶组件，把相同的部分提取出来。
案例改写
定义username.js文件：
1.定义PropUsername，里面的参数WrapComponent是一个组件
2.里面的state和componentDidMount跟上面的一样，也就是重复代码
3.这里需要返回username给外面用到，所以需要使用props进行传值，也就是返回return < WrapComponent username={this.state.username} />
4. 最后返回这个组件
import React, {
Component } from 'react'
function PropUsername(WrapComponent) {
class NewComponent extends Component {
state = {
username: ''}
componentDidMount() {
const username = '超管admin'
this.setState({
username: username})
}
render() {
return <WrapComponent username={
this.state.username} />
}
}
return NewComponent
}
export default PropUsername
上面已经把公共重复的部分写成了高阶组件，那么在其它的地方怎么去使用这个组件呢？
登录页面改写如下（登出和注册与之相同）：
1.上面公共部分写成了高阶组件，利用props进行传值，所以这里使用this.props.username接收值
2.在最后抛出的时候 改写成抛出PropUsername(Login)，将组件login传入进去即可
import React, {
Component } from 'react'
import PropUsername from './04username'
export class Login extends Component {
render() {
return (
<div>
<h1>Login</h1>
<p>{
this.props.username}登录了</p>
</div>
)
}
}
export default PropUsername(Login)
登录鉴权
什么是登录鉴权呢？看下面例子：
class Login extends Component {
render() {
return (
<div>
<h1>登录页面</h1>
</div>
)
}
}
class Admin extends Component {
render() {
return (
<div>
<h1>管理员页面</h1>
</div>
)
}
}
假如有登录页面和管理员页面，state中有一个islogin属性，我们需要通过islogin属性来判断展示哪个页面，应该怎么去做呢？大部分人应该想到是用三目表达式去写，如果这里要用高阶组件应该如何去实现？
看如下代码，抽离为高阶组件：
1.定义AuthComponent函数，接收的参数Component为一个组件
2. 定义NewComp，然后通过props来进行判断，从props中拿到 isLogin，为true就返回调用的Component，并把props传进来。如果为false就返回< Login/>
3. 最后再将NewComp返回出去。在外面定义AuthAdmin，讲admin传入AuthComponent函数中
function AuthComponent(Component) {
const NewComp = (props) => {
const {
isLogin} = props
// 如果为true展示Admin组件,反之展示Login组件
if (isLogin) {
return <Component {
...props}/>
} else {
return <Login/>
}
}
return NewComp
}
const AuthAdmin = AuthComponent(Admin)
使用上面的高阶函数：
1.直接使用上面定义的AuthAdmin组件，isLogin传入this.state.isLogin的值
class App extends Component {
state = {
isLogin: true}
render() {
return (
<div>
<h1>主页面</h1>
<AuthAdmin isLogin={
this.state.isLogin}/>
<button onClick={
this.click}>{
this.state.isLogin ? '退出' : '请登录'}</button>
</div>
)
}
click = () => {
this.setState({
isLogin: !this.state.isLogin})
}
}
export default App
查看效果：
增强props
给每一个prop多传一个属性,一个一个传没有关系,但如果组件过多,一个个传就不太合适了,而且直接给组件添加属性的方式会改变原来的代码结构,我们可以使用高阶组件,对每一个组件在使用之前进行劫持,给每个组件添加一个新的属性。
看如下例子：
import React, {
Component } from 'react'
class People extends Component {
render() {
return (
<div>
<h1>People Page</h1>
<p>我的名字是：{
this.props.name}</p>
<p>我的年龄是：{
this.props.age}</p>
<p>我的兴趣是：{
this.props.inst}</p>
<p>我的爱好是：{
this.props.hobby}</p>
</div>
)
}
}
class Boy extends Component {
render() {
return (
<div>
<h1>Boy Page</h1>
<p>我的名字是：{
this.props.name}</p>
<p>我的年龄是：{
this.props.age}</p>
<p>我的兴趣是：{
this.props.inst}</p>
<p>我的爱好是：{
this.props.hobby}</p>
</div>
)
}
}
const PropsComponent = (Component) => {
// 返回一个函数式组件
const newComponent = (props) => {
return <Component {
...props} inst="打代码" hobby="打游戏" />
}
return newComponent
}
const PeopleProps = PropsComponent(People)
const BoyProps = PropsComponent(Boy)
export class App extends Component {
render() {
return (
<div>
<PeopleProps name="张三" age="16"/>
<BoyProps name="李四" age="12"/>
</div>
)
}
}
export default App
这里直接定义了高阶组件PropsComponent用于展示，把相同的props属性直接写在高阶组价当中：< Component {…props} inst=“打代码” hobby=“打游戏” />，不同的属性，则可以直接展示在最后的组件中利用props传值实现。
所以高阶组件进行props增强，可以更加灵活的使用props
好了本篇文章的内容就到此结束了，本篇主要是通过案例带大家学习了高阶组件的使用，以及在高阶组件中实现登录鉴权和增强props相关的知识，希望能够帮助到你们~
如果对你有帮助，点赞关注支持一下呀~后续会给大家带来更多精彩的内容