高阶组件学习笔记（二）

高阶组件学习笔记（二）
代理方式的实现
高阶组件最简单的形式，就是属性代理(Props Proxy)形式。通过HOC包装wrappedComponent，也就是例子中的App，本来传给App的props，都在Hoc中接受到了，也就是props proxy。 由此我们可以做一些操作:操作props。最直观的就是接受到props，我们可以做任何读取，编辑，删除的很多自定义操作。包括hoc中定义的自定义事件，都可以通过props再传下去。
1、在高阶组件里面添加props内容给WrapComponent（可以是对象、变量等等）

2、被高阶组件包裹之后的组件props里面有了新增的内容。

Refs获取实例
整个组件的实例，包括state、props、refs


继承方式的实现
将高阶组件的extends React.Component 修改为 extends WarpComponent
在retrun的时候使用super.render()方法，在线表单的实现方式大量采用继承方式。这样可以控制组件的生命周期，劫持state、props等好处。
工作中的使用
工作中很多业务需要模态框进行操作，例如：

主要分为：提示类型（较为简单）、交互类型（如上面申请统筹的业务，需要填写输入框、佐证材料、统计学位。。。）
传统编写方式使用Modal组件，然后内部编写其业务组件。冗余度和耦合度都很高，而且复用度很低，所以 考虑编写一个带有业务的模态框组件。借鉴高阶组件的思想，暴露函数，然后让使用者专注于业务编写。情况如下：
1、编写一个业务组件（需要一个onClick方法，用于网络请求等交互行为）

2、使用modalBizTool( )函数，里面只需要传入一个对象，对象里面必须要有一个业务组件

经过这两部之后，就可以使用，效果如下：

为了让使用者不再需要在乎其他的东西，传入的参数对象还提供了很多具体的自定义配置
{
title: ‘自定义标题’,
innerContent: Text,//业务
modalSize: ‘large’,
submitBtn: {
tips: ‘OK’,
style: ‘primary’,
},
cancelBtn: {
tips: ‘放弃’,
style: ‘success’
}
}
自定义组件效果如下：

业务组件可以适配任何组件

利用高阶组件的思想获取每个业务组件的ref实例，同时对业务组件做出相应的保护。