高阶组件是代码复用的一种实现方式，用以替代mixin，衍生于高阶函数，即接收一个组件并返回一个组件
基本实现（定义一个函数，该函数内返回一个类组件，并在导出时调用）
新建hoc.js文件并引入button组件
新建button.js文件
在组件内引用
那么高阶组件到底能做什么呢？
操作 props
抽离 state
通过 ref 访问到组件实例
用其他元素包裹传入的组件 WrappedComponent
操作props
我们在return被包装的组件之前，创建一个对象并通过属性的形式传递给被包装组件
这样我们在组件button当中便能够打印出
（name来源于高阶组件，age来源于引用处）
抽离state或event
由于是我们返回的是一个类组件，因此它在自己内部可以维护一套自己的state
我们在向被包装组件添加props时，同时增加对应props的修改接口
并将接口定义到高阶组件内部
最后在button组件内点击调用props的onChange方法
这样一来，我
们就将公共的数据和方法抽离到高阶组件中维护啦
通过ref 访问到组件实例
我们有时候需要去访问原生dom节点，尽管我们可以通过jquery或者原生domapi去获取，但是这并不是框架所推荐的，此时便需要用到ref去注册引用
这里拿到的instance便是button组件的实例，进而调用在button组件中定义的属性或方法
但是我在button组件中去调用invokeRefEvent是没有任何意义的，真正有用的其实是在引用处去访问button的某个方法，可是默认情况下获取的却是我们用于包装的类
即
如果我们想在引用处直接操作button组件怎么办呢？答案是refs转发
我们只需要在返回之前调用指定的React.forwardRef接口向react声明转发ref即可
这相当于将ref的注册行为向下传递，使其注册到指定组件上
这样我们在引用处拿到的就是button了
用其他元素包裹传入的组件 WrappedComponent
这个其实就是在返回组件之前，在外层再包裹一层元素
网友评论