[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 same example and simple refactoring the Togglecomponent which handles the render prop.
const ToggleStream = componentFromStream(props$ => {
const {
handler: toggle,
stream: toggle$
} = createEventHandler()
const on$ = Observable.merge(
toggle$,
Observable.interval(1000)
)
.startWith(true)
.scan(bool => !bool)
return props$.combineLatest(on$, (props, on) =>
props.render({
on,
toggle
})
)
})
[Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose的更多相关文章
- React Render Props 模式
概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样 ...
- React 深入系列3:Props 和 State
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...
- [React] Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3
getDerivedStateFromProps is lifecycle hook introduced with React 16.3 and intended as a replacement ...
- React中的state与props的再理解
props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的, ...
- 如何理解react中的super() super(props)
class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程&quo ...
- React组件的state和props
React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React报错之Parameter 'props' implicitly has an 'any' type
正文从这开始~ 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an ...
- [Recompose] Stream a React Component from an Ajax Request with RxJS
Loading data using RxJS is simple using Observable.ajax. This lesson shows you how to take the ajax ...
随机推荐
- NetworkX-根据权重画图
load_data = sio.loadmat(load_path) #阈值处理 mat=np.array(load_data['R']) mat[mat<0]=0 mat[mat<0.4 ...
- Dapper丶DapperExtention,以及AbpDapper之间的关系,
在一些开发上,由于系统的迭代上面,不能立即使用ABP框架一些框架,框架是死的,框架是死的,框架中的一些东西很值得我们学习.例如DDD架构设计,Dto数据传输对象,以及AutoMapper.仓储,依赖注 ...
- springMVC小项目实例
一.什么是 Spring MVC Spring MVC 属于 SpringFrameWork 的后续产品,已经融合在 Spring Web Flow 里面,是一个强大灵活的 Web 框架.Spring ...
- BZOJ2161: 布娃娃 整体二分
Code: #include <cstdio> #include <algorithm> #include <cstring> #include <vecto ...
- BZOJ 3790 神奇项链(回文自动机+线段树优化DP)
我们预处理出来以i为结尾的最长回文后缀(回文自动机的构建过程中就可以求出)然后就是一个区间覆盖,因为我懒得写贪心,就写了线段树优化的DP. #include<iostream> #incl ...
- PL SQL Developer使用总结
如果OS为windows 7 64位系统,Oracle版本为 Oracle 11g 64 安装PL SQL Developer 请参考 http://myskynet.blog.51cto.co ...
- ie11 .pac代理脚本无法使用的问题
参考: http://blogs.msdn.com/b/ieinternals/archive/2013/10/11/web-proxy-configuration-and-ie11-changes. ...
- 在oracle中采用connect by prior来实现递归查询
注明:该文章为引用别人的文章,链接为:http://blog.csdn.net/apicescn/article/details/1510922 , 记录下来只是为了方便查看 原文: connect ...
- Hive-jdbc获取sessionId
在HiveStatement中有一个sessHandle: public class HiveStatement implements java.sql.Statement { ... private ...
- Node.js使用cnpm
npm是Node.js中维护第三方库.模块的工具,可是国外的速度非常悲剧,这里有一个中国的源cnpm. http://cnpmjs.org/ 须要在命令行中执行 npm install -g cnpm ...