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. 3ds Max修改桌面快捷方式为中文语言

    通过上篇教程的学习,我们已经会切换3ds Max 2018的界面语言了,相关内容可参阅3ds Max如何设置中文界面.但是如果每次都要从开始菜单进行操作,岂不麻烦?简单一点,可以在桌面添加3ds Ma ...

  2. 优动漫PAINT简简单单绘画绣球花

    本文分享使用优动漫PAINT简简单单绘画绣球花教程: 相关资讯还可以关注http://www.dongmansoft.com 最后告诉你绣球花的花语,还是很和谐美好的呢! 绣球花没有茉莉花的芳香四溢, ...

  3. URL正则

    现有需求 表单填写域名只能填写 baseURL 或者 baseURL+端口 不带协议 否则为不合法 String url1 = ".com:90"; String url2 = & ...

  4. django 获得请求头

    django 获得到的请求头封装在 request 的 META 中,为一个 dict 以下选自官方文档: https://docs.djangoproject.com/zh-hans/2.0/ref ...

  5. luogu P4062 [Code+#1]Yazid 的新生舞会(线段树+套路)

    今天原来是平安夜啊 感觉这题是道好题. 一个套路枚举权值\(x\),把权值等于\(x\)的设为1,不等于的设为-1,然后问题转化为多少个区间权值和大于. 发现并不是很好做,还有一个套路,用前缀和查分来 ...

  6. codeforces 914 D Bash and a Tough Math Puzzle

    #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> #i ...

  7. eclipse/myeclipse中js/java的自动提示只有4个字符怎么解决

    https://blog.csdn.net/LinBM123/article/details/80450690

  8. win7休眠的开启与关闭方法命令行操作和图文结合的鼠标操作

    win7休眠的开启与关闭方法 从開始菜单中找到"附件→命令提示符",手工输入例如以下命令:powercfg -a.从这里能够清楚的看到,计算机是支持休眠的.显示"尚未启用 ...

  9. 里根上台时国债只占GDP的30%

    学里根是刻舟求剑,关键是钱从哪来 5  里根主要靠借钱,这是冷战红利,美国打完二战国债占了GDP的120%,然后总量就没怎么增加,但战后GDP快速增长,结果国债占GDP的比例连续下降,打越战登月石油危 ...

  10. angularjs ng-app

    <!DOCTYPE HTML> <html ng-app> //ng-app是初始化指令,整个页面都会被angularjs解析,写在div或者其他标签上表示只是局部的div和标 ...