React16.8中关于children和render props的认知

一、组件的创建方式

• 1、使用createClass方式创建(已经被淘汰了)

• 2、类组件

  import React, { Component } from 'react'
  
  export default class Components1 extends Component {
    render() {
      return <div />
    }
  }
  复制代码

• 3、函数组件(比较推荐的方式)

  import React from 'react'
  
  function Child(props) {
    return <></>
  }
  
  export default () => {
    return (
      <>
        <Child />
      </>
    )
  }
  复制代码

二、组件的调用方式(使用children)

直接把组件当做一个DOM节点,在里面写内容,在该组件中使用childrend进行渲染

• 1、简单的引用

  import React from 'react'
  
  function Child(props) {
    return <>我是child组件</>
  }
  export default () => {
    return (
      <>
        <Child />
      </>
    )
  }
  复制代码

• 2、组件中传递html代码

  import React from 'react'
  
  function Child(props) {
    console.log(props)
    return (
      <>
        <p>我是child组件</p>
        {props.children}
      </>
    )
  }
  export default () => {
    return (
      <>
        <Child>
          {/* 在组件中直接写内容可以传递到该组件的children上 */}
          <h1>我是父组件传递进去的</h1>
          <h2>我是父组件传递进去的内容二</h2>
        </Child>
      </>
    )
  }
  复制代码

• 3、传递一个组件进去

  import React from 'react'
  
  function Parent(props) {
    return (
      <>
        <p>我是Parent组件</p>
        {props.children}
      </>
    )
  }
  function Child(props) {
    return (
      <>
        <p>我是Child组件</p>
      </>
    )
  }
  export default () => {
    return (
      <>
        <Parent>
          <Child />
        </Parent>
      </>
    )
  }
  复制代码

• 4、组件中传递一个函数进去

  import React from 'react'
  
  function Child(props) {
    return (
      <>
        <p>我是child组件</p>
        {props.children({ name: '哈哈', gender: '男' })}
      </>
    )
  }
  export default () => {
    return (
      <>
        <Child>
          {args => {
            console.log(args)
            return <div id="child">{args.name}</div>
          }}
        </Child>
      </>
    )
  }
  复制代码

三、render props的使用参考文档

主要作用点

• 1、使用Render Props解决来横切关注点(组件的复用[复用组件内部一些逻辑])
• 2、Render prop 是一个用于告知组件需要渲染什么内容的函数 prop与传统组件的props有点类似,只是希望渲染的是一个组件或者一个DOM节点
• 3、Render props主要用于组件代码的复用

代码案例

• 1、使用render props渲染一个DOM节点

  import React from 'react'
  
  export default function Render03() {
    return (
      <div>
        <Child
          render={props => {
            // 可以接收render函数里面的参数
            console.log(props)
            return (
              <div style={{ color: '#f90' }}>
                我是渲染出来的--{props.name}--{props.gender}
              </div>
            )
          }}
        />
      </div>
    )
  }
  
  function Child(props) {
    return (
      <>
        <h1>我是child组件</h1>
        {/* render里面传递参数,真正渲染的地方接收参数 */}
        {props.render({ name: '张三', gender: '男' })}
      </>
    )
  }
  复制代码

• 2、使用render props渲染一个组件

  import React from 'react'
  
  export default function Render04() {
    return (
      <div id="render04">
        <Child1 render={props => <Child2 {...props} />} />
      </div>
    )
  }
  
  function Child1(props) {
    return (
      <>
        <h2>我是child1组件</h2>
        {props.render({ name: '张三', gender: '男' })}
      </>
    )
  }
  
  function Child2(props) {
    console.log(props)
    return (
      <>
        <h2>我是child2组件</h2>
        <h3>{props.name}</h3>
      </>
    )
  }
  复制代码

• 3、使用render props达到组件的复用

  import React, { useState } from 'react'
  
  export default function Render05() {
    return (
      <div>
        <Mouse
          render={props => {
            return <Cat {...props} />
          }}
        />
        <Mouse
          render={props => {
            console.log(props)
            return (
              <div
                style={{
                  width: '100px',
                  height: '100px',
                  background: '#f90',
                  position: 'absolute',
                  top: props.y - 50,
                  left: props.x - 50
                }}
              />
            )
          }}
        />
      </div>
    )
  }
  
  function Cat(props) {
    return (
      <div>
        <div
          style={{
            position: 'absolute',
            width: '100px',
            height: '100px',
            background: '#f00',
            cursor: 'move',
            left: props.x - 50,
            top: props.y - 50
          }}
        />
      </div>
    )
  }
  function Mouse(props) {
    const [location, setLocation] = useState({ x: 0, y: 0 })
  
    const handleMouseMove = event => {
      setLocation({
        x: event.clientX,
        y: event.clientY
      })
    }
    return (
      <div style={{ height: '100%' }} onMouseMove={handleMouseMove}>
        {props.render(location)}
      </div>
    )
  }
  复制代码