react高阶组件的使用，一次就会！

首先欢迎你们关注个人Github博客，也算是对个人一点鼓励，毕竟写东西无法得到变现，能坚持下去也是靠的是本身的热情和你们的鼓励，但愿你们多多关注呀！react的部分持续更新中...

为何使用高阶组件？为了提升组件复用率，咱们首先想到的是抽离相同的逻辑，在react中就有了HOC(Higher-Order Components)的概念，因此react中的高阶组件是用来提升组件复用率的。

高阶组件概念

高阶组件是一个函数，传入一个组件，返回另外一个新的组件，产生的新的组件能够对属性进行包装，也能够重写部分生命周期。

高阶组件的无状态组件

高阶组件中返回新的组件，能够是class形式，也能够是无状态组件的形式，下面看看高阶组件中怎么返回一个无状态组件。

如今有一个需求，须要一个组件，传入某本书的的书名，根据书名获取到章节，因为根据书名获取到章节的这部分逻辑是相同的，因此咱们能够抽取成为一个公共组件，这个公共组件就是高阶组件。

新建src/Hoc.js，里面定义一个展现某本书章节的无状态组件Book，props.name为书名，props.section为章节：

import React from 'react'
function Book(props) {
    return(
        <div> { props.name } - { props.section } </div>
    )
}
export default Book
复制代码

在src/index.js中使用该组件，传入书名，渲染在根节点：

import React from 'react';
import ReactDOM from 'react-dom';
import Hoc from './Hoc';

ReactDOM.render(<Hoc name="react"/>, document.getElementById('root')); 复制代码

还差一个根据书名获取到章节的高阶组件withSection，在Book组件中使用这个高阶组件：

function Book(props) {
    ...
}
const withSection = Com => {
    return props => {
        const section = '章节 - 高阶组件的无状态组件' // 根据书名props.name获取到章节section，这里是模拟数据
        return(
            <Com {...props} section={section} /> ) } } export default withSection(Book) 复制代码

这个获取章节的高阶组件传入的是一个组件Book，返回的是一个无状态组件，在返回的这个组件中把获取章节的逻辑处理了，Book原本没有章节的信息，在使用高阶组件后就有了。

npm start，浏览器输出

react - 章节 - 高阶组件的无状态组件
复制代码

高阶组件的class组件

若是咱们要在高阶组件withSection里面使用生命周期函数，这时候withSection里面的无状态组件就不适用了，咱们须要用到class形式的组件。

// 高阶组件里使用生命周期函数
const withSection = Com => {
    class GetSection extends Component {
        state = {
            section: ''
        }
        componentDidMount() {
            // ajax
            const section = '章节 - 高阶组件的class组件'
            this.setState({ section })
        }
        render() {
            return <Com {...this.props} section={this.state.section} /> } } return GetSection } 复制代码

高阶组件的链式调用

除了给Book组件加根据书名获取章节名的高阶组件，咱们还想记录一下用户阅读的时间，那应该怎么办？高阶组件能够链式调用，能够嵌套多个高阶组件，咱们再来定义一个高阶组件withUserLog：

const withUserLog = Com => {
    class GetUserLog extends Component {
        componentDidMount() {
            console.log('记录了用户的阅读时间操做')
        }
        render() {
            return <Com {...this.props} /> } } return GetUserLog } 复制代码

嵌套使用高阶组件就好了：

function Book(props) {
    ...
}
const withSection = Com => {
    ...
}
const withUserLog = Com => {
    ...
}
// 链式调用
export default withUserLog(withSection(Book))
复制代码