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. vue非空校验

    效果图 实现代码 //页面html <div> <ul class="listinfo"> <li> <span class=" ...

  2. linux下mysql 查看默认端口号与修改端口号方法

    一.查看默认端口号 1.登录mysql [root@localhost ~]# mysql -uroot -pEnter password: 输入数据库密码: 2.使用show global vari ...

  3. linux查看系统cpu信息

    # 查看物理CPU个数 cat /proc/cpuinfo| grep "physical id"| sort| uniq| wc -l # 查看每个物理CPU中core的个数(即 ...

  4. du -sh*查看当前目录下的文件夹大小

    du -sh*查看当前目录下的文件夹大小   u 命令    用途    概述磁盘使用.    语法  du [ -a | -s ] [ -k ] [ -m ] [ -g ][ -l ] [ -r ] ...

  5. [HDU5686]2016"百度之星" - 资格赛 Problem B

    题目大意:给你n,规定一个串中相邻的两个1可以合并为一个2(别的不行),让你求长度为n的全1串最多能变成多少种不同的串. 解题思路:我们先来找一波规律,发现n=1,2,3,4,5时答案分别为1,2,3 ...

  6. 关于JWT(Json Web Token)的思考及使用心得

    什么是JWT? JWT(Json Web Token)是一个开放的数据交换验证标准rfc7519(php 后端实现JWT认证方法一般用来做轻量级的API鉴权.由于许多API接口设计是遵循无状态的(比如 ...

  7. Qt之QAbstractButton

    简述 QAbstractButton类是按钮部件的抽象基类,提供了按钮所共有的功能. QAbstractButton类实现了一个抽象按钮,并且让它的子类来指定如何处理用户的动作,并指定如何绘制按钮. ...

  8. JavaScript编程随笔

    尽管说用JS非常多年了,可是却一直停留在肤浅的阶段,对JS的机制原理依旧是一知半解,比如:闭包.尽管能说出一二.却不能说出三四,确实羞愧.近期恶补一番.并将比較与大家分享,希望对大家有些帮助. 闭包 ...

  9. USACO Ski Course Design解析和C语言实现

    题目大意: John农场有N(1=<N<=1000)小丘陵(山),它们高度的范围从0 到 100 但仅仅有当最大的高度差不大于17时.才干够避税.John对它们进行改造,从高的丘陵上取土放 ...

  10. thinkphp5的Illegal string offset 'id'错误

    thinkphp5的Illegal string offset 'id'错误 问题 解答 数组同名了,一个html页面传进来两个cateres的数组,所以在找id的时候不知道找这两个里面的哪一个 第一 ...