introduce

Render PropsRefers to 值为函数the technique of sharing code between React components using a prop
The component that has render propaccepts one 返回React元素的函数, and implements its own rendering logic by calling this function inside the component
Mainly used to extract logic for code reuse

use

Take Mouse & Catthe example from the official documentation as an example

Create Mousea component, this component is only used to provide 复用的状态逻辑代码(state, method, etc.)
Will be exposed 复用的状态as props.render(state)a method parameter to the outside of the component
Use props.render()the return value as the content to render

import React from 'react'
class Mouse extends React.Component {
    
    
	// 省略操作方法
	render(){
    
    
		return this.props.render(this.state)
	}
}
//根组件
export default class App extends React.Component {
    
    
	render(){
    
    
		<Mouse render={
    
     mouse => (
			<div>当前鼠标位置 {
    
    mouse.x} {
    
    mouse.y}<div>
		)}/>
		//此处的mouse参数实际上为Mouse组件的state，因为这个函数是在Mouse组件的render()中传参调用的
	}
}

Note: It is not render propsnecessary to use the rendername of the mode prop. You can name it whatever you want prop, it's just a received 返回React元素的函数one prop.

返回React元素的函数In fact, the view is determined by the input from the parent component , and the life cycle function Mousein the component render()just calls the propfunction passed in, and the function returns the view

Use children prop instead of render prop

You can also use the combination mode to achieve code reuse between components, which is similar to Slotthe concept in Vue

import React from 'react'
class Mouse extends React.Component {
    
    
	// 省略操作方法
	render(){
    
    
		return this.props.children(this.state)
	}
}
//根组件
export default class App extends React.Component {
    
    
	render(){
    
    
		<Mouse>
			{
    
     mouse => (
				<div>当前鼠标位置 {
    
    mouse.x} {
    
    mouse.y}<div>
			)}
		</Mouse>
	}
}

Since this technique requires passing a function to the component, it is recommended to childrentype check the

import PropTypes from 'prop-types'
Mouse.propTypes = {
    
    
	children: PropTypes.func.isRequired
}

Use Render props with React.PureComponent

Notice

If the function renderis created in the method, then render propusingReact.PureComponent

Because render()a new function is created every time it is called for rendering, this will cause shallow comparisons to propsalways prevProps === nextPropsbefalse

class Mouse extends React.PureComponent {
    
    
  // 与上面相同的代码......
}

class MouseTracker extends React.Component {
    
    
  render() {
    
    
    return (
      <div>
        <Mouse render={
    
    mouse => (
          <Cat mouse={
    
    mouse} />
        )}/>
      </div>
    );
  }
}

In this example, since Mousethe component's render proptransported function is render()defined in , this will cause MouseTrackera new function to be generated each time Mousethe component is rendered render prop, thus negating React.PureComponentthe effect of inheriting from

solution

To solve this problem, you can define an instance method to passrender prop

class MouseTracker extends React.Component {
    
    
  // 定义为实例方法，`this.renderTheCat`始终
  // 当我们在渲染中使用它时，它指的是相同的函数
  renderTheCat(mouse) {
    
    
    return <Cat mouse={
    
    mouse} />;
  }

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

React study notes - Render Props