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. Js中遇到的坑点汇总

    一.Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug 解决思路: 1.去掉overflow属性 2. Android 手机下, input 或 textarea 元素聚焦时, 主动 ...

  2. vue 事件参数传$event打印当前组件

    <template> <div class="hello"> <button v-on:click.once="getinfo($event ...

  3. JavaScript设计模式(biaoyansu)(2)

    单例模式实例 (创建类模式): let elBalance = document.getElementById('balance') function init () { var a = new Di ...

  4. 紫书 例题 11-13 UVa 10735(混合图的欧拉回路)(最大流)

    这道题写了两个多小时-- 首先讲一下怎么建模 我们的目的是让所有点的出度等于入度 那么我们可以把点分为两部分, 一部分出度大于入度, 一部分入度大于出度 那么显然, 按照书里的思路,将边方向后,就相当 ...

  5. 紫书 习题8-6 UVa 1611 (构造法)

    这道题和例题8-1相当的像. 例题8-1https://blog.csdn.net/qq_34416123/article/details/80112017 一开始我还以为用归并的思想, 用交换把局部 ...

  6. 2015 Multi-University Training Contest 1 hdu 5290 Bombing plan

    Bombing plan Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)To ...

  7. OCUI界面设计:滚动视图与分页控件初探

    滚动视图(UIScrollView) 简单介绍 1.UIScrollView滚动视图能够排列并显示超出自身显示范围的内容. 2.UIScrollView内部整合了多种手势来达到丰富的界面展示效果. 3 ...

  8. POJ--1966--Cable TV Network【无向图顶点连通度】

    链接:http://poj.org/problem?id=1966 题意:一个无向图,n个点,m条边,求此图的顶点连通度. 思路:顶点连通度,即最小割点集里的割点数目.一般求无向图顶点连通度的方法是转 ...

  9. zoj 3820 Building Fire Stations (二分+树的直径)

    Building Fire Stations Time Limit: 5 Seconds      Memory Limit: 131072 KB      Special Judge Marjar ...

  10. angularjs 标签指令

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...