• 思考：如果两个组件中的部分功能相似或相同，该如何处理
• 处理方式： 复用组件的功能（联想函数封装）
• 复用啥？ state 、 操作state的方法 （组件状态逻辑）
• 两种方式： render props 模式 、高阶组件（HOC）
• 注意：这两种方式 不是新的API ， 而是利用React自带特点的编码技巧，演化而成的固定模式
• 个人理解：render-props只是对相似功能进行代码抽离，是一种代码优化的编写习惯，如果你擅长写屎山，完全可以不遵循这种方式。

---

render props 模式

1.思路分析

• 思路：将复用的 state 和操作 state 的方法封装到一个组件中
• 问题1：如何拿到组件中复用state？
• 在使用组件时，添加一个值为函数的props，通过函数 参数 来获取 （需要组件内部实现）
• 问题2： 如何渲染任意的UI?
• 使用 该函数的返回值 作为要渲染的UI内容（需要组件内部实现）

<Mounse render={(mouse)=>{
    return(
        <p>鼠标的当前位置 {mouse.x},{mouse.y}</p>
    )
}}

2.使用步骤

1. 创建Mouse组件，在组件中提供复用的状态逻辑代码（1.状态， 2.操作状态的方法）
2. 将要复用的状态作为 props.render(state) 方法的参数，暴露到组件外部
3. 使用 props.render() 的返回值作为渲染的内容

class Mounse extends React.Component{
    // ... 省略 state 和操作 state 的方法
    render(){
        return this.props.render(this.state)
    }
}

<Mouse render={()=><p>当前位置为{mouse.x},{mouse.y}</p>}/>

3.使用 children 替代 render 属性

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

<Mouse>
    {(x,y)=>{
        return(
            <p>鼠标的位置是 {x,y}</p>
        )
    }}
</Mouse>
/*组件内部*/
this.props.children(this.state)
/*Content 中的用法*/
<Consumer>
    { data => <span> { data } </span> }
</Consumer>

4.代码优化

• 推荐给 render props 添加 props 校验
• 应该在组件卸载时解除多余的全局事件

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

componentWillUnmount(){
    window.removeEventListener('mousemove',callBack)
}

---

高阶组件

1.思路分析

• 高阶组件 是一个函数 ,接受要包装的组件，返回增强后的组件
• 高阶组件每部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过 props 将复用的状态传递给被包装组件 WrappedCompoent

const EndancedComponent = withHOC(WrappedComponent)

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

2.使用步骤

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

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

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

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

3.设置 displayName

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

设置方式

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

4.传递 props

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

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