React 之 render props

一、概念

Render props 是一种在 React 中实现代码复用的方法。它允许你在一个组件中定义逻辑，并在另一个组件中渲染这个逻辑。这个技术通过一个特殊的 props，称为 “render props”，来实现复用。

使用 render props 的基本方法是，在一个组件中定义逻辑，然后在另一个组件中通过 render props 属性渲染这个逻辑。这个 render props 属性的值是一个函数，该函数的作用是渲染这个逻辑。

这种技术与高阶组件相似，但是它更加灵活，因为它可以在组件内部灵活地控制如何渲染逻辑。同时，它也比高阶组件简单，因为它不需要创建一个新的组件，而只需要通过一个函数渲染组件。

总的来说，render props 是一种灵活、高效且易于理解的代码复用技术，可以在 React 中实现更好的代码复用

二、例子

封装一个延迟三秒后渲染一个用户信息列表的render props组件

import React from "react";

export default class MyComponent extends React.Component {
  state = {
    data: [],
  };
  componentDidMount() {
    // 初始化后三秒 塞入数据
    setTimeout(() => {
      this.setState({
        data: [
          {
            name: "张三",
            age: 18
          },
          {
            name: "李四",
            age: 20
          },
          {
            name: "王五",
            age: 22
          },
        ]
      })
    }, 3000)
  }
  render() {
    /**
     * 接收父组件的传过来的render属性并调用
     */
    return this.props.render(this.state.data);
  }
}

使用render props

export default class App extends React.Component {
  render() {
    return (
      <MyComponent
        /**
         * render属性是一个方法
         * 并且要给这个方法写返回值，
         * 返回值的结构就会在子组件里渲染
         */
        render={(data) => (
          <ul>
            {data.map((item) => (
              <li key={item.id}>
                {item.name} -- {item.age}
              </li>
            ))}
          </ul>
        )}
      />
    );
  }
}

三、使用场景

1、实现代码复用：如果多个组件需要实现相似的逻辑，可以使用 render props 实现代码复用。

2、动态渲染内容：通过 render props，可以在不同的场景下动态渲染内容，达到更好的可定制性。

3、访问组件的状态：使用 render props 可以访问组件的状态，从而在不同的场景下呈现不同的内容