react中的render-props模式

前言

• 思考：如果两个组件中的部分功能相似或相同，该如何处理？
• 处理方式：复用相似的功能
• 复用什么？
  • state
  • 操作state的方法
• 两种方式：
  • render props模式
  • 高阶组件（HOC）
• 注意： 这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式，接下来我们以render-props模式为例，一步一步演示其使用流程。

 需要更多教程，微信扫码即可

👆👆👆

别忘了扫码领资料哦【高清Java学习路线图】

和【全套学习视频及配套资料】

案例分析

我们以鼠标移动获取坐标为例，该案例是未优化过的代码，我们发现ui都限制在了render中。

  import { Component } from 'react'
  import PropTypes from 'prop-types'
  export default class Mouse extends Component {
    static propTypes = {
      children: PropTypes.func.isRequired
    }
​
    state = {
      x: 0,
      y: 0
    }
​
    componentDidMount() {
      window.addEventListener('mousemove', this.handleMouseMove)
    }
​
    handleMouseMove = e => {
      this.setState({
        x: e.clientX,
        y: e.clientY
      })
    }
    render() {
      return (
        // ui都限制在了render中
        <div>
          x: {this.state.x}
          y: {this.state.y}
        </div>
      )
    }
  }
​
​

优化思路分析

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

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

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

 <Mouse render={(mouse) => {
     return <p>
         x: {mouse.x}
         y: {mouse.y}
     </p>
  }} /> 

使用步骤

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

  render() {
    // return (
    //   <div>
    //     {/* mouse */}
    //     x: {this.state.x}
    //     y: {this.state.y}
    //   </div>
    // )
    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 (
            <div>
                App
                <Mouse render={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属性

 <Mouse>
  {
    ({ x, y }) => {
      return (
        <p>
          x: {x}
          y: {y}
        </p>
      )
    }
  }
</Mouse>

Mouse组件内部的render修改为：

  render() {
    // return (
    //   <div>
    //     {/* mouse */}
    //     x: {this.state.x}
    //     y: {this.state.y}
    //   </div>
    // )
    return this.props.children(this.state)
  }

优化代码

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

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

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

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

 需要更多教程，微信扫码即可

👆👆👆

别忘了扫码领资料哦【高清Java学习路线图】

和【全套学习视频及配套资料】