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
- HOC: 模式简单, 但会增加组件层级
- Render Props: 代码简洁, 学习成本较高
- 按需使用