Functions created with mapPropsStream canned be composed together to build up powerful streams. Bring in the compose helper from Recompose then simply list your functions in the order you want the props to push through.

In the example, we compose three things together, in order to create a powerful component.

1. We map user's click event to on increate and on decrease event streams.

2. We foward those count props to next stream 'loading', it will call ajax api to get Star Wars heros.

3. Last we create a typewriter to get a typing effect,

const CounterWithPersonLoader = compose(
count,
load,
typewriter
)(Counter)

[Recompose] Compose Streams of React Props with Recompose’s compose and RxJS的更多相关文章

  1. [Recompose] Lock Props using Recompose -- withProps

    Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden. ...

  2. [Recompose] Make Reusable React Props Streams with Lenses

    If you hard-code a stream of props to target a specific prop, it becomes impossible to reuse that st ...

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

  4. [Recompose] Transform Props using Recompose --mapProps

    Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its pr ...

  5. react Props 验证 propTypes,

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  6. React——props的使用以及propTypes

    组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素 一.props的使用 1.一些组件并不需要知道自己的ch ...

  7. react~props和state的介绍与使用

    props是参数的传递,从上层模块向下层模块进行拿传递:而state是提局域变量,一般在本模块内使用,props是不能改变的,而state可以通过setState去修改自身的值. props Reac ...

  8. react props与render成员函数

    props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标 ...

  9. React props

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

随机推荐

  1. gcd的queue与group

    queue相当于事件处理机制里的事件池:只是任务池: 线程作为事件处理的实施者,由线程池从任务池中获取任务进行调度派发: group相当与工作组,按照任务的相关性对任务进行组织.

  2. SpringBoot学习笔记(10)-----SpringBoot中使用Redis/Mongodb和缓存Ehcache缓存和redis缓存

    1. 使用Redis 在使用redis之前,首先要保证安装或有redis的服务器,接下就是引入redis依赖. pom.xml文件如下 <dependency> <groupId&g ...

  3. js Date() 时间函数处理 关于 toLocaleDateString()

    toLocaleDateString()方法的真正含义为「根据本地时间把Date对象的日期部分转换为字符串」,这意味着:在不同的浏览器或者服务器中,我们可能得到不同的字符串. 例如,将 Chrome ...

  4. linux SVN服务器创建版本库

    1.安装svn服务 # yuminstall subversion 2.新建一个目录用于存储SVN所有文件    # mkdir /home/svn 3.在上面创建的文件夹中为项目 project_1 ...

  5. MySQL锁定状态查看命令

    1 show processlist; SHOW PROCESSLIST显示哪些线程正在运行.您也可以使用mysqladmin processlist语句得到此信息.如果您有SUPER权限,您可以看到 ...

  6. Qt之QToolButton

    简述 QToolButton类提供了用于命令或选项可以快速访问的按钮,通常可以用在QToolBar里面. 工具按钮和普通的命令按钮不同,通常不显示文本,而显示图标. 简述 详细描述 常用接口 更多参考 ...

  7. TextView超链接

    这里面涉及两个知识点--超链接和跳转.以下进行逐一解说: 1.实现超链接: 1.1形成超链接文本 public static SpannableString getUserlink(String us ...

  8. legend---九、js的核心是什么

    legend---九.js的核心是什么 一.总结 一句话总结:js里面一切东西都是对象,包括数组,字符串,所以你就知道数组啊,对象啊,的很多东西怎么用了 1.js如何合并两个数组? concat,ar ...

  9. Thinkphp5.0怎么加载css和js

    Thinkphp5.0怎么加载css和js 问题 http://localhost/手册上的那个{load href="/static/css/style.css" /} 读取不到 ...

  10. [COI2007] [luogu P1823] Patrik 音乐会的等待 解题报告 (单调栈)

    题目链接:https://www.luogu.org/problemnew/show/P1823 题目: N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人. ...