2020-01-15

React 高阶组件

1.高阶组件的定义及原理

2.高阶组价在项目中的常用应用

3.通用高级组价如何封装

4.高阶组件案例介绍

高阶函数介绍

高阶函数基本概念，函数可以作为参数被传递，setTimeout 有俩个参数，第一个参数是函数，第二个参数为时间，所以setTimeout以函数为参数的高阶函数。

高阶函数一些数组的应用some() every filter() map() forEach()

函数可以作为参数被传递

函数可以作为返回值输出

高阶组件定义

定义：高阶组件就是一个组件作为参数并返回一个新组件的函数

高阶组件是一个函数，并不是组件

高阶组件的实现

编写高阶组件，使用高阶组件， 高阶组件传参

1.实现一个普通组件

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

装饰器

默认是不支持装饰器的

create-reac-app demo 

npm run eject

装饰器写法

普通写法

详细的配置：https://blog.csdn.net/daydream13580130043/article/details/90511322

高阶组件的应用

1.代理方式的高阶组件

返回的新组件类直接继承自 React.Component 类 新组件扮演角色传入参数

组件的一个代理，在新组件的render函数中，将被包裹组件渲染出来，除了高阶组件自己要做的

工作，其余功能全部转手给了被包裹的组件

2.继承方式的高阶组件

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

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

代理方式的高阶组件

1.操作props

高阶组件能改变包裹组件的props,可以做编辑删除操作props一系列的动作

通过增加删除属性。改变props , 例如age, ...otherProps 删除age 属性 。 name='张三' 增加被包裹组件的属性

增加删除props

2.抽取状态

3.访问ref

4.包装组件

就是在render将被包裹的组件，通过一系列的标签包裹起来。可以增加任何东西，提取公共代码等

继承方式的高阶组件

1.操作props

2.操作生命周期函数

案例

下面是一个tab组件tab右侧都是相同的列表页，左侧则是不同的组件的。

左侧是列表组件

左侧是投票组件

左侧二维码组件