高阶组件学习笔记（二）

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

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

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


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

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

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

通过这两部以后，就可使用，效果以下：

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

业务组件能够适配任何组件

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