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的更多相关文章

  1. React Render Props 模式

    概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样 ...

  2. React 深入系列3:Props 和 State

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...

  3. [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 ...

  4. React中的state与props的再理解

    props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的, ...

  5. 如何理解react中的super() super(props)

    class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程&quo ...

  6. React组件的state和props

    React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...

  7. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  8. React报错之Parameter 'props' implicitly has an 'any' type

    正文从这开始~ 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an ...

  9. [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 ...

随机推荐

  1. [洛谷P1750]KC喝咖啡

    题目大意:给你n个物品,每个物品有一个价值$v_i$和一个时间$t_i$,要你取m个物品,使得他们的美味度($\frac{\sum v_i}{\sum t_i}$)最大,求这个美味度. 解题思路:由于 ...

  2. 转载git的使用

    版权声明:本文为博主原创文章,未经博主允许不得转载.转载请注明原地址 转载请注明出处!谢谢 1.安装Git:Ctrl + Alt + T使用终端:使用命令 [plain] view plain cop ...

  3. Mysql导入Sql文件时报Error Code: 2013 - Lost connection to MySQL server during query

    MySql 有时我们导入sql文件,文件过大,导致Error Code: 2013 - Lost connection to MySQL server during query这种错误 执行以下: S ...

  4. JAVA关于byte数组与String转换的问题

    1 public class ToString{ public static void main(String[] args){ String aa = "hellow"; byt ...

  5. dll签名两种方法

    以下两种签名方法,都是对csp.dll签名,都不是CA颁发的,且效果不同, 一:通过自建证书签名 下载windows sdk,成功安装后,包括makecert.exe, cert2spc.exe, p ...

  6. Ubuntu设置显示桌面快捷键

    Ubuntu设置显示桌面快捷键 直接在系统设置中没有效果, 学习了:http://www.cnblogs.com/pluse/p/5286585.html 需要进行安装compizconfig,然后在 ...

  7. hibernate 或jpa 中使用 AliasToBeanResultTransformer 自定义类型转换ResultTransformer 下划线转驼峰

    jpa中使用 sql查询时,返回结果直接转为实体bean的实现, 需要自定义一个ResultTransformer,如下, import java.util.Arrays; import org.ap ...

  8. Android 提示: The connection to adb is down, and a severe error has occured.

    今天早上打开Eclipse,一直提示 The connection to adb is down, and a severe error has occured,无法执行程序.重新启动Eclipse. ...

  9. css3模糊图片

    image的css样式 filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -ms-filter: blu ...

  10. extjs Combox 调用数据

    1方法一 从 json获取 var typeStore = new Ext.data.Store({                 proxy : new Ext.data.HttpProxy({u ...