render props

render props 是什么 ? react官网给出了一个解释: render prop 是一个组件用来了解要渲染什么内容的函数 prop。

import React, { Component } from 'react'

export default class Parent extends Component {
  render () {
    return (<>
      <h3>我是parent组件</h3>
      <Children
        render={(name) => <Grand name={name}  />}
      />
    </>)
  }
}

class Children extends React.PureComponent {
  render () {
    const name = '我是children的值'
    return (<>
      <h3>我是children组件</h3>
      {this.props.render(name)}
    </>)
  }

}

class Grand extends React.PureComponent {
  render () {
    return <>
      {this.props.name}
      <h3>我是grand组件</h3>
    </>
  }
}

这是一个parent组件 嵌套一个 children组件, children组件嵌套 grand组件. 使用方法就是上面

官网也给出了一个警告⚠️
在 React.PureComponent 中使用 render props 要注意
如果你在 render 方法里创建函数，那么使用 render prop 会抵消使用 React.PureComponent 带来的优势。这是因为浅 prop 比较对于新 props 总会返回 false，并且在这种情况下每一个 render 对于 render prop 将会生成一个新的值。

在这样例子中，每次 渲染，它会生成一个新的函数作为 的 prop，因而在同时也抵消了继承自 React.PureComponent 的 组件的效果！

为了绕过这一问题，有时你可以定义一个 prop 作为实例方法，类似如下：

export default class Parent extends Component {

  renderDom = (name) => {
    return <Grand name={name} />
  }
  render () {

    return (<>
      <h3>我是parent组件</h3>
      <button onClick={() => { this.setState({ update: !this.state?.update }) }}>更新</button>
      <Children
        // render={(name) => <Grand name={name} update={this.state?.update} />}
        render={this.renderDom}
      />
    </>)
  }
}
class Children extends React.PureComponent {
  render () {
   ...
  }
}

class Grand extends React.PureComponent {
  render () {
  ...
}