问答详情
源自:2-3 高阶组件介绍(3)

learning

有笔记资料吗

提问者:慕盖茨7186666 2020-12-21 18:32

个回答

  • 懂渊
    2021-08-31 20:44:57


    # 高级函数

    1. 函数可以作为 参数被传递

    2. 函数可以作为返回值输出


    # 高阶组件

    1. 高阶组件就是接受一个组件作为参数并返回一个新组件的函数

    2. 高阶组件是一个函数,并不是一个组件


    ## 编写高阶组件

    1. 实现一个普通组件

    2. 将普通组件使用函数包裹

    ```

    function d(WrapperComponent){

    return class D extends Component {

    render() {

    return (

    <div>

    <WrapperComponent></WrapperComponent>

    </div>

    );

    }

    }

    }

    export default d;

    ```

    ## 使用高阶组件

    1.  示例 (简单使用,其他方式比较繁琐忽略)

    ```

    import React, { Component } from "react";

    // import A from "./A";

    import d from "./D";

    class C extends Component {

      render() {

        return <div>C组件</div>;

      }

    }

    // export default A(C);

    export default d(C);

    ```

    2. 注解使用: @  装饰器注解



    ## 高级组件应用


    ### 代理方式的高阶组件: 尽量使用代理

    返回的新组件类直接继承自 React.Component

    1. 操纵prop

    2. 抽取状态

    3. 访问ref

    4. 包装组件


    ### 继承方式的高阶组件

    采用继承关联作为参数的组件和返回的组件,假如传入的组件参数是WrappedComponent ,

    那么返回的组件就直接继承自 WrappedComponent 

    1. 操纵prop(没有代理组件功能强,很少用)

    2. 操纵生命周期函数


    ### 高阶组件显示名

    用于调试输出显示, 可以在浏览器安装React 插件进行调试来方便使用