react中的render-props模式_

componentDidMount() {
  window.addEventListener('mousemove', this.handleMouseMove)
}

​
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
render() {
return (
// ui都限制在了render中

x: {this.state.x}
y: {this.state.y}

)
}
}
​
​

### **优化思路分析**


* 思路：将要复用的state和操作state的方法封装到一个组件中
* 如何拿到该组件中复用的state
	+ 在使用组件时，添加一个值为函数的prop，通过函数参数来获取

<Mouse render={(mouse) => {}} />

* 如何渲染到任意的UI
	+ 使用该函数的返回值作为要渲染的UI内容

<Mouse render={(mouse) => {
return

x: {mouse.x}
y: {mouse.y}

}} />

### **使用步骤**


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

render() {
// return (
//

// {/* mouse */}
// x: {this.state.x}
// y: {this.state.y}
//

// )
return this.props.render(this.state)
}
​

#### **示例demo**

class Mouse extends React.Component {
// 鼠标位置状态
state = {
x: 0,
y: 0
}
​
// 监听鼠标移动事件
componentDidMount(){
window.addEventListener(‘mousemove’,this.handleMouseMove)
}
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
render(){
// 向外界提供当前子组件里面的数据
return this.props.render(this.state)
}
}
class App extends React.Component {
render() {
return (

App
<Mouse render={mouse => {
return

X{mouse.x}Y{mouse.y}

}}/>

)
}
}
ReactDOM.render(,document.getElementById(‘root’))

### **children代替render属性**


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

{ ({ x, y }) => { return (

x: {x} y: {y}

) } }

Mouse组件内部的render修改为：

render() {
// return (
//

// {/* mouse */}
// x: {this.state.x}
// y: {this.state.y}
//

// )
return this.props.children(this.state)
}

### **优化代码**


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

​
static propTypes = {
children: PropTypes.func.isRequired
}
​

* 当组件移除时候解绑事件

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