React Render Props 模式
概述
Render Props
模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样的功能。
React 组件数据传递
React
中我们可以给一个组件传递一些props
并且在组件内部展示,同样的我们也可以传递一些组件同样也是行得通的,一起看一个例子
1. 组件普通数据传递
我们可以通过组件传递一些字符串数据,并且在组件内部渲染
下面的代码很平常,我们绝大多数代码都是这样。
const Foo = ({ title }) => (
<div>
<p>{title}</p>
</div>
);
class App extends React.Component {
render() {
return (
<div>
<h2>这是一个示例组件</h2>
<Foo title="大家好,我是土豆" />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'))
2. 组件上传递组件
更进一步,我们可以在组件上传递普通的HTML 标签
和React 组件
达到复用的目的
// https://codepen.io/tudou/full/OvdrPW
const Bar = () => (<p>我是Bar组件 :)</p>);
const Foo = ({ title, component }) => (
<div>
<p>{title}</p>
{component()}
</div>
);
class App extends React.Component {
render() {
return (
<div>
<h2>这是一个示例组件</h2>
<Foo title={<p>大家好,我是土豆</p>} component={() => <Bar /> } />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'))
在上面的例子中传递普通的HTML 标签
对我们复用组件没有任何帮助,重点可以看传递component
这个参数,它传递给Foo
组件一个函数这个函数返回的是一个Bar 组件
,我们会在Foo 组件
中调用并且显示component
函数中的组件。我们再来写一个小的DEMO进行验证。
3. 一个纯粹的Render Props
例子
// https://codepen.io/tudou/full/dmawvY
const Bar = ({ title }) => (<p>{title}</p>);
class Foo extends React.Component {
constructor(props) {
super(props);
this.state = { title: '我是一个state的属性' };
}
render() {
const { render } = this.props;
const { title } = this.state;
return (
<div>
{render(title)}
</div>
)
}
}
class App extends React.Component {
render() {
return (
<div>
<h2>这是一个示例组件</h2>
<Foo render={(title) => <Bar title={title} />} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'))
在上面的例子中,给Foo 组件
传递了一个render
参数它是一个函数这个函数返回一个Bar
组件,这个函数接受一个参数title
他来自于Foo 组件
调用时传递并且我们又将title 属性
传递给了Bar 组件
。经过上述的调用过程我们的Bar 组件
就可以共享到Foo 组件内部的
state 属性`。
4. 通过children
传递
这个demo略微不同于上面通过props
传递,而它是通过组件的children
传递一个函数给Foo 组件
// https://codepen.io/tudou/full/WzPPeL
const Bar = ({ title }) => (<p>{title}</p>);
class Foo extends React.Component {
constructor(props) {
super(props);
this.state = { title: '我是一个state的属性' };
}
render() {
const { children } = this.props;
const { title } = this.state;
return (
<div>
{children(title)}
</div>
)
}
}
class App extends React.Component {
render() {
return (
<div>
<h2>这是一个示例组件</h2>
<Foo>
{(title) => (
<Bar title={title} />
)}
</Foo>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'))
观察可发现只是写法略微有些变法,我们将要传递的数据放到的组件的children
。实际上并无不同之处(都是传递一个函数)
<Foo>
{(title) => (
<Bar title={title} />
)}
</Foo>
注意事项
请注意当我们的Foo 组件
继承于React.PureComponent
的时候,我们需要避免下面这样的写法。不然我们的性能优化将付之东流。
render() {
return (
<div>
<h2>这是一个示例组件</h2>
<Foo render={(title) => <Bar title={title} />} />
</div>
);
}
如果你在render
创建一个函数,在每次渲染的时候render prop
将会是一个新的值,那么每次将会重新渲染Bar
。
正确的做法应该是在组件内部创建一个函数用于显示组件
const Bar = ({ title }) => (<p>{title}</p>);
class Foo extends React.Component {
constructor(props) {
super(props);
this.state = { title: '我是一个state的属性' };
}
render() {
const { render } = this.props;
const { title } = this.state;
return (
<div>
{render(title)}
</div>
)
}
}
class App extends React.Component {
// 单独创建一个渲染函数
renderFoo(title) {
return <Bar title={title} />;
}
render() {
return (
<div>
<h2>这是一个示例组件</h2>
<Foo render={this.renderFoo} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'))
总结
学习了解Render Props
渲染模式原理,使用了render
和children
两种不同的渲染方法。
更新详细的官方例子请参考https://reactjs.org/docs/render-props.html
官方例子在线参考 https://codesandbox.io/embed/1075p1yov3
如果喜欢请关注
谢谢阅读
React Render Props 模式的更多相关文章
- React中render Props模式
React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...
- [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose
This lesson takes the concept of render props and migrates it over to streaming props by keeping the ...
- 可复用 React 的 HOC 以及的 Render Props
重复是不可能的,这辈子都不可能写重复的代码 当然,这句话分分钟都要被产品(领导)打脸,真的最后一次改需求,我们烦恼于频繁修改的需求 虽然我们不能改变别人,但我们却可以尝试去做的更好,我们需要抽象,封装 ...
- React Render Callback Pattern(渲染回调模式)
React Render Callback Pattern,渲染回调模式,其实是将this.props.children当做函数来调用. 例如: 要根据user参数确定渲染Loading还是Profi ...
- [React] Use Prop Collections with Render Props
Sometimes you have common use cases that require common props to be applied to certain elements. You ...
- React 之 render props 的理解
1.基本概念 在调用组件时,引入一个函数类型的 prop,这个 prop定义了组件的渲染方式. 2.回调渲染 回顾组件通信的几种方式 父-> 子 props 子-> 父 回调.消息通道 任 ...
- React高阶组件 和 Render Props
高阶组件 本质 本质是函数,将组件作为接收参数,返回一个新的组件.HOC本身不是React API,是一种基于React组合的特而形成的设计模式. 解决的问题(作用) 一句话概括:功能的复用,减少代码 ...
- React 之props属性
React 里有一个非常常用的模式就是对组件做一层抽象.组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现. 可以使用 JSX 展开属性 来合并现有的 props 和其 ...
- React-代码复用(mixin.hoc.render props)
前言 最近在学习React的封装,虽然日常的开发中也有用到HOC或者Render Props,但从继承到组合,静态构建到动态渲染,都是似懂非懂,索性花时间系统性的整理,如有错误,请轻喷~~ 例子 以下 ...
随机推荐
- Windows 远程栈溢出挖掘与利用
缓冲区溢出攻击很容易被攻击者利用,因为 C 和 C++等语言并没有自动检测缓冲区溢出操作,同时程序编写人员在编写代码时也很难始终检查缓冲区是否可能溢出.利用溢出,攻击者可以将期望数据写入漏洞程序内存中 ...
- fscanf_s与scanf_s的宽度参数与缓冲区参数分析
fscanf_s函数 在文件操作中经常会用到fscanf这个函数,但是在VC和VS中会有警告 意思是编译器觉得fscanf不安全,叫你考虑用一下fscanf_s这个函数来代替fscanf,fscanf ...
- Vue 父组件ajax异步更新数据,子组件props获取不到
转载 https://blog.csdn.net/d295968572/article/details/80810349 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mo ...
- Jmeter 结构、原理介绍 Jmeter结构、原理介绍(1)
一.Jmeter 简介 1.是基于java语言的开源的应用软件. 2.可以进行接口测试.性能测试.接口及性能的自动化测试. 二.Jmeter体系结构 元件:可以理解为每一个菜单.如THHP请求.响应断 ...
- Java正则表达式API详解
1. Pattern类 public class PatternExample { /** * public static String quote(String s) * 返回指定字符串的字面值模式 ...
- Go语言运算符
目录 算术运算符 注意事项 赋值运算符 逻辑运算符 短路与和短路或 关系运算符 位运算符 其他运算符 运算符优先级 运算符用于在程序运行时执行数学或逻辑运算. Go 语言内置的运算符有:算术运算符.赋 ...
- iOS开发笔记-根据frame大小动态调整fontSize的自适应文本及圆形进度条控件的实现
最近同样是新App,设计稿里出现一种圆形进度条的设计,如下: 想了想,圆形进度条实现起来不难,但是其中显示百分比的文本确需要自适应,虽然可以使用时自己设定文本字体的大小,但是这样显得很麻烦,也很low ...
- Python模块——configparser
configparser模块 该模块适用于配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键=值) 创建文件 import configp ...
- 如何将页面上的数据导入excel中
网上关于页面数据导入excel的文章很多,但是大部分都是关于 ActiveXObject 对象,可是ActiveXObject 对象是只支持IE的,可我连IE11也测试了,还是无法识别,又查到消息,好 ...
- .net core Jenkins持续集成Linux、Docker、K8S
jenkins插件 系统管理 -> 管理插件,安装如下插件. #如果搜索不到去掉Plugin在搜索 GitLab Plugin Gitlab Hook Plugin #使用Gitlab账号做用户 ...