反向继承:高阶组件返回的组件继承于 WrappedComponent。因为被动地继承了 WrappedComponent,所有的调用都会反向
原始组件要调用高阶组件如B组件调用高阶组件A,有两种方法
1函数调用
1
2装饰器模式
备注:显然装饰器调用比较优雅,我这边多说一句,我是用react-create-app创建的,react-create-app默认不支持装饰器,要想支持,必须安装以下依赖,并且配置babel
讲完如何调用,我们就讲下高阶组件具体的能干些什么吧
##操作props,对传入的props进行读取,增删改,当组件调用该高阶组件的时候,就可以用下面的属性
##抽象state,可以通过 WrappedComponent 提供的 props 和回调函数抽象 state。将原组件抽象为展示型组件,分离内部状态 (表单和input用到的场景比较多)
组件调用:
###渲染劫持和条件劫持
###高阶组件命名
当包裹一个高阶组件时,我们失去了原始的 WrappedComponent 的 displayName,在页面上审查原素会看到调用的组件被“newcomponent”包裹,方便调试
高阶组件的其他知识还很多,我们要根据实际的项目需求来
也可以参照其他文章学习,链接:https://www.jianshu.com/p/85f165ca002c
最后我写了一个仿京东底部的tab切换页面,将一个tabbar作为高阶组件实现的,具体代码可参考https://github.com/yangxf1854/tab.git。