组件公共逻辑抽离

HOC模式

• 用公共逻辑组件包裹使用组件

const HOC = (Component) => {
    return class extends React.Component {
        // 在此定义公共逻辑
        render() {
            {/* 把父组件传给子组件的数据传回给Component */}
            return <Component { ...this.props } />
        }
    }
}

const app = HOC(App)

render props

• 使用组件包裹公共逻辑组件

// 公共逻辑组件
class Factory extends React.Component {
    constructor() {
        this.state = {
            // state 中放公共逻辑的数据
        }
    }
    render() {
        return <div> {this.props.render(this.state)} </div>
    }
}

// 使用
const App = () => {
    <Factory render={
    	(props) => <div>{props.a} ....</div>     
    } />
}