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. RocketMQ学习笔记(8)----RocketMQ的Producer API简介

    在RocketMQ中提供了三种发送消息的模式: 1.NormalProducer(普通) 2.OrderProducer(顺序) 3.TransactionProducer(事务) 下面来介绍一下pr ...

  2. CDR X6低价还能持续多久?官方回应18年元旦过后要涨价

    目前,CDR X6特价活动,从双十二的到18年的元旦,火热程度一直屡刷新高,究其原因,其实不是大家不需要,只是这个平面设计软件价格实在太高(CDR X8/8200:CDR 2017/9500一套),尤 ...

  3. 系统出现0x0000006B蓝屏修复,系统文件损坏 bootcat.cache、driver.stl

    系统蓝屏,无论如何都不能进入系统,所以你需要一个U盘启动器,就是能绕过电脑的系统进入电脑,可以用U盘做一个U盘启动器,或者其他方法均可以,只要能进入到你的电脑访问C盘即可 2 下载链接内的文件解压后放 ...

  4. 总结Ajax的一些细节

    Ajax的总结 主要从Ajax是什么?可以用来干什么?基本要素,优缺点,执行过程,跨域的解决方案等几方面来解释. Ajax是什么? Ajax主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷 ...

  5. [备忘]js-xlsx 操作 Excel 插件

    github地址:https://github.com/SheetJS/js-xlsx oss地址:http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js

  6. java 导出百万数据到excel

    @RequestMapping("export") public void write(HttpServletRequest request,HttpServletResponse ...

  7. yum-config-manager --add-repo=

    [root@server0 yum.repos.d]# yum-config-manager --add-repo=ftp://192.168.31.121/centos7u4Loaded plugi ...

  8. JavaScript函数写法整理

    1.普通函数定义的两种写法 function hello(){ console.log("hello!"); } var hello = function(){ console.l ...

  9. MooseFS源代码分析(二)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  10. 错误处理:java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addFilter

    部署项目时,启动Tomcat一直出错:java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addFilter SEVE ...