React中render Props模式

React组件复用

React组件复用的方式有两种：
1.render Props模式
2.高阶组件HOC
上面说的这两种方式并不是新的APi。
而是利用Raect自身的编码特点，演化而来的固定编码写法。

什么是render Props模式

1.把prop是一个函数并且要告诉组件要渲染什么内容的技术，叫做render Props模式。
2.注意的是：并不是该模式叫做render Props就必须使用名为render的props,
实际上可以使用任意的props。
对上面者一句话的详细说明：
子组件向父组件抛出数据的时候使用的是:
this.props.render(数据)中render可以是其他名，如果GiveFather.

render Props的简单使用

现在我们有一个有的需求。
光标放在屏幕上，时时获取当前坐标的位置。
请封装为一个组件。

MoveCom.js 时时获取当前坐标的位置

import React from 'react';
class MoveCom extends React.Component{
  // 提供位置数据
  state = {
    x: 0,
    y:0,
  }
  // 获取鼠标的当前坐标
  moveHandler = e => { 
    this.setState({
        x: e.clientX,
        y:e.clientY
    })
  }
  // 监听鼠标的行为
  componentDidMount() { 
    // DOM已经渲染完成了；可以进行DOM操作
    window.addEventListener('mousemove',this.moveHandler)
  }
  render() { 
    // 将组件中的数据暴露出去this.props.render(数据)
    return this.props.render(this.state)
  }
}
export default MoveCom

父组件展示位置

import React from 'react';
import ReactDOM from 'react-dom'; 
import ClassCom from "./components/ClassCom"
import MoveCom from './components/MoveCom'
class Father extends React.Component{
  render() { 
    return (
      <div>
        <h2> render Props的简单使用</h2>
        { /* 接受子组件向上抛出来的数据*/}
        <MoveCom render={sonGiveData => {
          return (
            <p>当前鼠标的坐标横坐标： {sonGiveData.x }  纵坐标: {sonGiveData.y }</p>
          )
        }}></MoveCom>
      </div>
    )
  }
}
ReactDOM.render(
  <Father></Father>,
  document.getElementById('root')
)

总结

1. 如何将子组件中的数据抛出去
render() { 
    return this.props.render(数据) 
}

父组件接受数据
<MoveCom render={sonGiveData => {
  return (
    <!-- 渲染的html以及数据 -->
    <p>当前鼠标的坐标横坐标： {sonGiveData } </p>
  )
}}></MoveCom>

我们发现上面这个组件只实现了状态。
并没有实现UI结构的渲染。
UI结构的渲染是交给render函数来决定返回的内容。

小技巧：在React中 left,right,top,bottom是不需要加上px的。
<p style={{ position:'absolute', left:100, top:200 }}> 不需要加上px的 </p>

this.props.render(数据) 可以将数据传递出去
再次说明：上面这个render这个不一定非要叫做render。
只是这样写render了，你页可以叫做Aa，接受的时候使用也用Aa接收。

其实推荐children去代替render。因为这样更加语义化一些的。
在实际写的过程中也是用children。
下面我们来将代码更改一下，children去代替render。

children去代替render语法上的变化

1.使用render子组件向上抛出数据:
this.props.render(数据) 

1.使用children子组件向上抛出数据:
this.props.children(数据)
在向上抛出数据的时候，只是render变为了children。

2.render接受数据：
<MoveCom render={sonGiveData => {
    return (
        <p>当前鼠标的坐标横坐标： {sonGiveData } </p>
    )
}}></MoveCom>

2.children接收数据：
<MoveCom>
  {
    (data) => {
      return (
        <p style={{ position:'absolute', left:data.x, top:data.y }}>
          横坐标： {data.x }  纵坐标: {data.y }
        </p>
      )
    }
  }
</MoveCom>
render接收数据的时候，数据是写在组件上
children接收的时候，将数据写在了里面。

render Props中使用 children去代替render

子组件
import React from 'react';
class MoveCom extends React.Component{
  // 提供位置数据
  state = {
    x: 0,
    y:0,
  }
  // 获取鼠标的当前坐标
  moveHandler = e => { 
    this.setState({
      x: e.clientX,
      y:e.clientY
    })
  }
  // 监听鼠标的行为
  componentDidMount() { 
    // DOM已经渲染完成了；可以进行DOM操作
    window.addEventListener('mousemove',this.moveHandler)
  }
  render() { 
    // 将子组件中的数据暴露出去,render变为了children
    return this.props.children(this.state)
  }
}
export default MoveCom

父组件
import React from 'react';
import ReactDOM from 'react-dom'; 
import ClassCom from "./components/ClassCom"
import MoveCom from './components/MoveCom'
class Father extends React.Component{
  render() { 
    return (
      <div>
        <h2> render Props的简单使用</h2>
        <MoveCom>
          {
            (data) => {
              return (
                <p style={{ position:'absolute', left:data.x, top:data.y }}>
                    横坐标： {data.x }  纵坐标: {data.y }
                </p>
              )
            }
          }
        </MoveCom>
      </div>
    )
  }
}

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

优化React中render Props模式

1.推荐给render Props添加一个校验。
因为render Props接收的是一个函数并且是必须写的。
// 规则校验
MoveCom.propTypes = {
  // 如果是使用的children
  children: PropTypes.func.isRequired
  // render: PropTypes.func.isRequired 如果使用使用的render
}

2.移出事件绑定
 // 组件即将卸载的时候，移出事件监听
componentWillUnmount() { 
  window.removeEventListener('mousemove',this.moveHandler)
}

3.这里为什么要移出事件绑定
而我们在页面中用onClick绑定的事件不需要被移除呢？
因为onClick是借用react来完成的事件绑定，react会自动帮我们移除。
这里我们不是借用React来完成的事件绑定，因此我们应该手动移除

子组件优化后的代码

import React from 'react';
import PropTypes from 'prop-types'
class MoveCom extends React.Component{
  // 提供位置数据
  state = {
    x: 0,
    y:0,
  }
  // 获取鼠标的当前坐标
  moveHandler = e => { 
    this.setState({
      x: e.clientX,
      y:e.clientY
    })
  }
  // 监听鼠标的行为
  componentDidMount() { 
    // DOM已经渲染完成了；可以进行DOM操作
    window.addEventListener('mousemove',this.moveHandler)
  }

  // 组件即将卸载的时候，移出事件监听-优化的地方
  componentWillUnmount() { 
    window.removeEventListener('mousemove',this.moveHandler)
  }
  render() { 
    // 将子组件中的数据暴露出去,render变为了children
    return this.props.children(this.state)
  }
}

// 规则校验-优化的地方
MoveCom.propTypes = {
  // 如果是使用的children
  children: PropTypes.func.isRequired
  //  render: PropTypes.func.isRequired 如果使用使用的render
}

export default MoveCom