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的DOM模型

    一.网页中的dom模型框架 1.dom中的3中节点:元素节点.文本节点.属性节点 a.元素节点:html中的各种标签就是各个元素节点,元素节点可以包含其他元素,只有html根节点例外. b.文本节点: ...

  2. 将对象a的属性赋值给对象b

    BeanUtils.copyProperties(a,b); 将a的属性赋值给b(ab的共同属性)

  3. 不实例化一个 class 的时候使用它的property

    class A: @property def name(self): " print(A.name) # <property object at 0x10d54cf98> cla ...

  4. 自己编写并发布一个Vue组件

    自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建p ...

  5. HTTP cookies 详解

    http://blog.csdn.net/lijing198997/article/details/9378047

  6. 10.29 工作笔记 ndk编译C++,提示找不到头文件(ndk-build error: string: No such file or directory)

    ndk编译C++.提示找不到头文件(ndk-build error: string: No such file or directory) 被这个问题弄得愁眉苦脸啊.心想为啥一个string都找不到呢 ...

  7. 转一篇关于vuex简单理解的文章

    学习vuex半天摸不着头脑无意间发现了这篇文章 对vuex做了一个简单的阐述比较有助于我的理解 现在分享出来希望能给一些朋友一点帮助  这个是原文地址 http://www.ituring.com.c ...

  8. Innosetup

    卸载的同时删除日志,卸载的时候判断程序是否正在运行,regsvr32 1.卸载程序的时候如何判断程序是否正在运行 http://bbs.csdn.net/topics/370097914 2.强制删除 ...

  9. Xfce4里添加登录后程序自动运行

    Xfce4里添加登录后程序自动运行 (注意该方法在登录桌面环境后才会自动运行程序. 在XUbuntu下测试过, Ubuntu下应该是类似的) 方法1: 找到这个东西, 自动添加一下 方法2: 在 .c ...

  10. 安卓开发--HttpDemo02

    package com.cnn.httpdemo02; import android.app.Activity; import android.os.Bundle; import android.vi ...