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> 
}