[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 Togglecomponent 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 ...
随机推荐
- nginx的rewrite规则
301跳转: server { listen 80; server_name www.xiaofan.com; return 301 https://$server_name$request_uri; ...
- swift语言点评十七-Designated Initializers and Convenience Initializers
Swift defines two kinds of initializers for class types to help ensure all stored properties receive ...
- SpringCloud学习笔记(12)----Spring Cloud Netflix之Hystrix断路器的流程和原理
工作流程(参考:https://github.com/Netflix/Hystrix/wiki/How-it-Works) 1. 创建一个HystrixCommand或HystrixObservabl ...
- ZBrush中功能强大的插件PaintStop
PaintStop是ZBrush®3.1的手绘插件,可以比较真实的模拟手绘风格,尤其是用水彩笔刷画水墨风格画.PaintStop插件可供用户免费使用. PaintStop是一款功能强大的插件,已经被添 ...
- sass的用法小结(四)进阶篇
Sass 的数据类型 Sass 既然有了类似编程语言的功能,自然也就有了简单的数据类型.这里简单的介绍一些 Sass 中的数据类型,因为在后面的讨论中要用到有关的内容. Sass 中主要有六种数据类型 ...
- 设置fixed,横向滚动条失效
window.onscroll = function(){ var sl = -Math.max(document.body.scrollLeft,document.documentElement.s ...
- HDU-2087 剪花布条 字符串问题 KMP算法 查匹配子串
题目链接:https://cn.vjudge.net/problem/HDU-2087 题意 中文题咯 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条, ...
- BZOJ 5104 Fib数列(二次剩余+BSGS)
斐波那契数列的通项: \[\frac{1}{\sqrt{5}}((\frac{1+\sqrt{5}}{2})-(\frac{1-\sqrt{5}}{2}))\] 设T=\(\sqrt{5}*N\),\ ...
- Memcached windows安装
Memcached windows安装 如果出现提示: Microsoft Windows [版本 6.3.9600] (c) 2013 Microsoft Corporation.保留所有权利. D ...
- less04 运算符、命名空间
less //.wp{ // margin: 0 auto; // background: forestgreen; // width: 450px + 450; //有一个有单位就可以 // hei ...