[Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream
Rather than using Components to push streams into other Components, mapPropsStream
allows you to create functions that can wrap components to create shareable behaviors across components.
Using componentFromStream:
import React from "react"
import { render } from "react-dom"
import { Observable } from "rxjs"
import config from "recompose/rxjsObservableConfig"
import {
setObservableConfig,
componentFromStream,
createEventHandler,
mapPropsStream
} from "recompose" setObservableConfig(config)
//#endregion const Counter = props => <h1>{props.count}</h1> const CounterWithInterval = componentFromStream(
props$ => props$.switchMap(
props => Observable.interval(1000),
(props, count) => ({count, ...props})
)
.map(Counter)
) const App = () => (
<div>
<CounterWithInterval />
</div>
) render(<App />, document.getElementById("root"))
MapPropsStream allows you to create functions that will decorate your component, rather than creating a component itself. I'm going to create an interval here using MapPropsStream.
A mapProposStream version can be like this:
import React from "react"
import { render } from "react-dom"
import { Observable } from "rxjs"
import config from "recompose/rxjsObservableConfig"
import {
setObservableConfig,
componentFromStream,
createEventHandler,
mapPropsStream
} from "recompose" setObservableConfig(config)
//#endregion const Counter = props => <h1>{props.count}</h1> const interval = mapPropsStream(props$ => props$.switchMap(
props => Observable.interval(1000),
(props, count) => ({ count, ...props })
)) const CounterWithInterval = interval(Counter) const App = () => (
<div>
<CounterWithInterval />
</div>
) render(<App />, document.getElementById("root"))
As you can see, we take the hightlighted part as own function, wrapped with 'mapPropsStream'.
[Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream的更多相关文章
- [React] Recompose: Theme React Components Live with Context
SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. P ...
- [React] Create and import React components with Markdown using MDXC
In this lesson I demonstrate how to use the library MDXC to create and import React components with ...
- [Recompose] Stream Props to React Children with RxJS
You can decouple the parent stream Component from the mapped React Component by using props.children ...
- [Recompose] Configure Recompose to Build React Components from RxJS Streams
Recompose provides helper functions to stream props using an Observable library of your choice into ...
- Akka(18): Stream:组合数据流,组件-Graph components
akka-stream的数据流可以由一些组件组合而成.这些组件统称数据流图Graph,它描述了数据流向和处理环节.Source,Flow,Sink是最基础的Graph.用基础Graph又可以组合更复杂 ...
- [React] Create a Query Parameter Modal Route with React Router
Routes are some times better served as a modal. If you have a modal (like a login modal) that needs ...
- [React] Make Controlled React Components with Control Props
Sometimes users of your component want to have more control over what the internal state is. In this ...
- [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 ...
- [React Native] Create a component using ScrollView
To show a list of unchanging data in React Native you can use the scroll view component. In this les ...
随机推荐
- oracle11g文件系统库迁移到ASM库上面
最近把oracle11g的文件系统库迁移到了asm库上面. 迁移过程大致如下: 最少停机方案: 实例joinpay02 | |数据库joinpay02 需要改动的文件: 数据文件 控制文件 redo文 ...
- RocketMQ学习笔记(6)----RocketMQ的Client的使用 Producer/Consumer
1. 添加依赖 pom.xml如下: <dependency> <groupId>org.apache.rocketmq</groupId> <artifa ...
- (一)React再学习
新公司的技术栈是React,虽然之前对react大概过了一遍,但是自己没有实际落地过项目 再学习一遍react: 一.react全家桶 ·create-react-app ·组件化思维 ·JSX ·开 ...
- Node_进阶_5
Node进阶第五天 为什么mysql不用开mongod –dbpath xx… 答:因为mysql会在”服务”中运行,也就是开机时自动启动并且长久驻扎在内存中了. mongodb其实也能通过设置来设成 ...
- iOS开发——Block使用小结
Block语法看上去好像很特别,但它实际上是作为极普通的C语言源代码处理的.Block的实质,就是Objective-C的对象. 1.Block的语法 ^ 返回值类型 参数列表 表达式 可省略返回值类 ...
- 关于Vue中父子组件相互传值
Header为子组件,Home为父组件,通过子组件调用父组件 运行结果如下 下面是父组件调用子组件的案例 通过button按钮的click事件 图一是父组件Home中的run方法,图二是msg和fun ...
- 紫书 例题 10-3 UVa 10375 (唯一分解定理)
这道题感觉非常的秀 因为结果会很大,所以就质因数分解分开来算 非常的巧妙! #include<cstdio> #include<vector> #include<cstr ...
- 【BZOJ 1150】[CTSC2007]数据备份Backup
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 选择的连接肯定是相邻的点对. 那么我们处理出来长度为n-1的数组a 其中a[i-1] = dis[i]-dis[i-1] 那么问题就 ...
- Oracle中set serveroutput on介绍
定义 set serveroutpu on是使oracle可以使用自带的输出方法 dbms_output.put_line('XX'); 使用范围 使用于PL/SQL COMMAND WINDOW,S ...
- 生成apk文件遇到的编译问题error: format not a string literal and no format arguments
编译错误时使用的android-ndk为r9的版本号.报下面错误: "Compile++ thumb : cocosdenshion_static <= SimpleAudioEngi ...