4 总结 最后稍稍聊一下 cyclejs,因为用这个库,基本就脱离了 react 生态,我们 react 系开发者只能干瞪眼看看。 cyclejs 就一个目的,解决 react + rxjs 中阴魂不散的循环依赖问题:视图的回调函数可以产生数据源(observable),但视图又可能依赖这个数据源。 总的来说,笔者认为 rxjs 还是难以落地到 react 业务代码中,究其本质,就是没有 cyclejs 这种机制解决数据源引起的循环依赖问题。
vue、react这些热门的框架都多多少少有点涉及到函数式编程的领域,甚至已经开始有一些以函数式编程作为主范式的框架出现,比如说cyclejs。 那么,为什么函数式编程会如此重要呢? 2.3 主流框架与函数式编程 目前主流的前端框架,比如vue,react,大部分都是支持函数式编程的,甚至已经开始有一些以函数式编程为主范式的框架开始出现,比如 cyclejs,turbine。 目前已经有基于这种范式而开发的库或者框架,比如RxJS、cyclejs、turbine等。
vue、react这些热门的框架都多多少少有点涉及到函数式编程的领域,甚至已经开始有一些以函数式编程作为主范式的框架出现,比如说cyclejs。那么,为什么函数式编程会如此重要呢? 2.3 主流框架与函数式编程 目前主流的前端框架,比如vue,react,大部分都是支持函数式编程的,甚至已经开始有一些以函数式编程为主范式的框架开始出现,比如 cyclejs,turbine。 目前已经有基于这种范式而开发的库或者框架,比如RxJS、cyclejs、turbine等。
岂不就是 cyclejs 吗? 多提一句,rxjs 对数据流纯函数的抽象能力非常强大,因此前端主要工作在于抽一个工具,将诸如事件、请求、推送等等副作用都转化为数据源。 cyclejs 就是这样一个框架:提供了一套上述的工具库,与 dom 对接增加了虚拟 dom 能力。 rxjs 带来了两种新的开发方式,第一种是类似 cyclejs,将一切前端副作用转化为数据源,直接对接到 dom。 react 内置的是类 redux 的方式,vue/angular 内置的是类 mobx 的方式,cyclejs 内置了 rxjs。 redux、mobx、rxjs 都拥有独特的数据处理、副作用隔离方式,同时对应的框架 redux-react、mobx-react、cyclejs 都补充了各种方式的依赖注入,完成了与前端框架的衔接。
比如,拥有了这个 API,我们可以实现出类似 cyclejs, rxjs, immer, react-hooks 的特性。 如何实现 cyclejs-like 的 reactive-view ? 到目前为止,我们差不多填完了用 vue reativity api 实现 immer-like, rxjs-like, react-hooks-like, cyclejs-like(就是最初的那个 reactive
或者 Vue,手动把这个往 state 或者 data 设置 // 如果是 Angular 2,可以不用这步,直接把 Observable 用 async pipe 绑定到视图 // 如果是 CycleJS CycleJS比较特别,它整个运行过程就是基于类似RxJS的机制,甚至包括视图,看官方的这个Demo: import {run} from '@cycle/xstream-run'; import {div
此文讨论的是纯数据流方案,与 Dom 结合的方案可以参考 cyclejs,但这个库主要搭建了 Reactive -> Dom 的桥梁,使用起来还要参考此文的思路。
awesome-static-website-services A-Frame VR https://github.com/aframevr/awesome-aframe Cycle.js https://github.com/cyclejs-community /awesome-cyclejs Text Editing https://github.com/dok/awesome-text-editing Motion UI Design https://github.com
videoconverter.js 浏览器上转换和操作视频 pillarjs/multiparty node端解析请求中表单数据,包括文件上传 imweb/FKB 腾讯IMWeb团队前端知识库 cyclejs-community
image.png 和 React 组件的输出输出模型相比, Cyclejs对组件输入/输出的抽象则做的更加彻底,更加‘函数式’?。 Redux 建议保持组件的纯净性, 将组件状态交给 Redux 和配套的异步处理工具来维护, 这样就将整个应用抽象成了一个”单向的数据流”, 这是一种简单的”输入/输出”关系 image.png 不管是 Cyclejs 扩展: Redesigning Redux Cyclejs ---- 5️⃣ 按照 UI 划分为布局组件和内容组件 布局组件用于控制页面的布局,为内容组件提供占位。
但是真正地将副作用全部抽离开的框架不怎么流行,比如 cyclejs, elm。因此我们必须接受这个事实。
) 基于这套理念,编写代码的方式可以变得很简洁流畅: 从driver中获取action 把action映射成数据流 处理数据流,并且渲染成界面 从界面的事件中,派发action去进行后续事项的处理 在CycleJS 此外,在CycleJS中,View是纯展示,连事件监听也不做,这部分监听的工作放在Intent中去做。
不过相对而言,应该算是接地气一些,它既没有要求纯函数式和分离副作用,也没有 cyclejs 那么抽象,只要入门的面向对象,就可以用好。
使得单独的应用可以被复用 Redux 不是分形和 Redux 本身的定位有关,它是一个纯粹的状态管理器,不涉及组件的视图实现,所以无法像 elm 和 cyclejs 一样形成一个完整的应用闭环。