第18节——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 可以访问组件的状态,从而在不同的场景下呈现不同的内容

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值