React高阶组件之代理方式

随着项目越来越复杂，开发过程中，多个组件需要某个功能，而且这个功能和页面并没有关系，所以也不能简单的抽取成一个新的组件，但是如果让同样的逻辑在各个组件里各自实现，无疑会导致重复的代码。比如页面有三种弹窗一个有title，一个没有，一个又有右上角关闭按钮，除此之外别无它样，你总不能整好几个弹窗组件吧，这里除了tilte,关闭按钮其他的就可以做为上面说的基本材料。

高阶部件是一种用于复用组件逻辑的高级技术，它并不是 React API的一部分，而是从React 演化而来的一种模式。 具体地说，高阶组件就是一个接收一个组件并返回另外一个新组件的函数！

高阶组件总共分为两大类：代理方式和继承方式

这里介绍平时常用的代理方式。

——操纵prop

删除prop：

增加props：

简化了写法，把匿名函数去掉，同时换成箭头函数

上面HocRemoveProp高阶组件中，所做的事情和输入组件WrappedComponent功能一样，只是忽略了名为user的prop。也就是说，如果WrappedComponent能处理名为user的prop,这个高阶组件返回的组件则完全无视这个prop。

——抽取状态 

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

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

——包装组件

这样使用

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

didmount 一> HOC didmount 一>(HOCs didmount) 一>(HOCs will unmount) 一>HOC will unmount一>unmount

高阶组件可浏览原文链接