React高阶组件

mixin, 已被React 弃用
高阶组件 HOC
Render Props

高阶组件不是一种功能,而是一种模式

接收组件, 返回组件
逻辑封装到公共组件

const HOCFactory = (Component) => {
	class HOC extends React.Component {
		//在此定义多个组件的公共逻辑
		render(){
			//返回拼装的结果
			return <Component {...this.props}>
		}
	}
	return HOC
}

const EnhancedComponent1 = HOCFactory(WrappedComponent1)

Render Props ?

Render Props 的核心思想
通过一个函数将class组件的state作为props传递给纯函数组件

class Factory extends React.Component {
	constructor() {
		this.state = {
		 /* state 即多个组件的公共逻辑的数据 * /
		}
	}
	/* 修改state */
	render(){
		return <div>{this.props.render(this.state)}</div>
	}
}

const App = () => (
	<Factory render = {
	(props) => <p> {props.a} </p>
	 }
)

HOC vs Render Props

1. HOC: 模式简单, 但会增加组件层级
2. Render Props: 代码简洁, 学习成本较高
3. 按需使用