resso 源码解析

拳打南山敬老院2023-10-23 11:01

在之前用 React 写一些小项目的时候有时也需要用到状态管理，但是用 Redux 有一种"大材小用"感觉，就在寻找有没有很精巧的实现，最好是响应式的，最后搜索了一番在 Github 发现了两个满足我需求的库：

jsx 复制代码 
// valtio
import resso from 'resso';
import { proxy, useSnapshot } from 'valtio';

const state = proxy({ count: 0, text: 'hello' });

function Counter() {
  const snap = useSnapshot(state);
  return (
    <div>
      {snap.count}
      <button onClick={() => ++state.count}>+1</button>
    </div>
  );
}
// resso
const store = resso({ count: 0, text: 'hello' });

function App() {
  const { count } = store; // data used in UI → must destructure at top first 🥷
  return (
    <>
      {count}
      <button onClick={() => (store.count += 1)}>+</button>
    </>
  );
}

结合官方给出的文档示例还是最终在项目用了 resso，所以就有了这篇文章，同时作者在知乎也专门写了一篇文章介绍他的思路实现resso，世界上最简单的 React 状态管理器。有兴趣小伙伴可以专门去瞅瞅。

不过在阅读源码实现，需要先了解两个 API：

  • useSyncExternalStore
  • ReactDOM.unstable_batchedUpdates

useSyncExternalStore

这个 API 可能你完全陌生，事实上我也是，后面专门去官方文档查阅了一下 useSyncExternalStore，它的作用可以简单理解为订阅外部的 store，例如我们在使用 redux 之类的时候，它可能不是通过 useState 的形式而是在外部维护了一个 store，然后结合发布订阅模式来实现数据的更新。

下面用官方给出的切换离线和在线 hooks 例子快速看下这个 api

js 复制代码 
import { useSyncExternalStore } from 'react';

function getSnapshot() {
  return navigator.onLine;
}
function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

function ChatIndicator() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
  // ...
}

这里每次 online 或者 offline 发生变化执行回调函数，而每次执行 getSnapshot 如果返回值不同，就会让 React 重新渲染组件。

每次对比 getSnapshot 返回值使用的是 Object.is。

unstable_batchedUpdates

之所以介绍这个 API 其实和性能优化有关，在 React18 之前对于非同步代码和不是 react 事件处理函数 setState 不会进行批处理，例如下面代码：

jsx 复制代码 
import React, { useEffect, useState } from 'react';

const App: React.FC = () => {
  console.log('App组件渲染了！');
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  useEffect(() => {
    document.body.addEventListener('click', () => {
      setCount1((count) => count + 1);
      setCount2((count) => count + 1);
    });
    // 在原生js事件中不会进行批处理
  }, []);
  return (
    <>
      <div>count1： {count1}</div>
      <div>count2： {count2}</div>
    </>
  );
};

export default App;

这里每次点击组件都会渲染两次，共计输出六次 console.log 信息。

但是有什么办法可以改变呢？下面用 ReactDOM.unstable_batchedUpdates 重写上面这个例子

jsx 复制代码 
import React, { useEffect, useState } from 'react';

const App: React.FC = () => {
  console.log('App组件渲染了！');
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  useEffect(() => {
    document.body.addEventListener('click', () => {
      ReactDOM.unstable_batchedUpdates(() => {
        setCount1((count) => count + 1);
        setCount2((count) => count + 1);
      });
    });
  }, []);
  return (
    <>
      <div>count1： {count1}</div>
      <div>count2： {count2}</div>
    </>
  );
};

export default App;

这样就会每次更新状态组件只渲染一次了，最后提示一下 unstable_batchedUpdates 是同步代码。

实现思想

在代码阅读之前有必要说下它的设计实现思想是啥子。

在使用 redux 的时候，我们更新可能是通过 dispatch 这样的一个函数来完成，但是有没有其他方式呢？ES6 引入了 proxy 可以对对象的值进行劫持，每次更新都可以获取到对应的 key 和 value。

事实上在 Vue2 中也可以通过监听属性的 seter 来实现监听，虽然效果不完整。

试着定义一个 store

js 复制代码 
export const store = { a: 123, b: 456 };

在组件中分别使用

js 复制代码 
// 组件 A
const {a} = store;

// 组件B
const {a,b} = store;

更新方式也很简单，直接更改 store 属性就行，例如：

js 复制代码 
// 组件 A 和 B 都得到更新
store.b = 'b';

那么要怎么实现上述我们定义的这样一个使用方式呢？

作者是通过 proxy 每次 get 的时候自动把对应的 key 值保存到 map 键名，而对应的 setState 作为 value，例如在组件 A 和 B 它们可能是这样储存的。

js 复制代码 
// 组件 A
const [a, setA] = useState(store.a);
// 组件 B
const [a, setA] = useState(store.a);
const [b, setB] = useState(store.b);
// map
const listenerMap = {
  a: [setA, setA],
  b: [setB],
};

之后监听修改的属性，如果有更新直接调用对应 key 下的 setState 就可以做到更新。

js 复制代码 
// 假设更新 A
listenerMap.a.forEach((setA) => setA(store.a));

源码分析

作者是通过 TypeScript 来实现的，但是这里关注具体的实现，对于类型直接删除了，如果有需要小伙伴可以自行去阅读。

因为代码量不是很大，所以这里直接通过贴代码+注释的形式来进行讲解。

js 复制代码 
// 这里因为是状态库，需要考虑不同的 React 版本，React18 可以直接 import React 来获取 useSyncExternalStore
import { useSyncExternalStore } from 'use-sync-external-store/shim';

// 判断是否为开发环境
const __DEV__ = process.env.NODE_ENV !== 'production';

// 判断是否为对象， {} 这样的，通用的 map、set 之类的对象都统统不可以
const isObj = (val) => {
  return Object.prototype.toString.call(val) === '[object Object]';
};

// 这里是一个标识符后面讲解
let isGetStateInMethod = false;

let run = (fn) => {
  fn();
};

const resso = (obj) => {
  // 初始检查
  if (__DEV__ && !isObj(obj)) {
    throw new Error('object required');
  }

  /*
   * 它储存的形式为 {[key:string]: Set()}
   */
  const state = {};
  /*
   * 它储存的形式为 {key: Function}
   */
  const methods = {};

  Object.keys(obj).forEach((key) => {
    const initVal = obj[key];
    // 给 methods 添加属性
    if (initVal instanceof Function) {
      methods[key] = (...args) => {
        isGetStateInMethod = true;
        const res = initVal(...args);
        isGetStateInMethod = false;
        return res;
      };
      return;
    }
    // 给 state 添加属性
    const listeners = new Set();

    state[key] = {
      // 添加 getSnapshot 到 listeners
      subscribe: (listener) => {
        listeners.add(listener);
        return () => listeners.delete(listener);
      },
      // 数据快照
      getSnapshot: () => obj[key],
      // 更新方法
      setSnapshot: (val) => {
        if (val !== obj[key]) {
          obj[key] = val;
          run(() => listeners.forEach((listener) => listener()));
        }
      },
      useSnapshot: () => {
        return useSyncExternalStore(
          state[key].subscribe,
          state[key].getSnapshot,
          state[key].getSnapshot
        );
      },
    };
  });

  const setState = (key, val) => {
    // 只更新初始 obj 定义属性
    if (key in obj) {
      if (key in state) {
        // 判断是属性更新还是函数调用更新
        const newVal = val instanceof Function ? val(obj[key]) : val;
        // 调用上文的 setSnapshot
        state[key].setSnapshot(newVal);
      } else if (__DEV__) {
        throw new Error(`\`${key}\` is a method, can not update`);
      }
    } else if (__DEV__) {
      throw new Error(`\`${key}\` is not initialized in store`);
    }
  };

  return new Proxy(() => undefined, {
    get: (_target, key) => {
      if (key in methods) {
        return methods[key];
      }
      // 重点讲下这段代码，首先判断是否为 state，也就是上文中初始传递的对象非函数部分
      if (key in state) {
        // 这里判断是否 isGetStateInMethod 主要是因为可能存在在 methods 中来引用 store 中的属性，所以如果是这种情况直接返回
        if (isGetStateInMethod) {
          return obj[key];
        }
        // 这里从外部拿到对应的值返回，如果不是在最外层使用（React 限制，不可以在回调之类的函数内使用use之类方法，这里直接返回 obj 下的值）
        try {
          return state[key].useSnapshot();
        } catch (err) {
          return obj[key];
        }
      }
      if (__DEV__) {
        if (key !== 'prototype' && key !== 'name' && key !== 'displayName') {
          throw new Error(`\`${key}\` is not initialized in store`);
        }
      }
    },
    // 这里监听属性变动，例如这种形式调用更新 store.count = 60;
    set: (_target, key, val) => {
      setState(key, val);
      return true;
    },

    /* 
    * apple是指函数调用，官方文档是支持下面这种形式来更新的
    * store({ count: 60, text: 'world' });
    * 参数分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组
    * 这里之所以解构成 [firstArg, oneAction] 形式是因为，除了上面这种方式还可以
      store('count', (prev) => prev + 1); 
      store((prev) => ({
        count: prev.count + 1,
        text: prev.text === 'hello' ? 'world' : 'hello',
      }));
    */
    apply: (_target, _thisArg, [firstArg, oneAction]) => {
      // store('count', (prev) => prev + 1);
      if (typeof firstArg === 'string') {
        setState(firstArg, oneAction);
        return;
      }
      // store({ count: 60, text: 'world' });
      if (isObj(firstArg)) {
        const newObj = firstArg;
        Object.keys(newObj).forEach((key) => {
          setState(key, newObj[key]);
        });
        return;
      }
      //  store((prev) => ({
      //   count: prev.count + 1,
      //   text: prev.text === 'hello' ? 'world' : 'hello',
      // }));
      if (typeof firstArg === 'function') {
        const newObj = firstArg(obj);
        Object.keys(newObj).forEach((key) => {
          setState(key, newObj[key]);
        });
      }
    },
  });
};

// 这里是给用户暴露配置，例如上面说的，你想要在异步代码中执行批量更新 unstable_batchedupdates
resso.config = ({ batch }) => {
  run = batch;
};

export default resso;

最后

这是一篇很早之前就想写的文章，一直拖到现在才完成，最后如果有理解错误或者文笔错误欢迎指出，同时有可以内推的岗位欢迎滴滴。

文章参考：

相关推荐
小镇程序员2 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒2 小时前
对 TypeScript 中函数如何更好的理解及使用？与 JavaScript 函数有哪些区别？
前端·javascript·typescript
瑞雨溪2 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背2 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M2 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc2 小时前
学习electron
javascript·学习·electron
想自律的露西西★3 小时前
用el-scrollbar实现滚动条，拖动滚动条可以滚动，但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳3 小时前
vue3:瀑布流
前端·javascript·vue.js
霍先生的虚拟宇宙网络4 小时前
webp 网页如何录屏？
开发语言·前端·javascript
温吞-ing4 小时前
第十章JavaScript的应用
开发语言·javascript·ecmascript
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿