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

一、组件的创建方式

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

三、render props的使用参考文档

主要作用点

代码案例

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

三、`render props`的使用参考文档