zoukankan      html  css  js  c++  java
  • 8、react 高阶组件

    1、高阶组件:封装
    高阶组件使用得是react得一种模式,增强现有组件得功能
    一个高阶组件就是一个函数,这个函数接收得是组件类作为参数得,并且返回得是一个新组件,再返回得新组件中有输入参数组件不具备得功能(以上提到得所有得组件都不是组件得实例,是类,输入得这个组件也可以是无状态组件函数)
    2、高阶组件意义:
    重用代码
    可以修改现有组件得行为
    3、实现高阶组件得方式:代理式的高阶组件、继承式的高阶组件
    4、代理式得高阶组件--属性代理
    5、继承式的高阶组件--反向继承来实现得
    6、高阶组件缺点:
    静态方法会丢失:
    因为原始组件时被包裹再新组件中得,新组件没有原始组件得任何静态方法
    refs属性不能传递:
    高阶组件可以传递所有得props给包裹得组件Com,但是有一个属性不行,ref,如果我们给高阶组件创建得组件添加ref得话,ref指向的时最外城的容器组件,不是包裹的Com组件解决方法使用react中提供的React.forwardRef来获取
    反向继承不能保证完整得子组件被解析:
    组件分为class类组件和function函数组件
    如果渲染的时候包含function组件的话那么就不能操作组件的子组件了
    7、高阶组件可以带给我们很大方便,规则:
    props保持一致:
    再使用高解组件的时候返回的组件要尽量保持和原组件的props一致
    不能再函数组件上使用ref属性,因为函数组件没有办法进行实例
    不要以任何方式改变原始组件(第三方组件)
    不要再render方法中再使用高阶组件了
    在使用传值的时候要把不相关的props进行包裹起来
    包裹组件显示名字以便测试

    import React, { Component } from 'react'
    
    import ReactDom from 'react-dom' ;
    
    class Hello extends Component{
        render(){
            return(
                <div>
                    我是hello组件
                    姓名:{this.props.name}
                </div>
            )
        }
    }
    // const testHellow =( Com) =>{              //prop 代理高阶组件
    //     return class extends Component{
    //         // constructor(props){
    //         //    super(props)
    //         //    this.setState={
    //         //        sex="男",
    //         //        hobby:"篮球"
    //         //    }
    //         // }
    
    //         render(){
    //             return(
    //                 <div>
    //                     <Com {...this.props}/>
    //                 </div>
    //             )
    //         }
    //     }
    // }
    
    const testHellow =( Com) =>{              //继承高阶组件
         return class extends Com{
    
    
             render(){
                 return(
                    <div>
                       新的
                        {super.render()}
                     </div>
               )
            }
        }
     }
    
    
    
    
    
    
    
    let Test=testHellow(Hello)
    
    class Gao extends Component {
        render() {
            return (
                
                    <Test name="tzb"/>
               
            )
        }
    }
    ReactDom.render(  
        <Gao/>,
    document.getElementById("root")
    )
  • 相关阅读:
    Exsi上Windows主机增加硬盘容量
    第6章:vuerouter,vuecli和单文件组件
    Python之爬取天气预报并生成图表
    第3章:vue生命周期及实例的属性
    Python 获得NOAA全球开放气象数据
    第5章:组件即组件间的通信
    MACBOOK M1 PRO 下运行.NET CORE(MAC下如何与X86_64兼容)
    DOTNET 运行AESGCM程序 ON MACOS(错误ALGORITHM ‘AESGCM’ IS NOT SUPPORTED ON THIS PLATFORM)
    1.3\~1.4 控制措施类型、安全框架
    mac 安装brew带来的种种问题
  • 原文地址:https://www.cnblogs.com/taozhibin/p/13065614.html
Copyright © 2011-2022 走看看