精读《react-easy-state 源码》

curlyCheng 发布于2019-08-23 16:48 / 2398人阅读

摘要：会自动触发函数内回调函数的执行。因此利用并将依赖置为使代码在所有渲染周期内，只在初始化执行一次。同时代码里还对等公共方法进行了包装，让这些回调函数中自带效果。前端精读帮你筛选靠谱的内容。

1. 引言

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

import React from "react";
import { store, view } from "react-easy-state";

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

export default view(() => );

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

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

2. 精读

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

Reaction

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

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

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-state 的 store 就是 observable(obj) 包装一下，唯一不同是，由于支持本地数据：

import React from "react"
import { view, store } from "react-easy-state"

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

})

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

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

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

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

view

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

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

return memo(/**/);

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

const [, forceUpdate] = useState();

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

使用刚才创建的 forceUpdate 在 store 修改时调用。

observe 初始化不要执行，因为初始化组件自己会渲染一次，再渲染一次就会造成浪费。

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

const render = useMemo(
  () =>
    observe(Comp, {
      scheduler: () => setState({}),
      lazy: true
    }),
  []
);

return render;

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

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

batch

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

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

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

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(() => (
  
    name: {user.name}, age: {user.age}
  
));

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

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 效果。

4. 总结

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

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

讨论地址是：精读《react-easy-state》 · Issue #144 · dt-fe/weekly

如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

关注 前端精读微信公众号

混合云专线服务源码站源码源码网站源码源码商城源码源码超市网站源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103311.html

精读《源码学习》

摘要：精读原文介绍了学习源码的两个技巧，并利用实例说明了源码学习过程中可以学到许多周边知识，都让我们受益匪浅。讨论地址是精读源码学习如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。 1. 引言 javascript-knowledge-reading-source-code 这篇文章介绍了阅读源码的重要性，精读系列也已有八期源码系列文章，分别是：精读《Immer.js》源...

aboutU 2019-08-26 10:15 评论0 收藏0
精读《Inject Instance 源码》

摘要：引言本周精读的源码是这个库。这个库的目的是为了实现的依赖注入。精读那么开始源码的解析，首先是整体思路的分析。讨论地址是精读源码如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。前端精读帮你筛选靠谱的内容。 1. 引言本周精读的源码是 inject-instance 这个库。这个库的目的是为了实现 Class 的依赖注入。比如我们通过 inject 描述一个成员变量，...

hsluoyz 2019-08-23 18:33 评论0 收藏0
精读《Epitath 源码 - renderProps 新用法》

摘要：精读源码一共行，我们分析一下其精妙的方式。更多讨论讨论地址是精读新用法如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。前端精读帮你筛选靠谱的内容。 1 引言很高兴这一期的话题是由 epitath 的作者 grsabreu 提供的。前端发展了 20 多年，随着发展中国家越来越多的互联网从业者涌入，现在前端知识玲琅满足，概念、库也越来越多。虽然内容越来越多，但作为个体的...

Magicer 2019-08-23 12:20 评论0 收藏0
精读《syntax-parser 源码》

摘要：引言是一个版语法解析器生成器，具有分词语法树解析的能力。实现函数用链表设计函数是最佳的选择，我们要模拟调用栈了。但光标所在的位置是期望输入点，这个输入点也应该参与语法树的生成，而错误提示不包含光标，所以我们要执行两次。 1. 引言 syntax-parser 是一个 JS 版语法解析器生成器，具有分词、语法树解析的能力。通过两个例子介绍它的功能。第一个例子是创建一个词法解析器 my...

yuanxin 2019-08-23 15:37 评论0 收藏0
精读《React PowerPlug 源码》

摘要：今天我们就来解读一下的源码。比较有意思，将定时器以方式提供出来，并且提供了方法。实现方式是，在组件内部维护一个定时器，实现了组件更新销毁时的计时器更新销毁操作，可以认为这种定时器的生命周期绑定了组件的生命周期，不用担心销毁和更新的问题。 1. 引言 React PowerPlug 是利用 render props 进行更好状态管理的工具库。 React 项目中，一般一个文件就是一个类，...

teren 2019-08-23 15:27 评论0 收藏0