第5期 render props

什么是render props

render prop是一种模式，即在父组件上通过属性告诉父组件你某个位置渲染的内容要拿我通过属性传给你的内容来渲染。

此处通过children这个属性告诉Mouse组件要渲染的内容

class Mouse extends React.Component {
    <Mouse children={mouse => (
        <p>鼠标的位置是 {mouse.x}，{mouse.y}</p>
    )}/>
}

Mouse组件此处通过获取属性children来渲染此处的内容

render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.children(this.state)}
      </div>
    );
}

注意

将 Render Props 与 React.PureComponent一起使用时,如果childre={()=>{}}这种方式传入，会导致每次都生成一个新的函数，而导致每次都会render组件。

例如此处children传入一个函数。

<Mouse children={mouse => (
  <p>鼠标的位置是 {mouse.x}，{mouse.y}</p>
)}/>

此处我们继承React.PureComponent，原本使用React.PureComponent就是为了根据传入值来判断是否要更新，提高性能，但是此处也只是会进行浅比较。

class Mouse extends React.PureComponent {
    <Mouse children={mouse => (
        <p>鼠标的位置是 {mouse.x}，{mouse.y}</p>
    )}/>
}

即使我们传入的children一直都是同一个函数，也会被Mouse认为是一个新的props而让Mouse组件updata，导致继承React.PureComponent带来的性能优化都被抵消而不发生作用。

此处可以考虑用以下这种方式代替。

  renderTheCat(mouse) {
    return <Cat mouse={mouse} />;
  }

  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={this.renderTheCat} />
      </div>
    );
  }