高阶组建的实现方式 及应用

75 阅读1分钟


I 使用第一种方式,将组件作为函数参数传递,返回另一个组件



 

II 装饰器方式

  由于create-react-app默认不支持装饰器模式,此时需要修改配置文件

    1.npm run eject  暴露处原始的config文件

    2.使用装饰器需要安装babel-preset-stage-2以及babel-preset-react-native-stage-0

    3.根目录文件下新建babel.rc文件并配置如下内容

      

4.在原来的B组件中使用装饰器引入D组件即可达到第一种方式下的效果



III高阶组件的应用

  

移动端的tabar,五个模块就要在五个页面中加入底部的tarbar,

这样相对重复,可用高阶组件实现重复代码的剔除


1.针对tabebar的重复可以建成高阶组件,即封装成函数,而每个页面的内容模组件则通过传参进入封装的高阶组件和tarbar一起渲染


2. 内容页面模块的变更,当路由为HOME模块则home模块当作参数传给tarbar


3.此时home模块作为WrappedComponent传入进来的tarbar需要在render中形成组件 

渲染出来