HOC — react高阶组件

Posted 2021-04-26 洺宸

前言：

        本节我们将开始学习HOC — react高阶组件。HOC：Higher-Order Component,高阶组件，即以组件作为参数，并返回一个组件。

        通常，可以利用HOC实现横切关注点。什么意思呢？举个例子：假如有20个组件，要求每个组件在创建与销毁时，需要做日志记录。那么如果在这20个组件中分别在时间周期类执行日志记录函数，自然是最容易实现的方案。但是这样会有大量的重复代码，代码结构并不优雅。react就提供了一个优雅的解决方案，那就是HOC：高阶组件。

        下面我们就来看看高阶组件是怎么解决这个问题的：

        首先我们写一个简单的Test组件：

// Test文件夹下index.jsimport React, { Component } from 'react'import PropTypes from 'prop-types'class Test extends Component { static defaultProps = { name: undefined, age: 18, sex: 'male' } static propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number, sex: PropTypes.oneOf(['male','female']) } render() { return ( <div> <p>姓名：{this.props.name}</p> <p>年龄：{this.props.age}</p> <p>性别：{this.props.sex}</p> </div> ) }}
export default Test

        然后写一个showCreateAndDetory.js，即为高阶组件：

// showCreateAndDetory.jsimport React from 'react'
export default function showCreateAndDetory(Cmp) { return class Hoc_showCreateAndDetory extends React.Component{ componentWillMount(){ console.log('didMount,name:',this.props.name) } componentWillUnmount() { console.log('unMount,name:',this.props.name) } render(){ return ( <> <Cmp {...this.props} /> </> ) } }}

        可以看到，showCreateAndDetory函数的参数为组件，然后为组件包裹上一个新的组件，这个组件并未添加任何实际dom元素，但是多了一个可控制的组件生命周期，在这个生命周期内，可以实现公共功能，而且可以多层嵌套，形式上有些类似数学中的高阶函数，所以这个被称为高阶组件。

        我们可以利用高阶组件重新封装一下Test组件：

// TestWithHoc 文件夹下index.jsimport React, { Component } from 'react'import Test from '../Test'import showCreateAndDetory from '../../hoc/showCreateAndDetory'
const NewTest = showCreateAndDetory(Test)class TestWithHoc extends Component{ render(){ return <NewTest {...this.props} /> }}export default TestWithHoc

在app.js中引入使用：

import React, { Component } from 'react';import './App.css';import TestWithHoc from './components/TestWithHoc'const propleArr = [ { name: 'zhangsan', age: 15, sex: 'male' }, { name: 'lisi', age: 16, sex: 'male' }, { name: 'wangwu', age: 17, sex: 'female' }]class App extends Component { constructor(){ super(); this.state = { people: propleArr } } render() { let people = this.state.people.map( ele => <TestWithHoc key={ele.name} {...ele}></TestWithHoc> ) return ( <div> {people} <button onClick={()=>{ console.log('点击重置按钮') // 点击重置按钮即重新设置state内数据，组件会被销毁 this.setState({ people: [] })}}>重置</button> </div> );  }}
export default App;

可以看到效果：

点击重置按钮：

在react调试组件中观察组件结构：

实际元素结构：

        可以看到，只要合理使用高阶组件，则并不会增加多余dom元素，但是会多一个可操作生命周期，用于完成一个公共的功能。

总结：

        高阶组件，即以组件作为参数，并返回一个组件。他的定义与使用都是很容易理解的，重要的是要领会使用思维，将多个组件的公共功能抽离出来，利用js语言的极高的灵活性，组织出易于维护，高度解耦的代码。