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

巴特西

React中render Props模式

React组件复用

什么是render Props模式

render Props的简单使用

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

父组件展示位置

总结

children去代替render语法上的变化

render Props中使用 children去代替render

优化React中render Props模式

子组件优化后的代码

最新文章

热门文章