render porps
class Factory extends React.Component{
constructor(props){
super(props);
this.state = {
/** state 即多个组件公用的逻辑数据**/
}
}
render(){
return <div>{this.props.render(this.state)}</div>
}
}
const App=(props)=>(
<Factory render={
(props)=><p>{props.a}</p>
} />
)
HOC
例子
function HOCFactory(WrappedComponent) {
return class HOC extends React.Component {
render(){
return <WrappedComponent {...this.props} />
}
}
}
比如，组件要在data没有加载完的时候，现实loading...，就可以这么写
function loading(wrappedComponent) {
return class Loading extends React.Component {
render(){
if(!this.props.data) {
return <div>loading...</div>
}
return <wrappedComponent {...props} />
}
}
}
