React高阶用法之Render Props

最新推荐文章于 2023-08-17 22:49:14 发布

微信公众号：晨曦大前端

最新推荐文章于 2023-08-17 22:49:14 发布

阅读量904

点赞数

分类专栏：前端 react Vue 文章标签： vue.js node.js reactjs 前端 webpack

本文链接：https://blog.csdn.net/CHENXI_0/article/details/108300521

版权

本文介绍了React中的Render Props技术，通过实例解析其原理和优势。首先解释了Render Props作为数据传递方式的特点，然后通过一个横向滚动的ScrollView组件案例，展示了如何利用Render Props实现组件间的解耦和提高代码复用性。通过改造组件，将进度指示器功能内化，使得业务代码更为简洁。

摘要由CSDN通过智能技术生成

最近会陆续分享我在使用React的过程总结的一些比较高阶的使用方法，这些方法可以提升代码的可复用性，也让代码看起来更加简洁明晰。今天要讲的是Render Props，很多人可能都知道react的这个特性，但在实际项目中不知道如何用起来。刚好这两天的一个项目中用到了它，所以借机分享一下。

什么是Render Props

“render prop”是指一种在React组件之间使用值为函数的prop共享代码的技术

这个概念听上去有点拗口，我们拆开了看它。

首先它本质上是一个prop，是用来父子组件之间传递数据用的
其次这个prop传递的值是一个函数
最后它取名render props，是因为它通常是用来render(渲染)某个元素或组件

比如官网给出的示例：

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

我们给这个子组件传递了一个叫 render 的prop，这个prop的值是一个函数，它返回了一个 h1 元素。然后我们可以假装实现一下这个组件：

class DataProvider extends React.Component {
   
    state = {
   
        data: {
   
            target: 'World'
        }
    }
    render() {
   
        return this.props.render(this.state)
    }
}