1回答

• 

  懂渊

  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 插件进行调试来方便使用

  
  

  0 0