react高阶组件

首先我们来看下，什么是高阶函数？

1. 函数可以作为参数被传递
   setTimeout(() => {console.log(1)}, 100);
2. 函数可以作为返回值输出
   function(x) {return function () {return x;}}

那么高阶组件又是什么呢？

1. 高阶组件就是接受一个组件作为参数，并返回一个新的组件的函数
2. 高阶组件是一个函数，并非一个组件又或者说高阶只是一种设计模式（pattern），并非一种新的组件类型。

为什么我们需要高阶组件？

多个组件都需要某个相同的功能，使用高阶组件减少重复实现

如何编写高阶组件？

1. 实现一个普通组件

2. 将普通组件用一个函数包裹起来（在函数中必须使用retrun将刚刚的函数抛出）

   
   屏幕快照 2019-04-04 下午10.51.29.png

如何使用高阶组件？

1. 我们在创建B组件的地方，直接调用高阶组件
   higherOrderComponent(wrappedComponent)
2. 使用装饰器
   只需要在高阶组件前加个@就可以啦

高阶组件的应用

应用一：页面鉴权

屏幕快照 2019-04-07 下午9.00.15.png
HoC 组件接受多个参数，对多个组件定制组件的新行为。
在上述代码中参数有两个组件：LoginView和WrappedComponent，如果传入的props中含有user则显示LoginView否则显示WrappedComponent。

应用二：页面复用

将获取数据的函数作为参数传入，返回高阶组件。

我们经常会使用的高阶组件库？

react-redux组件库，我们在组件中访问全局state数据，需要调用connect函数