React 高阶组件

高阶组件：高阶组件就是一个接收一个组件并返回另外一个新组件的函数！

高阶组件总共分为两大类

一、代理方式（1、操纵 prop 2、抽取状态 3、包装组件）

1、操纵 prop

增加prop

import React from 'react' 
const HocAddProp = (WrappedComponent，uid) => 
    class extends React.Component {
         render() { 
            const newProps = { uid, 
          };
        return <WrappedComponent {...this.props} {...newProps} /> 
    } 
}
export default HocAddProp;

删除prop

两个高阶组件的使用方法：

 

或者利用decorator语法糖，这样使用

2、抽取状态

将所有的状态的管理交给外面的容器组件，这个模式就是 抽取状态

外面的容器就是这个高阶组件

 

这样当我们在使用这个已经被包裹的input组件（SampleComponent）时候，它的值就被放在了HocContainer高 阶组件中，当很多这样的input组件都用这个HocContainer高阶组件时，那么它们的值都将保存在这个HocContainer高阶组件中

3、包装组件

 

这样使用

 

--代理方式的生命周期的过程类似于堆栈调用:

代理方式下WrappedComponent会经历一个完整的生命周期，产生的新组件和参数组件是两个不同的组件，一次渲染，两个组件都会经历各自的生命周期。

二、继承方式（1、操纵生命周期(渲染劫持) 2、操纵prop ）

--继承方式的生命周期的过程类似队列调用:

 

在继承方式下，产生的新组件和参数组件合二为一，super.render只是生命周期中的函数，变成一个生命周期。

 

这个例子很简单，相当于把WrappedComponent组件的render方法， 通过super.render()方法吐到了MyContainer 中，可以顺序调用。

1、操纵生命周期(渲染劫持)

首先创建一个高阶，再创建一个使用高阶组件的组件，也就是是输入组件，最后再改变这个输入组件props

 

这个高阶组件会直接读取输入组件中的props,state,然后控制了输入组件的render展示

 

然后调用，递减time数值直到变为0最后页面的效果就是，当然他不是循环的。先展示”我是一个组件“，我设置了两秒，之后展示”倒计时完成“。

由此可以看出高阶组件也可以控制state

但是最好要限制这样做，可能会让WrappedComponent组件内部状态变得一团糟。建议可以通过重新命名state， 以防止混淆。

 

2、操纵prop

这样就传入了新的props

克隆并返回一个新的 ReactElement ，新返回的元素会保留有旧元素的 props、ref、key，也会集成新的 props。

还有一个方式，在传递props上有着强于高阶组件的优势不用关心命名，

 

使用方式

 

感觉很方便，但是每次渲染都会重新定义一个新的函数，如果不想的话就不要定义匿名函数，

 

showUid(argument) { 
    return <div>{argument}</div> 
}