本文主要记录如何使用高阶组件实现外部逻辑注入，如性能打点，以及其中遇到的一些问题

The defination of HOC

所谓高级组件，即：接受一个组件作为参数，并且其返回值也为一个react组件

demo

如下是一个再简单不过的react组件

import connect from './connect' import {Component} from 'react' class Demo extends Component { componentWillMount(){ //do something here } render(){ return <div>111</div> } } export default connect(Demo)

connect 是一个实现性能打点的装饰器，here is the source code

装饰器，在本质上，其实是返回一个函数的高阶函数。在react应用中，衍生出了高阶组件的含义

以下是两种HOC的实现方式：

方式一：Props Proxy

//性能追踪:渲染时间打点 export default (Target) => (props)=>{ let func1 = Target.prototype['componentWillMount'] let func2 = Target.prototype['componentDidMount']//Demo并没有在prototype上定义该方法，func2为undefined,但是并不会有影响，这样做只是为了事先提取出可能定义的逻辑，保持原函数的纯净 let begin, end; Target.prototype['componentWillMount'] = function (...argus){//do not use arrow funciton to bind 'this' object func1.apply(this,argus);//执行原有的逻辑 begin = Date.now(); } Target.prototype['componentDidMount'] = function (...argus){ func2.apply(this,argus);//执行原有的逻辑 end = Date.now(); console.log(Target.name+'组件渲染时间：'+(end-begin)+'毫秒') } return <Target {...props}/>//do not forget to pass props to the element of Target }

connect 装饰器可以实现保持原有方法componentWillMount和componentDidMount纯净的情况下，实现打点逻辑的无污染注入。经过装饰以后的组件，就可以在控制台打印出该组件的渲染时间。

方式二： Inheritance Inversion

// 另一种HOC的实现方式 Inheritance Inversion export default Target => class Enhancer extends Target { constructor(p){ super(p);//es6 继承父类的this对象，并对其修改，所以this上的属性也被继承过来，可以访问，如state this.end =0; this.begin=0; } componentWillMount(){ super.componentWilMount && super.componentWilMount();// 如果父类没有定义该方法，直接调用会出错 this.begin = Date.now(); } componentDidMount(){ super.componentDidMount && super.componentDidMount(); this.end=Date.now(); console.log(Target.name+'组件渲染时间'+(this.end-this.begin)+'ms') } render(){ let ele = super.render();//调用父类的render方法 return ele;//可以在这之前完成渲染劫持 } }

你可以看到，返回的 HOC 类（Enhancer）继承了 Target。之所以被称为 Inheritance Inversion 是因为 Target被Enhancer继承了，而不是Target继承了Enhancer。在这种方式中，它们的关系看上去被反转（inverse）了。

Inheritance Inversion 允许 HOC 通过this 访问到 Target，意味着它可以访问到 state、props、组件生命周期方法和 render方法。

遗留问题

如何去手动connect，对项目中定义的所有react组件实现自动逻辑注入(talentLibs库的实现方式是什么样的？)

Other Questions

这里主要记录在写demo的过程中，遇到的几个问题：

关于箭头函数

在给类定义方法时，如果使用了箭头函数，发现在prototype上访问不到该方法，主要原因如下： what happens when using arrow function to define method on class

//deom1 class Super{ sayName(){ //do some thing here } } //通过Super.prototype可以访问到sayName方法，这种形式定义的方法，都是定义在prototype上 var a = new Super() var b = new Super() a.sayName === b.sayName //true //所有实例化之后的对象共享prototypy上的sayName方法 //demo2 class Super{ sayName =()=>{ //do some thing here } } //通过Super.prototype访问不到sayName方法，该方法没有定义在prototype上 var a = new Super() var b = new Super() a.sayName === b.sayName //false //实例化之后的对象各自拥有自己的sayName方法，比demo1需要更多的内存空间

通过demo1这种方式，我们可以在Super.prototype上访问到sayName方法

但是通过使用demo2的定义方式，我们在Super.prototype上访问不到sayName方法

Conclusion

if you use the reserved key word class in ES6 to declare a class like demo1,the method will be defined on the prototype.However,when using arrow function,the method will be bound with this.

在定义一个类时，如果使用demo1中的方式给类添加方法，那么这个方法将被定义在类的prototype上。然而如果使用箭头函数的话，这个方法将会被定义在this上，即Super的实例化之后的对象。而且在这个方法内，this始终会指向这个对象，而不管方法的调用方式(箭头函数的特性)

Reference

深入了解HOC