参考文章:《精读《react-easy-state 源码》》

1. 引言

react-easy-state 是个比较有趣的库,利用 Proxy 创建了一个非常易用的全局数据流管理方式。

1
2
3
4
5
6
7
import React from "react";
import { store, view } from "react-easy-state";

const counter = store({ num: 0 });
const increment = () => counter.num++;

export default view(() => <button onClick={increment}>{counter.num}</button>);

上手非常轻松,通过 store 创建一个数据对象,这个对象被任何 React 组件使用时,都会自动建立双向绑定,任何对这个对象的修改,都会让使用了这个对象的组件重渲染

当然,为了实现这一点,需要对所有组件包裹一层 view

2. 精读

这个库利用了 nx-js/observer-utilReaction 基础 API,其他核心功能分别是 store view batch,所以我们就从这四个点进行解读。

Reaction

这个单词名叫 “反应”,是实现双向绑定库的最基本功能单元。

拥有最基本的两个单词和一个概念:observable observe 与自动触发执行的特性。

1
2
3
4
5
6
7
import { observable, observe } from "@nx-js/observer-util";

const counter = observable({ num: 0 });
const countLogger = observe(() => console.log(counter.num));

// 会自动触发 countLogger 函数内回调函数的执行。
counter.num++;

在第 35 期精读 精读《dob - 框架实现》 “抽丝剥茧,实现依赖追踪” 一节中有详细介绍实现原理,这里就不赘述了。

有了一个具有反应特性的函数,与一个可以 “触发反应” 的对象,那么实现双向绑定更新 View 就不远了。

store

react-easy-statestore 就是 observable(obj) 包装一下,唯一不同是,由于支持本地数据:

1
2
3
4
5
6
7
8
import React from 'react'
import { view, store } from 'react-easy-state'

export default view(() => {
const counter = store({ num: 0 })
const increment = () => counter.num++
return <button={increment}>{counter.num}</div>
})

所以当监测到在 React 组件内部创建 store 且是 Hooks 环境时,会返回:

1
return useMemo(() => observable(obj), []);

这是因为 React Hooks 场景下的 Function Component 每次渲染都会重新创建 Store,会导致死循环。因此利用 useMemo 并将依赖置为 []使代码在所有渲染周期内,只在初始化执行一次。

更多 Hooks 深入解读,可以阅读 精读《useEffect 完全指南》

view

根据 Function Component 与 Class Component 的不同,分别进行两种处理,本文主要介绍对 Function Component 的处理方式,因为笔者推荐使用 Function Component 风格。

首先最外层会套上 memo,这类似 PureComponent 的效果:

1
return memo(/**/);

然后构造一个 forceUpdate 用来强制渲染组件:

1
const [, forceUpdate] = useState();

之后,只要利用 observe 包裹组件即可,需要注意两点:

  1. 使用刚才创建的 forceUpdatestore 修改时调用。
  2. observe 初始化不要执行,因为初始化组件自己会渲染一次,再渲染一次就会造成浪费。

所以作者通过 scheduler lazy 两个参数完成了这两件事:

1
2
3
4
5
6
7
8
9
10
const render = useMemo(
() =>
observe(Comp, {
scheduler: () => setState({}),
lazy: true
}),
[]
);

return render;

最后别忘了在组件销毁时取消监听:

1
2
3
useEffect(() => {
return () => unobserve(render);
}, []);

batch

这也是双向绑定数据流必须解决的经典问题,批量更新合并。

由于修改对象就触发渲染,这个过程太自动化了,以至于我们都没有机会告诉工具,连续的几次修改能否合并起来只触发一次渲染。 尤其是 For 循环修改变量时,如果不能合并更新,在某些场景下代码几乎是不可用的。

所以 batch 就是为解决这个问题诞生的,让我们有机会控制合并更新的时机:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from "react";
import { view, store, batch } from "react-easy-state";

const user = store({ name: "Bob", age: 30 });

function mutateUser() {
// this makes sure the state changes will cause maximum one re-render,
// no matter where this function is getting invoked from
batch(() => {
user.name = "Ann";
user.age = 32;
});
}

export default view(() => (
<div>
name: {user.name}, age: {user.age}
</div>
));

react-easy-state 通过 scheduler 模块完成 batch 功能,核心代码只有五行:

1
2
3
4
5
export function batch(fn, ctx, args) {
let result;
unstable_batchedUpdates(() => (result = fn.apply(ctx, args)));
return result;
}

利用 unstable_batchedUpdates,可以保证在其内执行的函数都不会触发更新,也就是之前创建的 forceUpdate 虽然被调用,但是失效了,等回调执行完毕时再一起批量更新。

同时代码里还对 setTimeout setInterval addEventListener WebSocket 等公共方法进行了 batch 包装,让这些回调函数中自带 batch 效果。

3. 总结

好了,react-easy-state 神奇的效果解释完了,希望大家在使用第三方库的时候都能理解背后的原理。

PS:最后,笔者目前不推荐在 Function Component 模式下使用任何三方数据流库,因为官方功能已经足够好用了!

讨论地址是:精读《react-easy-state》

个人介绍

2019_07_12guild_page

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues
JS小册 js.pingan8787.com