补充知识

纯函数

纯函数：相同的输入，必定有相同输出的函数。

// 纯函数
const print = (a) => console.log(a)
const add = (a, b) => a + b
// 非纯函数
const Random = (a) => Math.random() + `${a}`
const fetchSource = (url) => fetch(url) // 请求返回的数据是不确定的

高阶函数

高阶函数：

• 入参：一个函数，
• 出参：新的函数
• 纯函数 ```javascript // 高阶函数，为函数添加一些新功能 const wrapWithName = (fn) => { return function(…args) { const name = ‘konsoue’ fn.call(this, name, …args) } }

// 使用方式 const getName = wrapWithName((name) => console.log(name))

getName() // konsoue

<a name="R3qFI"></a>
# 高阶组件
HOC（High Order Component）：高阶组件。
- HOC 就是一个函数
   - 纯函数，不应该有副作用
- 入参：原来的 React 组件
- 出参：新的 React 组件
<a name="cDhST"></a>
## 应用场景
<a name="E40re"></a>
### 属性代理
1. 操作 props
> 实际使用，react-redux 的 connect
```javascript
import React, { Component } from 'react'
const propsHOC = (InnerComponent) => {
  return class WrapperComponent extends Component {
    state = {
      name: 'konsoue'
    }
    render() {
      return (<InnerComponent {...this.props} {...this.state} />)
    }
  }
}
export default propsHOC

1. 操作组件实例 ```jsx // 使用 HOC 获取组件实例，实现调用兄弟组件的属性方法 import React, { Component } from ‘react’

const refHOC = (LeftComponent, RightComponent) => { return class WrapperComponent extends Component {

render() {
  return (
    <div>
      <LeftComponent
        ref={(instance) => this.leftComponentRef = instance}
      />
      <RightComponent
        leftComponentRef={this.leftComponentRef}
      />
    </div>)
}

} }

export default refHOC

<a name="CLUzE"></a>
### 继承/劫持
可用于劫持组件的方法，生命周期等等
```jsx
// 通过继承组件，劫持组件的 setState 方法
import React from 'react'
const hackComponent = (InnerComponent) => {
  return class extends InnerComponent {
    render() {
      const parent = super.render()
      const rawSetState = super.setState
      super.setState = function (...args) {
        console.log('劫持了 setState')
        rawSetState.call(this, ...args)
      }
      return React.cloneElement(parent)
    }
  }
}
export default hackComponent