09.Render-props

React组件复用

``` 思考：如果两个组件中的部分功能相似或相同，该如何处理？ 处理方式：复用相似的功能（函数封装） 复用什么？1.state 2.操作state的方法（组件状态逻辑） 两种方式：1.render props模式 2.高阶组件（HOC) 注意：这两种方式不是新的API,而是利用React自身特点的编程技巧，演化而成的固定模式（写法） ```

render props模式

思路分析

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

``` 问题1:如何拿到该组件中复用的state? 在使用组件时，添加一个值为 函数的prop.通过函数参数 来获取（需要组件内部实现） 问题2:如何渲染任意的UI? 使用该函数的返回值作为要渲染的UI内容（需要组件内部实现）

<Mouse render={(mouse)=>(

鼠标当前位置{mouse.x},{mouse.y}

)}/>

<h3 style="color:red;">使用步骤</h3>

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

//创建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(

render props 模式

<Mouse render={mouse => {
return(

鼠标位置：{mouse.x},{mouse.y}

)
}}/>

)
}
}

ReactDOM.render(,document.getElementById('root'))

<h4>演示Mouse组件复用</h4>

class App extends React.Component{
render(){
return(

render props 模式

<Mouse render={mouse => {
return(

鼠标位置：{mouse.x},{mouse.y}

)
}}/>
{/* 猫抓老鼠 */}
<Mouse render={mouse =>{
return <img src={img} alt="猫" style={{'100px',height:'100px',position:'absolute',top:mouse.y-50,left:mouse.x-50}}/>

            }} />
        </div>
    )
}

}

<h3 style="color:red;">children代替render属性</h3>

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

import img from './images/33.jpeg'

//创建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(

render props 模式

<Mouse render={mouse => {
return(

鼠标位置：{mouse.x},{mouse.y}

)
}}/>
{/* 猫抓老鼠 */}
<Mouse render={mouse =>{
return <img src={img} alt="猫" style={{'100px',height:'100px',position:'absolute',top:mouse.y-50,left:mouse.x-50}}/>

            }} />
        </div>
    )
}

}

ReactDOM.render(,document.getElementById('root'))

改

return this.props.children(this.state)

class App extends React.Component{
render(){
return(

render props 模式

{mouse =>{
return

鼠标位置：{mouse.x} {mouse.y}

}}

            {/* 猫抓老鼠 */}
            <Mouse>
            {mouse =>{
                return  <img src={img} alt="猫" style={{'100px',height:'100px',position:'absolute',top:mouse.y-50,left:mouse.x-50}}/>
                                    
            }}
            </Mouse> 
        </div>
    )
}

}

<h4>优化</h4>

1.推荐 ： 给render props 模式添加 props校验
//添加props校验
Mouse.propTypes = {
children:PropTypes.func.isRequired
}

2.应该在组件卸载时解除 mousemove 事件绑定
//推荐在组件卸载时移除事件绑定
componentWillUnmount(){
window.removeEventListener('mousemove',this.handleMouseMove)
}