React公共逻辑的抽离

1. mixin, 已被react弃用
2. 高阶组件HOC
3. Render Props
4. 总结：HOC模式简单，但会增加组件层级，Render props 代码简洁，学习成本高一点

实现欢动鼠标位置打印

高阶组件HOC

//高阶组件HOC
import React from 'react';
// 高阶组件
const withMouse = Component =>{
    class HOC extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
                x:0,
                y:0
            }
        }
        handleMouseMove = (event) =>{
            this.setState({
                x:event.clientX,
                y:event.clientY
            })
        }
        render() {
            return <div style={{width:'400px',height:'400px',background:'red'}} onMouseMove={this.handleMouseMove}>
                {/* 1. 透传所有 props 2. 增加 mouse 属性 */}
                <Component {...this.props} mouse={this.state}></Component>
            </div>
        }
    }
    return HOC
}



function Basics15(props){
    const {x,y} = props.mouse  // 接收 mouse 属性
    console.log('props',props)
    return <div>
        <p>x:y= {x}:{y}</p>
    </div>
}


export default withMouse(Basics15)

Render Props

// Render Props
import React from 'react';
class Mouse extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            x:0,
            y:0
        }
    }

    handleMouseMove = (event) =>{
        this.setState({
            x:event.clientX,
            y:event.clientY
        })
    }

    render() {
       return <div style={{width:'400px',height:'400px',background:'red'}} onMouseMove={this.handleMouseMove}>
           {this.props.render(this.state)}
       </div>
    }
}

class Basics16 extends React.Component{

    constructor(props) {
        super(props);
    }

    render() {
        return <Mouse render={
            ({x,y})=>{
                return <h1>the mouse position ({x},{y})</h1>
            }
        }/>
    }

}


export default Basics16