高阶函数
- 高阶函数是指满足下列条件之一的函数
1、接受一个或多个函数作为输入；
2、返回一个函数；
Mixins的缺点
1、破坏组件封装性：Mixin可能会引入不可见的属性。例如在渲染组件中使用Mixin方法，给组件带来了不可见的属性(props)和状态(state)。并且Mixin可能会相互依赖，相互耦合，不利于代码维护
2、不同的Mixin中的方法可能会相互冲突
高阶组件
- 定义
高阶组件指的是接受一个组件作为参数并返回一个新的组件。高阶组件是一个函数，并非一个组件。 - 高阶组件的实现方式
1、属性代理 （Props Proxy）function ppHOC (WrappedComponent) { return class PP extends React.Component { render () { return <WrappedComponent {...this.props} /> } } }
从代码中我们可以看出高阶组件的render方法中，返回被包裹组件。我们把高阶组件收到的Props传递给他，因此得名Props Proxy
2、反向继承 （Inheritance Inversion）
function iiHOC(WrappedComponent) {
return class Enhancer extends WrappedComponent {
render() {
return super.render()
}
}
}
如代码所示，高阶组件返回的组件继承了被包裹组件。
高阶组件的作用
我们可以使用高阶组件来实现代码复用，代码模块化，逻辑抽象等。还可以进行如下使用
- 操作Props
原理： 传给WrappedComponent的组件首先都会传给WrapperComponent，所以我们在WrapperComponent中能对Props进行相应的修改。
代码:
function ppHOC (WrappedComponent) {
return class PP extends React.Component {
render () {
const nextProps = {
name: 'lta'
}
return <WrappedComponent {...this.props} {...nextProps} />
}
}
}
通过上面的代码，我们的WrappedComponent组件接收的Props中，就会增加一个name的属性。
- 抽象state
可以通过向WrappedComponent传递Props和回调函数来抽象state
function ppHOC(WrappedComponent) {
return class PP extends React.Component {
constructor(props) {
super(props)
this.state = {
name: ''
}
this.onNameChange = this.onNameChange.bind(this)
}
onNameChange(event) {
this.setState({
name: event.target.value
})
}
render() {
const newProps = {
name: {
value: this.state.name,
onChange: this.onNameChange
}
}
return <WrappedComponent {...this.props} {...newProps}/>
}
}
}
使用方法:
@ppHOC
class Example extends React.Component {
render() {
return <input name="name" {...this.props.name}/>
}
}
通过这种操作是Input编程一个受控组件
- 渲染劫持 （反向继承）
function iiHOC(WrappedComponent) {
return class Enhancer extends WrappedComponent {
render() {
if (this.props.loggedIn) {
return super.render()
} else {
return null
}
}
}
}
通过该方法可以条件性地渲染组件。
- 与Mixin的区别
高阶组件是属于函数式编程思想，对于被包裹的组件不会感知到高阶组件的存在，而高阶组件返回的组件能增强原来组件的的功能。Mixin是一种混入模式，会不断增加组件的方法和属性，组件本身不仅可以感知，甚至需要处理。一但使用Mixin的地方多时，整个组件就会变得难以维护。
