知乎 · 2021 上半年

专门去翻了下两个开源项目的 git commit history。

next.js 在 10 月 25 号的「发布」实际上是将 1.0 版本开源出来，而实际该项目最早的 commit 是在 10 月 6 号：

vercel/next.js

而题主说的 nuxt.js 在 10 月 26 号的「发布」实际上只是作者创建了 GitHub 仓库而已，nuxt.js 的第一个可用的原型完成的时间是在半个月后的 11 月 7 号，而且可以看出很多代码中有参考了 next.js 的痕迹：

nuxt/nuxt.js

所以，可以推测出 nuxt.js 的作者 Sébastien Chopin 在 next.js 开源出来后没多久就萌生了给 vue.js 复刻一个 next.js 的计划，随后就立马创建了 nuxt.js 这个仓库。

此处引用 @buhi 的回答：

一句话，react context是给你注入服务的，不是让你注入数据的，如果要注入具有数据的服务那你就注入个类似EventEmitter的东西，例如rxjs observable

其实，我们可以把目光放到隔壁 UI 构建方式和 React 差不多的 Flutter 身上，作为新浪潮它提供了一些新的思路，我们来看看 Flutter 下是怎么实现遥远组件间的状态共享的：

首先，Flutter 和 React 一样拥有类似 Context/Provider 的组件和接口：InheritedWidget，都能在组件树上很方便的共享数据，而无需通过 props 一层层往下传。

然后，Flutter 大部分官方组件都提供了一个叫做 Widget Controller 的东西，它的作用其实就有点类似上面 @buhi 提到 EventEmitter（在 Flutter 中的具体实现被叫做 ChangeNotifier），它使用了 观察者模式来分发数据/事件给监听的组件，从而实现 在组件以外对组件内的状态进行控制。

在 React 下还原一下 Controller 的大概实现（部分为伪代码）：

type Listener = (title: string) => void;

class Controller {
  private _listeners = new Array<Listener>();

  public addListener(listener: Listener) {
    this._listeners.push(listener);
  }

  public removeListener(listener: Listener) {
    this._listeners.remove(listener);
  }

  public updateTitle(title: string): void {
    for (const listener of this._listeners) {
      listener(title);
    }
  }
}

const Component: React.FC<{ controller: Controller }> = ({ controller }) => {
  const [title, setTitle] = useState<string>();

  const listener = useCallback((newTitle: string) => {
    setTitle(newTitle);
  }, [setTitle]);

  useEffect(() => {
    controller.addListener(listener);
    return () => {
      controller.removeListener(listener);
    };
  }, [controller, listener]);

  return <>{title}</>;
};

可以看出：

1. 核心是观察者模式，Controller 是发布者，Component 是观察者（并且允许多个观察者观察一个发布者）
2. Controller 可以触发组件内的 setState
3. 组件内通过 useEffect hook 来在确保仅在挂载周期内对 Controller 进行监听

当我们有了 Controller 这种能对组件内状态进行控制的「代理」，那我们就可以结合 Context 把它分享出去，从而实现遥远组件之间的相互控制了。

我们只需保证 Controller 的实例不变（避免触发整个 Provider 树的更新），而当我们想要改变监听组件的内部 state 时，只需调用 Controller 实例内的 notify 方法（例如上例中的 updateTitle）即可。

当然，上面只是一个最小的例子，如果你对这种状态控制/分享方法感兴趣的话，可以看看鄙人封装的 hook：

nekocode/use-shared-state

目前已在多个生产项目中使用，效果十分满意：对比其他社区流行方案代码更羽量级且几乎无性能损耗，支撑起了我们大部分需要状态控制/分享的场景

（号外：仓库已被知名写作 App 「Typora」的作者 Star 了～

只说点自己的看法。最近尝试用 airtable 来给小项目提供 api 充当 backend，结果非常满意。对于很多简单的业务来说，一个在线电子表格（可以类比数据库）确实就够了。

===== 2021/05/09 补充 =====

airtable 的优势在于很多简单业务的数据关系确实用一个 excel 表格就能表示了（仔细想想，实际上 excel 的表达能力极强的，有多少传统行业的日常离不开它

另外就是它提供了丰富但又简单的 GUI，就连是非开发人员都可以很轻松地用在线表格操作「数据库」，而开发人员也由于无需开发 admin panel 节省了很多开发成本