Render props是什么

小编给大家分享一下Render props是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Render propsRrender prop 是指一种在 React组件之间使用一个值为函数的 prop共享代码的简单技术, 和 HOC 类似， 都是组件间的逻辑复用问题。更具体地说，Render prop 是一个用于告知组件需要渲染什么内容的函数。下面看一下简单的例子：以下组件跟踪 Web 应用程序中的鼠标位置：Thecurrentmousepositionis({this.state.x},{this.state.y})当光标在屏幕上移动时，组件显示其（x，y）坐标。现在的问题是：我们如何在另一个组件中复用这个行为？换个说法，若另一个组件需要知道鼠标位置，我们能否封装这一行为，以便轻松地与其免费云主机域名他组件共享它 ？？假设产品想要这样一个功能： 在屏幕上呈现一张在屏幕上追逐鼠标的猫的图片。我们或许会使用

classCatextendsReact.Component{render(){constmouse=this.props.mouse;return();}}

这个需求如此简单，你可能就直接修改Mouse组件了：

classMouseextendsReact.Component{state={x:0,y:0};handleMouseMove=(event)=>{this.setState({x:event.clientX,y:event.clientY});}render(){return(
);}}

巴适～ 简单粗暴， 一分钟完成任务。

可是，如果下次产品再要想加条狗呢？

以上的例子，虽然可以完成了猫追鼠标的需求，还没有达到以可复用的方式真正封装行为的目标。

当我们想要鼠标位置用于不同的用例时，我们必须创建一个新的组件，专门为该用例呈现一些东西.

这也是 render prop 的来历：

我们可以提供一个带有函数 prop 的组件，它能够动态决定什么需要渲染的，而不是将 硬编码到 组件里.

修改一下上面的代码：

classCatextendsReact.Component{render(){constmouse=this.props.mouse;return();}}classMouseextendsReact.Component{state={x:0,y:0};handleMouseMove=(event)=>{this.setState({x:event.clientX,y:event.clientY});}render(){return(
{this.props.render(this.state)}
);}}classMouseTrackerextendsReact.Component{render(){return(
移动鼠标!
()}/>

这个需求如此简单，你可能就直接修改Mouse组件了：巴适～ 简单粗暴， 一分钟完成任务。可是，如果下次产品再要想加条狗呢？以上的例子，虽然可以完成了猫追鼠标的需求，还没有达到以可复用的方式真正封装行为的目标。当我们想要鼠标位置用于不同的用例时，我们必须创建一个新的组件，专门为该用例呈现一些东西.这也是 render prop 的来历：我们可以提供一个带有函数 prop 的组件，它能够动态决定什么需要渲染的，而不是将 硬编码到 组件里.修改一下上面的代码：{this.props.render(this.state)}提供了一个render 方法，让动态决定什么需要渲染。事实上，render prop 是因为模式才被称为 render prop ，不一定要用名为 render 的 prop 来使用这种模式。任何被用于告知组件需要渲染什么内容的函数 prop, 在技术上都可以被称为 "render prop".另外，关于 render prop 一个有趣的事情是你可以使用带有 render prop 的常规组件来实现大多数高阶组件 (HOC)。例如，如果你更喜欢使用 withMouse HOC 而不是 组件，你可以使用带有 render prop 的常规 轻松创建一个：也是非常的简洁清晰。有一点需要注意的是， 如果你在定义的render函数里创建函数， 使用 render prop 会抵消使用 React.PureComponent 带来的优势。因为浅比较 props 的时候总会得到 false，并且在这种情况下每一个 render 对于 render prop 将会生成一个新的值。在这样例子中，每次 渲染，它会生成一个新的函数作为 的 prop，因而在同时也抵消了继承自 React.PureComponent 的 组件的效果.为了绕过这一问题，有时你可以定义一个 prop 作为实例方法，类似这样：以上是“Render props是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注百云主机行业资讯频道！

相关推荐: react 16.8版本新特性及对react开发的影响是什么

本篇内容主要讲解“react16.8版本新特性及对react开发的影响是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react16.8版本新特性及对react开发的影响是什么”吧!Facebook团队对社区上…