React.js高阶组件

最近听到一个新概念-纯函数，这里先记录下来。
纯函数是指一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用。第一个条件我们很好理解，第二条件在执行过程里面没有副作用我个人的理解就是不要对函数外部产生影响（修改函数外部变量之类）。React生命周期钩子就是纯函数。

为什么要煞费苦心地构建纯函数？因为纯函数非常“靠谱”，执行一个纯函数你不用担心它会干什么坏事，它不会产生不可预料的行为，也不会对外部产生影响。不管何时何地，你给它什么它就会乖乖地吐出什么。

言归正传，回到高阶组件（Higher-Order Components）
高阶组件

1.什么是高阶组件

高阶组件（Higher-Order Components）就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。高阶组件就是一个没有副作用的纯函数。

---

2.高阶组件用法

高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。当两个组件大部分代码都是重复的时候，高阶组件就能大展身手了。
比如，我们需要两个组件，一个是HelloUser,一个是KitUser。两者的内容，结构都差不多。我们用高阶组件实现一下

Wrapped.png

高阶组件就是把username通过props传递给目标组件了。目标组件只管从props里面拿来用就好了。

[HelloUser.png-edaa5e-1527145197122-0)] KitUser.png main.png res.png