[Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose
This lesson takes the concept of render props and migrates it over to streaming props by keeping the same example and simple refactoring the Toggle
component 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的更多相关文章
- React Render Props 模式
概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样 ...
- React 深入系列3:Props 和 State
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...
- [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 ...
- React中的state与props的再理解
props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的, ...
- 如何理解react中的super() super(props)
class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程&quo ...
- React组件的state和props
React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React报错之Parameter 'props' implicitly has an 'any' type
正文从这开始~ 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an ...
- [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 ...
随机推荐
- 优动漫PAINT-超简单灌木教程
超简单灌木教程~零基础神马的都能神还原哦! 优动漫PAINT下载:http://wm.makeding.com/iclk/?zoneid=18597 想要Get到更多有关优动漫的信息包括软件下载,可关 ...
- nginx upstream
nginx转发http和tcp http转发 upstream goforit_201 { server 172.168.10.10:201; } server { listen 201; serve ...
- iview中单击行,使得checkbox状态的方法
直接贴代码,这是一组jquery全选,全不选,反选代码 <!DOCTYPE html> <html lang="en"> <head> < ...
- vue之computed和watch
计算属性 computed 侦听器or观察者 watch 一直以来对computed和watch一知半解,用的时候就迷迷糊糊的,今天仔细看了看文档,突然茅塞顿开,原来就是这么简单啊: computed ...
- ios面试题1
iOS面试题 1.写一个NSString类的实现 + (id)initWithCString:(c*****t char *)nullTerminatedCString encoding:(NSS ...
- Hdoj 1176 免费馅饼 【动态规划】
免费馅饼 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- Python库之pyudev (一)
库pyudev是libudev的python封装,libudev提拱了对本地设备的列举与查询API. 1.安装 pip install pyudev 2. 使用 2.1 开始 导入pyudev,验证库 ...
- HDU4622:Reincarnation(后缀数组,求区间内不同子串的个数)
Problem Description Now you are back,and have a task to do: Given you a string s consist of lower-ca ...
- Lambert/Diffuse 光照模型
Lambert/Diffuse光照模型的特点:各向同性,即与观察的方向无关,反射光只与入射光和入射角度相关. 1.光源垂直照射平面 如图,设入射光量为Ф, 平面面积为A, 则可以认为平面上每一点获取的 ...
- Windows下mnist数据集caffemodel分类模型训练及测试
1. MNIST数据集介绍 MNIST是一个手写数字数据库,样本收集的是美国中学生手写样本,比较符合实际情况,大体上样本是这样的: MNIST数据库有以下特性: 包含了60000个训练样本集和1000 ...