zoukankan      html  css  js  c++  java
  • react-native 高阶组件笔记

    何为高阶组件:通过函数向现有组件类添加逻辑,一个React组件包裹另外一个React组件,就是高阶组件HOC(Higher Order Component)
    高阶函数概念来源于JavaScript的高阶函数:高阶函数就是接受函数作为输入或者输出的函数
     
     
    在React Native开发中开发思路是通过组合各种组件来组织APP,不提倡使用继承 所以使用高阶组件对于替换一些已有组件更可靠.
     
    高阶函数定义中”包裹”的概念,有两种不同的含义:
    Props Proxy (PP-属性代理): HOC 对传给 WrappedComponent W 的 porps 进行操作,
    Inheritance Inversion (II-反向继承): HOC 继承 WrappedComponent W
     

    Props Proxy

    const HOC = (WrappedComponent) => class WarppedComponent extends Component{
     
        render() {
            return <WrappedComponent {...this.props} />    }
    }
    //普通的组件class WrappedComponent extends Component{
        render(){
            //....    }
    }
     
    export  default  HOC(WrappedComponent)
     

    操作props

      我们看到之前要传递给被包裹组件WrappedComponent的属性首先传递给了高阶组件返回的组件(WrapperComponent),这样我们就获得了props的控制权(这也就是为什么这种方法叫做属性代理)。我们可以按照需要对传入的props进行增加、删除、修改(当然修改带来的风险需要你自己来控制),举个例子:
    const HOC = (WrappedComponent) => class WrapperComponent extends Component { render() { const newProps = { name: 'HOC' } return <WrappedComponent {...this.props} {...newProps} />; } }
     
     
     

    反向继承

                      反向继承是指返回的组件去继承之前的组件(这里都用WrappedComponent代指)
        const HOC = (WrappedComponent) => class extends WrappedComponent { render() { return super.render(); } } 
  • 相关阅读:
    linux-gcc 编译时头文件和库文件搜索路径
    程序自启动位置(8种方法,注册表有6处)
    谷歌、flick网站图片 一次性下载 javaWeb项目 多线程下载,
    部署vc2008开发的程序(vcredist_x86是其中一个办法)
    vs2012-vs2013编译出来的程序不能在xp上运行解决方法
    openssl编译
    libcurl编译
    qt 国际化(翻译时会触发changeEvent)
    uva 12100 Printer Queue 优先级队列模拟题 数组模拟队列
    qtcreator增加doxygen注释
  • 原文地址:https://www.cnblogs.com/air-liyan/p/7155389.html
Copyright © 2011-2022 走看看