前言

最近一直再做数据可视化，业务的理解，数据的理解确实如数据可视化要求的一样，有了更多的理解。但是技术上还停留在echart，Hchart,画图上。正好一个机会，看了流形大大的知乎live。对大数据有了更深的了解。也明确了大数据时代，前端所应该具备的职业素养

高阶组件

高阶组件HOC（Higher Order Component，高阶组件）就是一个 React 组件包裹着另外一个 React 组件

React 中两种 HOC 的实现方法

React 中两种 HOC 的实现方法：Props Proxy (PP) and Inheritance Inversion (II)

## Props Proxy (PP)

function ppHOC(WrappedComponent) {
 return class PP extends React.Component {
   render() {
     return <WrappedComponent {...this.props}/>
   }
 }
}

## Inheritance Inversion (II)

function iiHOC(WrappedComponent) {
 return class Enhancer extends WrappedComponent {
   render() {
     return super.render()
   }
 }
}

返回的 HOC 类（Enhancer）继承了 WrappedComponent。之所以被称为 Inheritance Inversion 是因为 WrappedComponent 被 Enhancer 继承了，而不是 WrappedComponent 继承了 Enhancer。在这种方式中，它们的关系看上去被反转（inverse）了。
Inheritance Inversion 允许 HOC 通过 this 访问到 WrappedComponent，意味着它可以访问到 state、props、组件生命周期方法和 render 方法

一致化处理（Reconciliation process)

一致化处理(Reconciliation)包括的就是React元素的比较以及对应的React元素不同时对DOM的更新，即可理解为React 内部将虚拟 DOM 同步更新到真实 DOM 的过程，包括新旧虚拟 DOM 的比较及计算最小 DOM 操作。

这很重要，意味着 Inheritance Inversion 的高阶组件不一定会解析完整子树

Inheritance Inversion 作用

渲染劫持（Render Highjacking）
操作 state

渲染劫持（Render Highjacking）

在由 render输出的任何 React 元素中读取、添加、编辑、删除 props

export function IIHOCDEBUGGER(WrappedComponent) {
  return class II extends WrappedComponent {
    render() {
      return (
        <div>
          <h2>HOC Debugger Component</h2>
          <p>Props</p> <pre>{JSON.stringify(this.props,null,2)}</pre>
          <p>State</p><pre>{JSON.stringify(this.state,2)}</pre>
          {super.render()}
        </div>
      )
    }
  }
}

读取和修改由 render 输出的 React 元素树

function iiHOC(WrappedComponent) {
  return class Enhancer extends WrappedComponent {
    render() {
      const elementsTree = super.render()
      let newProps = {};
      if (elementsTree && elementsTree.type === 'input') {
        newProps = {value: 'may the force be with you'}
      }
      const props = Object.assign({},elementsTree.props,newProps)
      const newElementsTree = React.cloneElement(elementsTree,props,elementsTree.props.children)
      return newElementsTree
    }
  }
}

有条件地渲染元素树

function iiHOC(WrappedComponent) {
  return class Enhancer extends WrappedComponent {
    render() {
      if (this.props.loggedIn) {
        return super.render()
      } else {
        return null
      }
    }
  }
}

把样式包裹进元素树（就像在 Props Proxy 中的那样）

高阶组件例子

// app.js
import React,{Component} from 'react';
import @R_404_395@ from './@R_404_395@.svg';
import './App.css';

import Auth from './auth';

// 发帖组件
class Btn extends Component {

    send() {
        alert('发帖子');
    }

    render() {
        return (
            <button onClick={this.send}>{this.props.name}</button>
        )
    }
}

// 喜欢组件
class BtnLike extends Component {

    send() {
        alert('喜欢');
    }

    render() {
        return (
            <button onClick={this.send}>{this.props.name}</button>
        )
    }
}

class App extends Component {
    render() {
        // 高阶组件Auth()
        let AuthBtn = Auth(Btn),AuthBtnLike = Auth(BtnLike);

        return (
            <div className="App">
                <header className="App-header">
                    <img src={@R_404_395@} className="App-@R_404_395@" alt="@R_404_395@"/>
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    To get started1,edit <code>src/App.js</code> and save to reload.
                </p>
                <p><AuthBtn name={'发帖'}/></p>
                <p><AuthBtnLike name={'喜欢'}/></p>
            </div>
        );
    }
}

export default App;

// 高阶组件 Auth.js
/**
 * Created by Rayr Lee on 2017/11/19.
 */

import React from 'react';

var isLogin = false;
// 控制能否登录 
window.isLogin = isLogin;
// Props Proxy (PP) 的最简实现：
// function ppHOC(WrappedComponent) {  
//     return class PP extends React.Component {    
//       render() {      
//         return <WrappedComponent {...this.props}/>    
//       }  
//     } 
//   }
export default function (ComposedComponent) {
    return class extends React.Component {

        tips() {
            alert('请登录');
        }

        render() {

            return (
                isLogin ?
                    <ComposedComponent {...this.props}></ComposedComponent> :
                    <button onClick={this.tips}>{this.props.name}</button>
            )
        }
    }
}

参考

深入理解 React 高阶组件
[为什么React和Immutable是好朋友](https://juejin.im/post/59171f...

)

原文链接：https://www.f2er.com/react/301686.html

初识react高阶组件

前言