写点什么

浅谈前端响应式设计(一)

  • 2020-03-08
  • 本文字数:3164 字

    阅读完需:约 10 分钟

浅谈前端响应式设计(一)

现实世界有很多是以响应式的方式运作的,例如我们会在收到他人的提问,然后做出响应,给出相应的回答。在开发过程中我也应用了大量的响应式设计,积累了一些经验,希望能抛砖引玉。


响应式编程(Reactive Programming)和普通的编程思路的主要区别在于,响应式以推( push)的方式运作,而非响应式的编程思路以拉( pull)的方式运作。例如,事件就是一个很常见的响应式编程,我们通常会这么做:


button.on('click', () => {  // ...})
复制代码


而非响应式方式下,就会变成这样:


while (true) {  if (button.clicked) {    // ...  }}
复制代码


显然,无论在是代码的优雅度还是执行效率上,非响应式的方式都不如响应式的设计。

Event Emitter

EventEmitter是大多数人都很熟悉的事件实现,它很简单也很实用,我们可以利用 EventEmitter实现简单的响应式设计,例如下面这个异步搜索:


class Input extends Component {  state = {    value: ''  }
onChange = e => { this.props.events.emit('onChange', e.target.value) }
afterChange = value => { this.setState({ value }) }
componentDidMount() { this.props.events.on('onChange', this.afterChange) }
componentWillUnmount() { this.props.events.off('onChange', this.afterChange) }
render() { const { value } = this.state
return ( <input value={value} onChange={this.onChange} /> ) }}
class Search extends Component { doSearch = (value) => { ajax(/* ... */).then(list => this.setState({ list })) }
componentDidMount() { this.props.events.on('onChange', this.doSearch) }
componentWillUnmount() { this.props.events.off('onChange', this.doSearch) }
render() { const { list } = this.state
return ( <ul> {list.map(item => <li key={item.id}>{item.value}</li>)} </ul> ) }}
复制代码


这里我们会发现用 EventEmitter的实现有很多缺点,需要我们手动在 componentWillUnmount里进行资源的释放。它的表达能力不足,例如我们在搜索的时候需要聚合多个数据源的时候:


class Search extends Component {  foo = ''  bar = ''
doSearch = () => { ajax({ foo, bar }).then(list => this.setState({ list })) }
fooChange = value => { this.foo = value this.doSearch() }
barChange = value => { this.bar = value this.doSearch() }
componentDidMount() { this.props.events.on('fooChange', this.fooChange) this.props.events.on('barChange', this.barChange) }
componentWillUnmount() { this.props.events.off('fooChange', this.fooChange) this.props.events.off('barChange', this.barChange) }
render() { // ... }}
复制代码


显然开发效率很低。

Redux

Redux采用了一个事件流的方式实现响应式,在 Redux中由于 reducer必须是纯函数,因此要实现响应式的方式只有订阅中或者是在中间件中。


如果通过订阅 store的方式,由于 Redux不能准确拿到哪一个数据放生了变化,因此只能通过脏检查的方式。例如:


function createWatcher(mapState, callback) {  let previousValue = null  return (store) => {    store.subscribe(() => {      const value = mapState(store.getState())      if (value !== previousValue) {        callback(value)      }      previousValue = value    })  }}
const watcher = createWatcher(state => { // ...}, () => { // ...})
watcher(store)
复制代码


这个方法有两个缺点,一是在数据很复杂且数据量比较大的时候会有效率上的问题;二是,如果 mapState函数依赖上下文的话,就很难办了。在 react-redux中, connect函数中 mapStateToProps的第二个参数是 props,可以通过上层组件传入 props来获得需要的上下文,但是这样监听者就变成了 React的组件,会随着组件的挂载和卸载被创建和销毁,如果我们希望这个响应式和组件无关的话就有问题了。


另一种方式就是在中间件中监听数据变化。得益于 Redux的设计,我们通过监听特定的事件(Action)就可以得到对应的数据变化。


const search = () => (dispatch, getState) => {  // ...}
const middleware = ({ dispatch }) => next => action => { switch action.type { case 'FOO_CHANGE': case 'BAR_CHANGE': { const nextState = next(action) // 在本次dispatch完成以后再去进行新的dispatch setTimeout(() => dispatch(search()), 0) return nextState } default: return next(action) }}
复制代码


这个方法能解决大多数的问题,但是在 Redux中,中间件和 reducer实际上隐式订阅了所有的事件(Action),这显然是有些不合理的,虽然在没有性能问题的前提下是完全可以接受的。

面向对象的响应式

ECMASCRIPT5.1引入了 gettersetter,我们可以通过 gettersetter实现一种响应式。


class Model {  _foo = ''
get foo() { return this._foo }
set foo(value) { this._foo = value this.search() }
search() { // ... }}
// 当然如果没有getter和setter的话也可以通过这种方式实现class Model { foo = ''
getFoo() { return this.foo }
setFoo(value) { this.foo = value this.search() }
search() { // ... }}
复制代码


MobxVue就使用了这样的方式实现响应式。当然,如果不考虑兼容性的话我们还可以使用 Proxy


当我们需要响应若干个值然后得到一个新值的话,在 Mobx中我们可以这么做:


class Model {  @observable hour = '00'  @observable minute = '00'
@computed get time() { return `${this.hour}:${this.minute}` }}
复制代码


Mobx会在运行时收集 time依赖了哪些值,并在这些值发生改变(触发 setter)的时候重新计算 time的值,显然要比 EventEmitter的做法方便高效得多,相对 Reduxmiddleware更直观。


但是这里也有一个缺点,基于 gettercomputed属性只能描述 y=f(x)的情形,但是现实中很多情况 f是一个异步函数,那么就会变成 y=awaitf(x),对于这种情形 getter就无法描述了。


对于这种情形,我们可以通过 Mobx提供的 autorun来实现:


class Model {  @observable keyword = ''  @observable searchResult = []
constructor() { autorun(() => { // ajax ... }) }}
复制代码


由于运行时的依赖收集过程完全是隐式的,这里经常会遇到一个问题就是收集到意外的依赖:


class Model {  @observable loading = false  @observable keyword = ''  @observable searchResult = []
constructor() { autorun(() => { if (this.loading) { return } // ajax ... }) }}
复制代码


显然这里 loading不应该被搜索的 autorun收集到,为了处理这个问题就会多出一些额外的代码,而多余的代码容易带来犯错的机会。


或者,我们也可以手动指定需要的字段,但是这种方式就不得不多出一些额外的操作:


class Model {  @observable loading = false  @observable keyword = ''  @observable searchResult = []
disposers = []
fetch = () => { // ... }
dispose() { this.disposers.forEach(disposer => disposer()) }
constructor() { this.disposers.push( observe(this, 'loading', this.fetch), observe(this, 'keyword', this.fetch) ) }}
class FooComponent extends Component { this.mode = new Model()
componentWillUnmount() { this.state.model.dispose() }
// ...}
复制代码


而当我们需要对时间轴做一些描述时, Mobx就有些力不从心了,例如需要延迟 5 秒再进行搜索。


在下一篇博客中,将介绍 Observable处理异步事件的实践。


2020-03-08 19:24719

评论

发布
暂无评论
发现更多内容

JavaScript学习(十一)---RegExp对象

空城机

JavaScript 大前端 6月日更

数据结构——顺序表

若尘

数据结构 6月日更

冰泉奶茶香牙膏好不好?奶茶控的宝藏牙膏就是它

Geek_50a546

使用 Scala 宏解决对象转换

GrowingIO技术专栏

scala protobuf 元编程 macro

Rust从0到1-自动化测试-测试组织

rust 单元测试 集成测试 自动化测试

支持低代码开发和远程真机,DevEco Studio 2.2 Beta1来啦

科技汇

神经网络吴恩达, 解析极限编程--Kent Beck, Cynthia Andres John 易筋 ARTS 打卡 Week 53

John(易筋)

ARTS 打卡计划

联想服务斩获两项智能运维大奖 助力企业业务创新与数字化转型

科技大数据

[译] D8 类库脱糖

Antway

6月日更

30分钟接入SDK 融云是如何让开发者做到开箱即用的?

融云 RongCloud

HarmonyOS学习路之开发篇——公共事件与通知(一)

爱吃土豆丝的打工人

Java HarmonyOS 鸿蒙操作系统

从零开始学习3D可视化之事件绑定

ThingJS数字孪生引擎

大前端 物联网 3D 3D可视化

APP 开发技术如何进行选型 ?

程序员海军

大前端 App 技术选型 APP开发

为什么switch的case没有break不行

叫我阿柒啊

Switch case break

基于 Web 引擎扩展技术的 RTC 混合开发框架实践

白玉兰开源

大前端

深度解读MRS IoTDB时序数据库的整体架构设计与实现

华为云开发者联盟

大数据 架构 时序数据库 FusionInsight MRS MRS IoTDB

拥抱开放的英特尔 让PC行业再次越过创新鸿沟

E科讯

一步步设计版本控制系统

Java·课代表

git 版本控制 版本管理

计算机网络的 89 个核心概念

苹果看辽宁体育

后端 计算机网络 网络

可视化搭建的一些思考和实践

白玉兰开源

容器化 | 在 Kubernetes 上部署 RadonDB MySQL 集群

RadonDB

MySQL Kubernetes 容器

EasyRecovery——一款专业的数据恢复软件

淋雨

文件恢复 Easyrecovery破解 免费恢复软件 硬盘数据恢复

掌门教育自研APM实际分享

白玉兰开源

AI如何赋能软硬件产品创新?百度大脑开放日西安站解密

百度大脑

AI 百度大脑 开放日 EdgeBoard

🏆「作者推荐」【JVM原理探索】深入理解G1垃圾收集器的原理和运行机制

码界西柚

G1 JVM 6月日更 垃圾回收器

代码管理工具:Git和SVN

正向成长

git svn

12种mysql常见错误总结 +分析示例

李阿柯

MySQL 面试 常见问题

AI论文解读:基于Transformer的多目标跟踪方法TrackFormer

华为云开发者联盟

预测 Transformer 多目标跟踪 TrackFormer 跟踪目标

带你认识9种常用卷积神经网络

华为云开发者联盟

神经网络 深度学习 卷积神经网络 图像 卷积

回忆录 | 那些你不能错过的CTF夏令营往届历程,2021精彩继续……

郑州埃文科技

面试官:你知道怎么求素数吗?

华为云开发者联盟

面试 开发者 开发 代码 素数

浅谈前端响应式设计(一)_文化 & 方法_jinzhixin_InfoQ精选文章