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>
      )
    }