React中的高阶组件一般使用来抽离一些组件公共的部分,在之前有mixin,不过现在已经不建议用了,相比mixin,HOC可以让使用更明确。高阶组件有两种常见的用法有两种,1属性代理,2继承反转。先不说那么多了,先从一个简单的案例触发,看看HOC到底干啥的。

多个受控组件

假如一个表单中有input,textarea,且每个里面都要维护一个单独的value,正常情况,我们的代码如下:

我们要在Input,Textarea组件中每个都去维护这个state,这样比较重复,我们可以用HOC将state维护的部分抽离出来:

HOC抽离相同部分

我们在HOC的组件中定一个state和changeHandler,这个是Input和Textarea共同的部分,然后我们将它们变成新的新的参数(prop)传递给真正的组件。真正的组件中代码也要调整,比如changeHandler,之前是调用this.changeHandler,就是在自身组件中的方法,但是现在调用为this.props.changeHandler,因为现在的changeHandler是从HOC中传过来的。

上面两个例子比较简单的阐明了HOC是干嘛的,其实HOC就是将多个类似的组件中相同的部分进行抽离,简化代码,这个和之前的mixin的意思是一样的。

HOC中的ref是不能传递下去的,因此如果用HOC的话,如果想获取HOC内部的真实组件就没那么容易了,当然还是有办法的,看看下面的例子:

回调ref获取HOC内部组件

采用回调ref的时候,主组件不能直接使用ref,要使用一个其他的名字(本例中为innerRef),然后HOC中接收这个名字(innerRef),作为ref将它定义到真正的组件中,这样就能形成一个回调用。

HOC返回forwardRef传递给内部

除此之外,还可以通过HOC返回一个forwardRef去接收ref,然后将ref传递给内部包裹的组件:

上面我们讲了如何在HOC中同ref获取内部的组件,其实上面我们讲的所有,HOC都是接收一个组件,然后返回一个新组件,只是增加了一些属性而已,这种我们都叫属性代理,就是我们只是在原来的组件上增加一些属性而已,不会去修改原来的组件。

继承反转

除了上面的属性代理外,还有一种叫做继承反转去实现HOC的方法,我们先来看个例子:

我们先来看一个统计组件创建时间的HOC:

通过继承实现的HOC,可以访问父类中数据,调用render的时候也是调用super.render();为了不破坏父类方法的运行,要先看父类有没有方法,然后在调用。

再来看一个给列表加上loading的HOC:

这个控制就更强一点,通过判断父类state中的status来判读此时是否显示loading。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字