一、高阶组件HOC

HOF：Higher-Order Function, 高阶函数，以函数作为参数，并返回一个函数，例如（compose、bind）
HOC: Higher-Order Component, 高阶组件，以组件作为参数，并返回一个组件。
如下例代码B，返回一个新的组件，所以B就是一个高阶组件。

import React from 'react'export default function withTest(comp) {return class extends React.Component{}
}
function A(){return <h1>test</h1>
}
const B = withTest(A);

1.高阶组件

如果我们要设计一个日志记录组件，那么想想怎样能让这个日志记录组件复用性更高，后期更好维护呢？将整个日志记录组件封装成一个组件？

//withLog.js
import React from 'react'export default function withLog(Comp) {// 使用传入的记录器组件进行记录return class LogWarpper extends React.Component {// 取个名字方便后期调试componentDidMount() {console.log(`日志：组件${Comp.name}被创建了！${Date.now()}`);}componentWillUnmount() {console.log(`日志：组件${Comp.name}被销毁了！${Date.now()}`);}render(){return <Comp />}}
}

如下两个记录器A、B，如果想实现两个记录器，那么难以避免造成代码重复，索性交给另一个组件专门去实现如何进行记录，然后调用A，B即可。

//Comp.js
import React from 'react'
export class A extends React.Component{// A记录器render() {return <h1>A</h1>}
}
export class B extends React.Component{// B记录器render() {return <h1>B</h1>}
}

import React, { Component } from 'react'
import {A,B} from './components/Comps'
import withLog from './HOC/withLog'const ALog = withLog(A);
const BLog = withLog(B);
export default class Input extends Component {render() {return (<div><ALog /><BLog /></div>)}
}

这里就很明显了，A，B只会记录事件，如何记录是LogWarpper的事；两个组件分开也能实现一些功能，组合起来则能产生1+1>2的效果。

2、属性传递

组件通过嵌套，那么属性当然也需要我们自己手动一层一层向下传递。

//withLog.js
import React from 'react'export default function withLog(Comp) {return class LogWarpper extends React.Component {componentDidMount() {console.log(`日志：组件${Comp.name}被创建了！${Date.now()}`);}componentWillUnmount() {console.log(`日志：组件${Comp.name}被销毁了！${Date.now()}`);}render(){return <Comp {...this.props} />}}
}

//Comps.js
import React from 'react'
export class A extends React.Component{render() {return <h1>A:{this.props.a}</h1>}
}
export class B extends React.Component{render() {return <h1>B:{this.props.b}</h1>}
}

import React, { Component } from 'react'
import {A,B} from './components/Comps'
import withLog from './HOC/withLog'const ALog = withLog(A);
const BLog = withLog(B);
export default class Input extends Component {render() {return (<div><ALog a={'a'} /><BLog b={'b'} /></div>)}
}

3、使用属性传递

模拟一个登录系统，只有当提取到登录信息isLogin后才能显示后续页面。

//withLogin
import React from 'react'export default function withLogin(Comp) {return function LoginWrapper(props) {if(props.isLogin){return <Comp {...props} />}return null;}
}

Comp并未有任何改变

//Comp.js
import React from 'react'
export class A extends React.Component{render() {return <h1>A:{this.props.a}</h1>}
}
export class B extends React.Component{render() {return <h1>B:{this.props.b}</h1>}
}

如果不传isLogin

import React, { Component } from 'react'
import {A,B} from './components/Comps'
import withLogin from './HOC/withLogin'const ALog = withLogin(A);
const BLog = withLogin(B);
export default class Input extends Component {render() {return (<div><ALog a={'a'} /><BLog b={'b'} /></div>)}
}

传入isLogin后

是不是发现高阶组件的用处大大的了？其用处当然不止如此，还可以配合我们实现各种复杂的逻辑。

4、注意

如果我们render函数内去包装一个高阶组件呢？

import React, { Component } from 'react'
import {A,B} from './components/Comps'
import withLog from './HOC/withLog'export default class Input extends Component {render() {const ALog = withLog(A);const BLog = withLog(B); return (<div><ALog isLogin a={'a'} /><BLog isLogin b={'b'} /><button onClick={()=>{this.setState({})}}>点击</button></div>)}
}

一旦我们对状态进行操作时，你会发现，组件并没有进行重用单独刷新数据，而是整个组件都销毁冲建了。这会对性能造成影响。
此外不要在高阶组件内部更改传入的组件

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！

react学习—高阶组件HOC相关推荐

[react] 使用高阶组件(HOC)实现一个loading组件
[react] 使用高阶组件(HOC)实现一个loading组件 function HOC(wrappedComponent) {return class extends React.Componen ...
React Native高阶组件(HOC)模型理论与实践
什么是HOC? HOC(全称Higher-order component)是一种React的进阶使用方法,主要还是为了便于组件的复用.HOC就是一个方法,获取一个组件,返回一个更高级的组件. 什么时候 ...
React的高阶组件(HOC)
1. 概念高阶组件和高阶函数的类似,使用函数接收一个组件,并返回一个组件. function withList(WrapComponent) {return class extends Compon ...
「react进阶」一文吃透React高阶组件(HOC)
一前言 React高阶组件(HOC),对于很多react开发者来说并不陌生,它是灵活使用react组件的一种技巧,高阶组件本身不是组件,它是一个参数为组件,返回值也是一个组件的函数.高阶作用用于强化 ...
[react] 高阶组件(HOC)有哪些优点和缺点？
[react] 高阶组件(HOC)有哪些优点和缺点? HOC 优点通过传递props去影响内层组件的状态,不直接改变内层组件的状态,降低了耦合度缺点组件多层嵌套, 增加复杂度与理解成本 ref隔 ...
[react] 举例说明什么是高阶组件(HOC)的反向继承
[react] 举例说明什么是高阶组件(HOC)的反向继承 import React from 'react';const hoc = (WrappedComponent) => {// 集成需 ...
[react] 举例说明什么是高阶组件(HOC)的属性代理
[react] 举例说明什么是高阶组件(HOC)的属性代理 function HOC(WrappedComponent) {return class HOC extends Component {re ...
React 高阶组件HOC使用总结
HOC(高阶组件) /*HOC(高阶组件): 接收一个组件,返回包装后的组件(增强组件)- 不是React API- 是一种设计模式,类似于装饰器模式- ≈ Mixin && > ...
react 高阶组件hoc使用
react 高阶组件hoc使用 1. 为什么使用高阶组件 2. 具体使用 2.1原代码: 2.2 使用hoc封装后 1. 为什么使用高阶组件高阶组件(HOC)是 React 中用于复用组件逻辑的一种 ...

react学习—高阶组件HOC

高阶组件HOC