# 高级函数

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

感觉这个就是类似VUE里面的插槽吧

App.js不引入A.js

//.babelrc
{"presets":["react-native-stage-0/decorator-support"]}

ps:如果上面出现报错
Cannot find module 'react-native-stage-0/decorator-suppor
npm install metro-react-native-babel-preset -D
将.babelrc改为
{
  "presets": ["module:metro-react-native-babel-preset"],
   "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]   
  ]
}

因为那个已经没用了，展示的是抽取状态了，代码冗余

这个插件不是添加在 .babelrc

需要添加在 package.json 中。

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
},

你说的是什么组合？是说组件吗？function也是一种react组件的写法，和class <name> extends react.Componrnt{}的写法效果一样，我感觉这里是表达在函数内返回一个组件的，就是高阶组件

网址输入m.jd.com,然后F12打开调试，选择手机模式，比例选择小一点，才看得全，比如展示比例选择50%

不好意思，刚刚看错了。
老师应该是忘记在b.js 和 c.js中 写
import A from './A';

补充：多个组件中有相同功能时，可以把相同的功能抽离出来，根据传递的参数（组件）进行不同内容的渲染

我也想知道

故意敲_的，this.props_会报错

确实有问题

老师口头说了，在pages中新建组件home等等，可能漏了讲在哪里创建pages文件夹，不过通过看老师的目录还是可以知道的

是视频剪辑的时候漏掉了吗？

老师的代码里面一开始写漏了，后来整理代码给加上去了

<WrappedComponent {...this.props} ></WrappedComponent>

<WrappedComponent {...this.props} ></WrappedComponent>

高阶组件中 props要手动传到WrappedComponent里

第一个疑问：有引入的

第二个疑问：props.children不属于高阶组件，相关文章：http://www.ituring.com.cn/article/507115

{
  "presets": ["module:metro-react-native-babel-preset"],
   "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]   
  ]
}

感觉不是一个人在讲课

编辑器显示问题，实际没有下划线。

<Router path="/" component={Home}></Route>

应该是B