[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 ...
随机推荐
- NuSOAP简介 php中使用webservice
许多机构已经采用了Apach和PHP作为他们的Web应用环境.在Web services模式中采用PHP可能看上去可能会比较难.但是事实上,搭配NuSoap,你可以轻松的应用PHP构建SOAP的客户端 ...
- mysql 修改默认的引擎
需求: mysql 的默认的引擎为MyISAM 虽然该引擎访问的速度快,但并不支持存储事物,也不支持外键,所以我们修改为innob Linux修改MySql默认存储引擎为InnoDB 一 ...
- iview中单击行,使得checkbox状态的方法
直接贴代码,这是一组jquery全选,全不选,反选代码 <!DOCTYPE html> <html lang="en"> <head> < ...
- numpy基础篇-简单入门教程4
np.set_printoptions(precision=3),只显示小数点后三位 np.random.seed(100) rand_arr = np.random.random([2, 2]) n ...
- 题解 UVA12206 【Stammering Aliens】
终于A了这道题啊(坑啊) 教练说:这道题不能用map吧,复杂度不一个O(nlogn)吗 于是我就一直想不出来,然后看题解代码,一看就是map... 所以我就在想,那复杂度是不是也不是O(nlogn)呢 ...
- code vs 1216 跳马问题
1216 跳马问题 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 题目 输入描述 Input Descri ...
- ajax前台传到后台乱码,显示问号的问题
response.setContentType("text/html;charset=gbk"); response.setHeader("Cache-Control&q ...
- NIO框架之MINA源代码解析(一):背景
"你们的agent占了好多系统的port.把我们的非常多业务系统都给整死了,给我们造成了非常大的损失.要求你们的相关领导下周过来道歉" -- 来自我们的一个客户. ...
- [leetcode][math] Add Digits
题目: Given a non-negative integer num, repeatedly add all its digits until the result has only one di ...
- sass05 数据类型,数据运算
/*! 数字类型 */ $n1: 1.2; $n2: 12; $n3: 14px; p{ font-size: $n3; } /*! 字符串类型*/ $s1: container; $s2: 'con ...