React 高阶组件 原理

import React from "react"   // 导入react包

function withMouse(Components) {    // 创建一个函数, 并且有一个形参, 数据要求是一个组件
    class Mouse extends React.Component {   // 创建一个内部组件, 获取鼠标的移动事件的数据
　　　　　　　　　　　　　　　　　　　　　　　　　　 // 因为组件没有被调用, 相当于没有这个组件 , 所以在外部函数中,直接返回组件名,相当于调用
        // 初始化数据
        state = {
            x: 0,
            y: 0
        }
        // 鼠标移动的时候更新初始数据
        mousemoved = e => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        }
        // 组件渲染完成的时候监听鼠标的滚动事件
        componentDidMount() {
            window.addEventListener("mousemove", this.mousemoved)
        }
        // 组件注销的时候清除事件
        componentWillUnmount() {
            window.removeEventListener("mousemove", this.mousemoved)
        }
        // 调用render方法返回外部函数调用的时候出传递进来的组件
        render() {
            return (<Components {...this.state}></Components>)   // 这里的Components是外部函数的形参, 也就是用户传递过来的组件
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// 返回组件的时候,把当前组件数据"嵌入"进去了
        }
    }

    return Mouse;  // 相当于调用内部的组件, 同时内部组件的返回值会通过这个return ,返回给调用这个 withMouse 函数的组件
}

// 定义一个简单的组件,需要通过上面的函数,进行包装

const Title = props => {   // 定义了一个组件
    return (
        <div>
            <p>当前鼠标的X坐标为: {props.x}</p>   // 这里就能通过形参,使用上面高级函数传递过来的组件参数
            <p>当前鼠标的Y坐标为: {props.y}</p>
        </div>
    )
}

const Newtitle = withMouse(Title)   //这里把组件当做形参传递给上面的高阶组件, 返回的还是当前的组件, 只是内部多了高阶组件里面的共用组件的数据




//定义App组件

class App extends React.Component {
    render() {
        return (<Newtitle></Newtitle>)    // 最后一步,渲染的时候,调用了上面的title组件
    }
}
// 导出App组件
export default App

**核心分析**

1. 创建一个函数fn,假设形参为a  (a接收组件作为参数)

2. 函数内部创建一个组件, 只写公共逻辑, 返回的是传递进去的形参a,并且把内部逻辑的参数,携带进去

3. 外部的函数,return 的是内部的函数(相当于调用内部的组件)

4. 内部组件,返回的是调用函数fn传递进去的参数(组件),但是,返回的时候携带参数

4. 外部调用 fn,且传递组件进去, 返回值还是该组件(相比传递进去的时候,多了参数)