函数式编程与React高阶组件
相信不少看过一些框架或者是类库的人都有印象，一个函数叫什么creator或者是什么什么createToFuntion，总是接收一个函数，来返回另一个函数。这是一个高阶函数，它可以接收函数可以当参数，也可以当返回值，这就是函数式编程。像柯里化、装饰器模式、高阶组件，都是相通的，一个道理。
本文重点是React高阶组件，要理解高阶组件，不得不说函数式编程。
1. 函数式编程
函数式编程是一种编程模式，在这种编程模式种最常用函数和表达式，函数式编程把函数作为一等公民，强调从函数的角度考虑问题，函数式编程倾向用一系列嵌套的函数来解决问题。
简单写个例子
function OCaml () {
console.log('I\'m FP language OCaml')
}
function clojure() {
console.log('I\'m FP language clojure')
}
现在想在每条console语句前后各加一条console语句，如果在每个函数都加上console语句，会产生不必要的耦合，所以高阶函数就派上了用场。
function FuncWrapper(func) {
return function () {
console.log('before')
func()
console.log('after')
}
}
var OCaml = FuncWrapper(OCaml)
var clojure = FuncWrapper(clojure)
我们写了一个函数FuncWrapper，该函数接一个函数作为参数，将参数函数装饰了一层，返回出去，减少了代码耦合。在设计模式中称这种模式为装饰器或装饰者模式。
当然函数式编程的好处不止这一条，有些人吹捧OCaml，clojure, scala等FP语言特性比如：纯函数无副作用、不变的数据、流计算模式、尾递归、柯里化等等。
在React中，高阶组件HOC就相当于这么一个FuncWrapper，传入一个组件，返回被包装或者被处理的另一个组件。
2. 高阶组件
上边已经简单说过了什么是高阶组件，其实本质上是一个类工厂。先举个例在再说
第一个组件
import React from 'react'
export default class OCaml extends React.Component {
constructor (props) {
super(props)
this.changeHandle = this.changeHandle.bind(this)
}
changeHandle (value) {
console.log(value)
}
render () {
return (
<div>
<h2>I'm OCaml</h2>
<input type="text" onchange={value => this.changeHandle(value)}/>
</div>
)
}
}
第二个组件
import React from 'react'
export default class Clojure extends React.Component {
constructor (props) {
super(props)
this.changeHandle = this.changeHandle.bind(this)
}
changeHandle (value) {
console.log(value)
}
render () {
return (
<div>
<h2>I'm Clojure</h2>
<input type="text" onchange={value => this.changeHandle(value)}/>
</div>
)
}
}
有两个不相同的组件，但是有部分功能重合，就是那个changeHandle函数，理解了高阶函数，再解决这类问题就不难了吧？不还是一样吗？
import React from 'react'
export default function CompWrapper (Component) {
return class WarpComponent extends React.Component {
constructor (props) {
super(props)
this.handleChange = this.handleChange.bind(this)
}
handleChange (value) {
console.log(value)
}
render () {
return <Component handleChange={this.handleChange} {...this.props}></Component>
}
}
}
OCaml = CompWrapper(OCaml)
Clojure = CompWrapper(Clojure)
这是一个最简单的高阶组件。注意，再高阶组件的返回包装好的组件的时候，我们将高阶组件的props展开并传入包装好的组件中，这是确保给高阶组件的props也能给到被包装的组件上。
高阶组件的通途很多，可以用来，代码复用，逻辑抽象，抽离底层代码，渲染劫持，更改state、更改props等等。
我们主要说一下两种功能的React高阶组件：属性代理、反向继承。
3. 属性代理(props proxy)
很好说了，上面已经提到过了，再来一遍，高阶组件将它收到的props传递给被包装的组件，所叫属性代理
export default function CompWrapper (Component) {
return class WarpComponent extends React.Component {
render () {
return <Component {...this.props}></Component>
}
}
}
属性代理主要用来处理以下问题
- 更改props
- 抽取state
- 通过refs获取组件实例
- 将组件与其他原生DOM包装到一起
更改props
例子是增加props的，其他的类似，都是在在高阶组件内部加以处理。
import React from 'react'
export default function CompWrapper (Component) {
return class WarpComponent extends React.Component {
say () {
console.log('我是被高阶组件包装过的组件！')
}
newProps = {
isLogin: true,
msgList: [1,2,3,4,5]
}
render () {
return <Component say={this.say} {...this.props} {...this.newProps}></Component>
}
}
}
包装好的组件可以用this.props.say调用say方法，可以用this.props.isLogin判断登陆状态等等。
抽像state
我们可以通过props和回调函数来抽象state
import React from 'react'
export function CompWrapper (Component) {
return class WarpComponent extends React.Component {
constructor (props) {
super(props)
this.state = {
inputValue: '暂时还没哟'
}
this.changeHandle = this.changeHandle.bind(this)
}
changeHandle (event) {
this.setState({
inputValue: event.target.value
})
}
render () {
return <Component {...this.props} inputValue={this.state.inputValue} changeHandle={this.changeHandle}></Component>
}
}
}
这个高阶组件将一切数据都绑定到了自己的身上，只需要出触发被包装组件的特定事件，就将改变自己的state，再将自己的state通过props传递给被包装组件。
@CompWrapper
export class InputComp extends React.Component {
render () {
return (
<div>
<h2>{this.props.inputValue}</h2>
<input type="text" onChange={this.props.changeHandle}/>
</div>
)
}
}
这里的input就成了完全受控的组件。注意：在定义组件的语句上边写上@CompWrapper是和InputComp = CompWrapper(InputComp)作用是一样的。@操作符是ES7的decorator，也就是装饰器。
通过 refs 获取组件实例
从你的 render 方法中返回你的 UI 结构后，你会发现你想要“伸手”调用从 render 返回的组件实例的方法，我们可以通过ref获取组件的实例，但是想让ref生效，必须先经过一次正常的渲染来使ref得到计算，怎么先让组件经过一次正常的渲染呢？高阶组件又来了，明白了吗？高阶组件的render返回了被包装的组件，然后我们就可以通过ref获取这个组件的实例了。
import React from 'react'
export function CompWrapper (Component) {
return class WarpComponent extends React.Component {
proc(wrappedComponentInstance) {
wrappedComponentInstance.say()
}
render () {
const props = Object.assign({}, this.props, {ref: this.proc.bind(this)})
return <Component {...props}></Component>
}
}
}
@CompWrapper
export class InputComp extends React.Component {
say () {
console.log('I\'m InputComp')
}
render () {
return (
<button onClick={()=>{console.log(this.props)}}>点击</button>
)
}
}
当被包装的组件被渲染后，就可以执行自己实例的方法了，因为计算ref这件事已经由高阶组件做完了。
将组件与其他原生DOM包装到一起
这个很好理解，如果想把布局什么的和组件结合到一起，使用高阶组件是一个办法。
import React from 'react'
export function CompWrapper (Component) {
return class WarpComponent extends React.Component {
render () {
return (
<div style={{marginTop: 100}}>
<Component {...this.props}/>
</div>
)
}
}
}
4. 反向继承
为什么叫反向继承，是高阶组件继承被包装组件，按照我们想的被包装组件继承高阶组件。
import React from 'react'
export function CompWrapper (Component) {
return class WarpComponent extends Component {
render () {
return super.render()
}
}
}
反向代理主要用来做渲染劫持
渲染劫持
所谓的渲染劫持，就是最后组件所渲染出来的东西或者我们叫React Element完全由高阶组件来决定，通过所以我们可以对任意一个React Element的props进行操作；我们也可以操作React Element的Child。
import React from 'react'
export function CompWrapper (Component) {
return class WarpComponent extends Component {
render () {
const reactElm = super.render()
let newProps = {}
if (reactElm.type === 'input') {
newProps = {value: '这是一个input'}
}
const props = Object.assign({}, reactElm.props, newProps)
const newReactElm = React.cloneElement(reactElm, props, reactElm.props.child)
return newReactElm
}
}
}
这个例子，判断组件的顶层元素是否为一个input，如果是的话，通过cloneElement这个方法来克隆出一个一样的组件，并将新的props传入，这样input就有值了。
用过React-Redux的人可能会有印象，使用connect可以将react和redux关联起来，这里的connect就是一个高阶组件，想到这，就很容易想出connect高阶组件是怎么实现了，我会在写一篇随笔，自己实现一个redux、connect、midlleware还有thunk。
