[Recompose] Compose Streams of React Props with Recompose’s compose and RxJS
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的更多相关文章
- [Recompose] Lock Props using Recompose -- withProps
Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden. ...
- [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 ...
- [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 ...
- [Recompose] Transform Props using Recompose --mapProps
Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its pr ...
- react Props 验证 propTypes,
<body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...
- React——props的使用以及propTypes
组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素 一.props的使用 1.一些组件并不需要知道自己的ch ...
- react~props和state的介绍与使用
props是参数的传递,从上层模块向下层模块进行拿传递:而state是提局域变量,一般在本模块内使用,props是不能改变的,而state可以通过setState去修改自身的值. props Reac ...
- react props与render成员函数
props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标 ...
- React props
class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程&quo ...
随机推荐
- SQL Server查询死锁,杀死进程解决死锁
查询死锁进程和表 SELECT request_session_id AS spid , OBJECT_NAME(resource_associated_entity_id) AS 'table' F ...
- 路飞学城Python-Day13
[2.常用模块-模块的种类和导入方法] 1.什么是模块? 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长.越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分 ...
- 12种CSS BUG解决方法与技巧
一. 针对浏览器的选择器 这些选择器在你需要针对某款浏览器进行css设计时将非常有用. IE6及其更低版本,本文由52CSS.com整理,转载请注明出处! * html {} IE7及其更低版本 *: ...
- linux 安装常用库
在CentOS安装软件的时候,可能缺少一部分支持库,而报错.这里首先安装系统常用的支持库.那么在安装的时候就会减少很多的错误的出现. [root@bogon 桌面]# yum install -y ...
- jQuery第二课 点击弹出一个提示框
选择器允许您对元素组或单个元素进行操作. jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...
- Bedrock Linux 0.7.3 发布
Bedrock Linux是一种元分发,允许用户利用其他通常互斥的Linux发行版的功能,并让它们无缝地一起工作.该项目发布了其0.7.x系列,Bedrock Linux 0.7.3的更新. 新的更新 ...
- man 7 glob
GLOB(7) Linux Programmer's Manual GLOB(7) NAME glob - 形成路径名称 描述 (DESCRIPTION) 很久以前 在 UNIX V6 版 中 有一个 ...
- SVN学习总结(2)——SVN冲突解决
在我们用VS进行项目合作开发的过程中,SVN的提交控制是至关重要的,大家不可避免的都遇到过SVN冲突的问题,开发的时候,应该认真学习SVN的知识,减少冲突,集中时间放在开发上. 解决冲突有三种方式: ...
- Java基础学习总结(5)——多态
一.面向对象最核心的机制--动态绑定,也叫多态 1.1.通过下面的例子理解动态绑定,即多态 package javastudy.summary; class Animal { /** * 声明一个私有 ...
- 2015 Multi-University Training Contest 3 hdu 5317 RGCDQ
RGCDQ Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...