函数式编程与React高阶组件

时间:2023-01-10 13:54:14

相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么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。