React Render Props 模式
为什么80%的码农都做不了架构师?>>>
概述
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
如果喜欢请关注
谢谢阅读
转载于:https://my.oschina.net/itudou/blog/1793643
React Render Props 模式相关推荐
- React Render props
首先打个广告,系列文章: 古老的React mixins HOC(高阶组件) render props React Hooks 下面进入正题: 什么是Render props A render pro ...
- React组件常用设计模式之Render Props
自己在总结最近半年的React开发最佳实践时,提到了Render Props,想好好写写,但感觉篇幅又太长,所以就有了此文.愿你看完,能有所收获,如果有什么不足或错误之处还请指正.文中所提到的所有代码 ...
- web前端高级React - React从入门到进阶之Render Props
第二部分:React进阶 系列文章目录 第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介 第三章:React从入门到进阶之元素渲染 第四章:React从入门到 ...
- React拾遗:Render Props及其使用场景
什么是 Render Props? 新的context api使用了render props: <ThemeContext.Consumer>{theme => (<butto ...
- TypeScript + React 学习render props
###前言 一直想学学TypeScript,尝试尝试带类型的js怎么写,有啥优点.正好这两天有时间结合着react写写小例子. 搭建环境 不想折腾webpack来自己配ts+react的环境就用typ ...
- React 中使用 render props
React 中使用 render props 前言 正文 結語 前言 這篇也是紀錄了關於學習 react 的過程,起因是因為開始學習 hooks,但是發現好像有些坑比較重要但卻被我跳過了,像是 ren ...
- React高级特性之Render Props
render prop是一个技术概念.它指的是使用值为function类型的prop来实现React component之间的代码共享. 如果一个组件有一个render属性,并且这个render属性的 ...
- React - children props 与 render props
React - children props 与 render props 一. children props 1. 函数组件形式 2. 类组件形式 二. render props 1. 函数组件形式 ...
- react render没更新_web前端教程分享React学习笔记(一)
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
最新文章
- PyTorch 系列教程之空间变换器网络
- MyBatis之简单了解Plugin
- 自主学习 提问的智慧——学习中遇到难题怎么破?
- Webpack不生成index.html
- sqlserver全文索引问题
- 牛客网--密码验证合格程序(Java)
- 荷兰籍空乘服务中国春运:对春节有着别样的感受
- Pandas出现KeyError及其分析解决
- java datasource mysql_java – 添加新的Datasource(mysql)wildfly
- perl中的uc与lc函数
- Python学习——collections系列
- mysql 主从同步 错误_MySQL 主从同步错误(error)解决
- JSP自定义select标签 字典表数据
- VBlog 静态页面 动态博客
- windows环境下布置定时任务
- 浙江旅行新地标!图卷9号与法国著名建筑大师安东尼·贝叙共同打造
- STP配置 HSRP配置 端口追踪
- 前端使用prettier格式化规范
- 养老保险和住房公积金如何转移
- 每天听的一首歌---奔跑