前端进阶（十）React高阶组件---《深入浅出React和Redux》笔记

一、高阶组件

高阶组件（ Higher Order Component, HOC ）并不是 React 提供的某种 API ，而是使用 React 的一种模式，用于增强现有组件的功能 。

一个高阶组件就是一个函数，这个函数接受一个组件作为输入，然后返回一个新的组件作为结果，而且，返回的新组件拥有了输入组件所不具有的功能 。

简单的高阶组件示例。减少props的例子

import React from 'react';

function removeUserProp(WrappedComponent) {
return class WrappingComponent extends React.Component {
render() {
const {user, ... otherProps} = this.props;
return <WrappedComponent {... otherProps) />

export default removeUserProp;

高阶组件作用

1、重用代码

2、修改现有 React 组件的行为 。

二、高阶组件实现方式

• 代理方式的高阶组件
• 继承方式的高阶组件

1、代理方式的高阶组件

• 操纵 prop

增加props的例子

const addNewProps = (WrappedComponent, newProps) => {
    return class WrappingComponent extends React.Component {
        render() {
            return <WrappedComponent {... this.props} {... newProps} />
        }
    }
}

• 访问 ref（不推荐使用）

写一个名 为 refsHOC 的高阶组件，能够获得被包裹组件的直接应用 ref，然后就可以根据 ref 直接操纵被包裹组件的实例。refsHOC 的工作原理其实也是增加传递给被包裹组件的 props ，只是利用了 ref这个特殊的 prop, ref 这个 prop 可以是一个函数，在被包裹组件的装载过程完成的时候被调用，参数就是被装载的组件本身 。传递给被包裹组件的 ref值是一个成员函数 linkRef，当 linkRef被调用时就得到了被包裹组件的 DOM 实例，记录在 this. root 中 。

const refsHOC = (WrappedComponent) => {
    return class HOCComponent extends React.Component {
        constructor () {
            super (...arguments) ;
            this.linkRef =