React-15 组件复用

当两个组件中的部分功能相似或相同时，可以考虑组件复用复用其相似的功能；

组件复用的实质是复用state和操作state的方法；

组件复用的两种方式：

1. render props模式

使用步骤：

 1.创建公共组件，在组建中提供复用的状态逻辑代码（state和操作state的方法）；

 2.将要复用的状态作为 props.render(state) 方法的参数，暴露到组件外部；

 3.使用 props.render() 的返回值作为要渲染的内容进行页面渲染；

案例如下：

import React from 'react';
import ReactDOM from 'react-dom';
import img from "./img/logo192.png"

// 创建公共组件
class Mouse extends React.Component{
    state={
        x:0,
        y:0,
    }
    // 监听鼠标移动事件
    componentDidMount(){
        window.addEventListener('mousemove',this.handMouseMove)
    }
    // 推荐在组件卸载时移除事件绑定
    componentWillUnmount(){
        window.removeEventListener('mousemove',this.handMouseMove)
    }
    // 鼠标移动事件
    handMouseMove=(e)=>{
        this.setState({
            x:e.clientX,
            y:e.clientY,
        })
    }
    render(){
        // 使用this.props.render()方法将state暴露出去
        return this.props.render(this.state)
    }
}

// 添加props校验 
Mouse.PropTypes={
    // render是个函数且必填
    render:PropTypes.func.isRequired
}

class App extends React.Component{
    render(){
        console.warn("生命周期钩子函数: render")
        return (
            <div>
                <h1>render props 模式</h1>
                <Mouse render={(mouse)=>{
                    // 复用组件 根据复用场景return不同的内容进行渲染
                    return <p>鼠标位置：x轴{mouse.x} y轴{mouse.y}</p>
                }} />
                 <Mouse render={(mouse)=>{
                    // 复用组件 根据复用场景return不同的内容进行渲染
                    return <img src={img} alt="" style={{
                        position:'absolute',
                        top:mouse.y,
                        left:mouse.x,
                        transform:'translate(-50%,-50%)',
                    }}/>
                }} />
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

注意：

      并不是该模式叫 render props 就必须使用名为render的prop，实际上可以使用任一鸣的props

      把prop是一个函数并且告诉组件要渲染什么内容的技术叫做 render props 模式

      一般实际开发中，为了更直观，我们经常使用children的方式代替render：

                <Mouse>
                    {
                        (mouse)=>{
                            return (
                                <img src={img} alt="" style={{
                                    position:'absolute',
                                    top:mouse.y,
                                    left:mouse.x,
                                    transform:'translate(-50%,-50%)',
                                }}/>
                            )
                        }
                    }
                </Mouse>

使用children方式时，切记将组件内的

this.props.render(this.state)替换为 this.props.children(this.state)

2. 高阶组件（HOC）

采用 包装（装饰）模式

高阶组件实际上是一个函数，接收要包装的组件，返回增强后的组件；

注意：这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式（写法）

使用步骤：

1.创建一个函数，名称约定 以 with 开头；

2.指定函数的参数，参数应以大写字母开头（作为要渲染的组件）；

3.在函数内部创建一个类组件，提供复用的状态逻辑，并返回；

4.在该组件中渲染参数组件，同时将状态通过props传递给参数组件；

5.调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件并渲染；

案例如下：

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from "prop-types"
import img from "./img/logo192.png"

// 创建高阶组件
function withMouse(WrappedComponet){
    // 该组件提供复用的状态逻辑
    class Mouse extends React.Component{
        // 提供状态
        state={
            x:0,
            y:0,
        }
        // 控制状态的逻辑
        componentDidMount(){
            window.addEventListener("mousemove",this.handMouseMove)
        }
        // 组件卸载时解绑逻辑
        componentWillUnmount(){
            window.removeEventListener("mousemove",this.handMouseMove)

        }
        handMouseMove=(e)=>{
            this.setState({
                x:e.clientX,
                y:e.clientY,
            })
        }
        render(){
            // props也要传递，否则会造成props丢失
            return <WrappedComponet {...this.state} {...this.props}></WrappedComponet>
        }
    }
    // 设置displayName 用于调试时区分dome节点
    Mouse.displayName = `WithMouse${getDisPlayName(WrappedComponet)}`
    return Mouse
}
function getDisPlayName(WrappedComponet){
    return WrappedComponet.displayName || WrappedComponet.name || 'Component'
}
// 用来测试高阶组件的需要被增强的组件
const Position = props=>{
    return <p>鼠标位置：x轴{props.x} y轴{props.y}</p>
}
const ImgPosition= props=>{
    return <img src={img} alt="" style={{
        position:'absolute',
        top:props.y,
        left:props.x,
        transform:'translate(-50%,-50%)',
    }}/>
}
// 获取增强后的组件
const MousePosition = withMouse(Position);
const ImgMousePosition = withMouse(ImgPosition);

class App extends React.Component{
    render(){
        return (
            <div>
                <h1>高阶组件</h1>
                {/* 渲染增强后的组件 */}
                <MousePosition />
                <ImgMousePosition />
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))