render-props模式 （★★★）

目标

知道render-props模式有什么作用

能够说出render-props的使用步骤

React组件复用概述

思考：如果两个组件中的部分功能相似或相同，该如何处理？

处理方式：复用相似的功能

复用什么？

state

操作state的方法

两种方式：

render props模式

高阶组件（HOC）

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

思路分析

思路：将要复用的state和操作state的方法封装到一个组件中

如何拿到该组件中复用的state

在使用组件时，添加一个值为函数的prop，通过函数参数来获取

如何渲染到任意的UI

使用该函数的返回值作为要渲染的UI内容

使用步骤

创建Mouse组件，在组件中提供复用的逻辑代码

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

使用props.render() 的返回值作为要渲染的内容

示例demo

classMouseextendsReact.Component {
// 鼠标位置状态state= {
x: 0,
y: 0    }
// 监听鼠标移动事件componentDidMount(){
window.addEventListener('mousemove',this.handleMouseMove)
    }
handleMouseMove=e=> {
this.setState({
x: e.clientX,
y: e.clientY        })
    }
render(){
// 向外界提供当前子组件里面的数据returnthis.props.render(this.state)
    }
}
classAppextendsReact.Component {
render() {
return (
<div>App<Mouserender={mouse=> {
return<p>X{mouse.x}Y{mouse.y}</p>                }}/></div>        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

children代替render属性

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

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

推荐：使用childre代替render属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vNVJLkKl-1658295200269)(images/render-props-children模式.png)]

优化代码

推荐给render props模式添加props校验