[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
    })
  )
})

原文地址:https://www.cnblogs.com/Answer1215/p/8131606.html

时间: 2024-10-26 06:26:43

[Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose的相关文章

React中的state与props的再理解

props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.其实这种说法有问题.可以参考一篇文章<React中state与props介绍与比较> 组件中的props本质作用是一种父级向子级传递数据的方式.props是可以改变的,只是没有提供API可以在子组件里直接修改,我们可以在父组件里把要给子组件的属性值修改.

为什么react的组件要super(props)

为什么react的组件要super(props) 摘自 https://segmentfault.com/q/1010000008340434 (非原创) 如图,我知道supert是继承constructor的参数,但是为什么在react里面,有一些组件使用了super(props),而有一些没有写,还有在es6里就只是写了supert(),这些区别在哪呢?以及这里的这个constructor(props)...super(props)是起到什么作用呢 这个是全代码: 已采纳 调用super的原

07.React组件进阶(二)Props 深入

props 校验 //1.对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据 //2.如果传入的数据格式不对,可能会导致组件内部报错 //3.关键问题:组件的使用者不知道明确的错误原因 //4.props 校验:允许在创建组件的时候,就指定props的类型,格式等 App.propTypes = { colors:PropTypes.array } //5.作用:捕获使用组件时因为props 导致的错误,给出明确的错误提示,增加组件的健壮性 使用步骤 1.安装包 prop-t

React.render和reactDom.render的区别

刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0.14版本做出的改变.主要是为了使React能在更多的不同环境下更快.更容易构建.于是把react分成了react和react-dom两个部分.这样就为web版的react和移动端的React Native共享组件铺平了道路.也就是说我们可以跨平台使用相同的react组件. 新的react包包含了Re

React的state属性与props属性

state属性和props属性是隶属于React的component的两个重要属性 在React中,每一个class(类)和面向对象的函数一样,都有一个构造函数constructor(),可以对对象.属性等进行初始化,因此要初始化state,可以将其放在:   state属性     constructor(){ //初始化对象.属性等 } import React from 'react'; export default class BodyIndex extends React.Compon

从 0 到 1 实现 React 系列 —— 组件和 state|props

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/...) 项目地址 组件即函数 在上一篇 JSX 和 Virtual DOM 中,解释了 JSX 渲染到界面的过程并实现了相应代码,代码调用如下所示: import React from 'react' import ReactDOM from 'react-dom' const element = ( <div className="titl

React中的State与Props

一.State 1.什么是 state 一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props 2.state 的使用 组件初始化时,通过 this.state 给组件设置一个初始的 state,在第一次 render 时就会用这个数据渲染组件 class ItemList extends React.Component { constructor() { super(); this.state = { data: '123' }; } render

react基础:插值 ,Props属性

一:插值插值语法是{},在大括号中可以书写任意的表达式,Js内置的方法,定义 的方法,运算符,语句等等{/*在jsx语法中书写注释一定要写在插值符号中*/} 必须是/**/ 且必须放到{}中eg: 二:Props属性两个相同div,给其中的一个添加一个类,这个div展示的样式就不一样的,因为他具有这个属性就叫class区别于其他的div同理来说对于完全一致的组件,展示完全一致,如果给其中一个添加一些属性,这个组件展示的结果就可以能会不同了,因此react提出组件属性的概念,可以对组件添加一些属性

React 的组件与 this.props对象

1.组件 React 允许将代码封装成组件,然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 的方法就是用于生成一个组件类. 2.this.props对象 即是对组件标签中的标签属性和子节点构成的集合. 控制台显示为 注:this.props.children 的值有3种可能:即当前组件没有字节点时,它就是undefined:如果有一个子节点,数据类型是object:如果有多个子节点时,数据类型就是array.所以处理this.props.childr