React：render-props模式和高级组件

@TOC

一，render-props模式：

//创建Mouse组件
class Mouse extends React.Component{
    //鼠标位置state
    state={
        x:0,
        y:0,
    }
    //鼠标移动事件的事件处理程序
    handleMouseMove = e =>{
        this.setState({
            x:e.clientX,
            y:e.clientY
        })
    }
    //监听鼠标移动事件
    componentDidMount() {
        window.addEventListener('mousemove',this.handleMouseMove)
    }

    render() {
        return this.props.render(this.state)
    }
}
class App extends React.Component{

    render() {
        return (
            <div>
                <h1>render props 模式</h1>
                <Mouse render={(mouse)=>{
                    return(
                        <p>
                            鼠标位置：{mouse.x}        {mouse.y} 
                        </p>
                    )
                }
                }/>
            </div>
        )
    }

}

推荐使用children代替render属性：

• 注意：并不是该模式叫render props 就必须使用名为render的prop，实际上可以使用任意名称的prop
• 把prop是一个函数并且告诉组件要渲染什么内容的技术叫做：render props模式

<Mouse>
    {({x,y})=><p>鼠标的位置是{x}，{y}</p>}
</Mouse>
//组件内部
this.props.children(this.state)

代码优化：

1. 推荐：给render props模式添加props校验

   Mouse.propTypes = {
       chidlren: PropTypes.func.isRequired
   }

   希望chidlren属性是个函数并且是必填项

2. 应该在组件卸载时解除mousemove事件绑定

   componentWillUnmount(){
       window.removeEventListener('mousemove',this.handleMouseMove)
   }

二，高阶组件：

概述：

• 目的：实现状态逻辑复用
• 采用包装（装饰）模式，比如手机壳
• 手机：获取保护功能
• 手机壳：提供保护功能
• 高阶组件就相当于手机壳，通过包装组件，增强组件功能

思路分析：

• 高阶组件（HOC，Higher-Order Component）是一个函数，接受要包装的组件，返回增强后的组件
• 高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过props将复用的状态传递给被包装组件WrappedComponent

const EnhancedComponent = withHOC(WreppedComponent)

//高阶租价内部创建的类组件
class Mouse extends React.Component {
    render( ){
        return <WrappedComponent {...this.state}/>
    }
}

使用步骤：

1. 创建一个函数，名称约定以with开头
2. 指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
3. 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
4. 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
5. 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中

function withMouse(WrappedComponent) {
    class Mouse extends React.Component {}
    return Mouse
}

//Mouse组件的render方法中：
return <WrappedComponent {...this.state}/>

//创建组件
const MousePosition = withMouse(Position)
//渲染组件
<MousePosition />

设置displayName：

• 使用高阶组件存在的问题：得到的两个组件名称相同
• 原因：默认情况下，React使用组件名称作为displayName
• 解决方式：为高阶组件设置displayName便于调试时区分不同的组件
• displayName的作用：用于设置调试信息（React Developer Tools信息）

• 设置方式：

  Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
  function getDisplayName (WrappedComponent) {
      return WrappedComponent.displayName || WrappedComponent.name || 'Component'
  }

  传递props：

  • 问题：props丢失
  • 原因：高阶组件没有往下传递props
  • 解决方式：渲染WrappedComponent时，将state和this.props一起传递给组件

  • 传递方式：

    <WrappedComponent {...this.state} {...this.props} />

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import {getCLS} from "web-vitals";
// 高阶组件
// 创建高阶组件
function withMouse(WrappedComponent) {
    //该组件提供复用的状态逻辑
    class Mouse extends React.Component {
        //鼠标位置state
        state = {
            x: 0,
            y: 0,
        }
        //鼠标移动事件的事件处理程序
        handleMouseMove = e => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        }

        //监听鼠标移动事件
        componentDidMount() {
            window.addEventListener('mousemove', this.handleMouseMove)
        }

        componentWillUnmount() {
            window.removeEventListener('mousemove', this.handleMouseMove)
        }

        render() {
            return <WrappedComponent {...this.state} {...this.props} />
        }
    }

    //设置displayName
    Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
    return Mouse
}

function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

//用来测试高阶组件
const Position = props => {
    console.log('Position：', props)
    return(
        <p>
            鼠标当前的位置：(x: {props.x},y: {props.y})
        </p>
        )

}
//获取增强后的组件：
const MousePosition = withMouse(Position)

class App extends React.Component {

    render() {
        return (
            <div>
                <h1>高阶组件</h1>
                {/*{渲染增强后的组件}*/}
                <MousePosition a="520"></MousePosition>
            </div>
        )
    }

}

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