🧿 将 React 变为 SolidJS，按需更新，再无 re-render

1. SolidJS 是啥？

我们都知道 SolidJS ，如果不知道，那你为啥要看这篇文章 (￣▽￣)"

我们都知道 SolidJS ，这是它的文档： https://www.solidjs.com/

简单来说，SolidJS 就是真正 "react" 版的 React ，完全按需更新（哪里不懂点哪里），哪里数据变化更新哪里。

比如一个组件：

function App() {
  const [value, setValue] = useState(0);
  return <div>{value}</div>;
}

React 是把 App 整个函数死去活来的调用（即 re-render ），而 SolidJS 则只更新 value 那一小块。

当然，SolidJS 中是这么写的：

function App() {
  const [value, setValue] = createSignal(0);
  return <div>{value()}</div>;
}

在 SolidJS 中， App 只在初始化时被调用一次，之后就不再执行。

所以 SolidJS 里的 JSX 相当于 "静态模板"，只用来描述 UI 而不会再次调用，更没有 diff 。

也就是说，随便在 App 里执行函数，随便在 JSX 里执行函数，都只触发一次。

2. 先声明一下

如何把 React 变为 SolidJS ？

当然不是把 solid-js 重命名 react，也不是手动操作 DOM 脱离 React 的逻辑去更新。

这里必须声明一下：

以下实现，完全是基于 React 的 API 做的，而不是用 DOM API 或 jQuery 来 hack 实现的，那样的话就失去了意义。

3. 如何实现呢？

1. 怎么只更新 `value()` 一小块？

这里是实现思路的核心所在，直接说了吧 —— 就是把 value() 变成一个组件。

是的，它展示的是数据，但它其实是一个组件。它是一个只返回数据的组件。

2. 为什么是 `value()` 而不是 `value`？

因为需要知道这里有一个数据，后续得更新，怎么知道呢？

根据 JS 语法，除了 state.value（监听 getter）或 value()（调用函数），别无他法。

这也是为什么 SolidJS 必须写成 value()，如果写成 value，神仙也不知道怎么去更新这个数据，因为在 "静态模板" 的实现方式下，函数不会再次运行。

3. 实现一个类似 `createSignal` 的 `useSignal`

我们希望实现一个 useSignal，类似 SolidJS 的 createSignal，返回 getter 和 setter 两个函数。

同时，getter 的返回得是一个组件。

function useSignal(val) {
  const valRef = useRef(val);
  const update = useRef();

  const Render = () => {
    const [value, setValue] = useState(valRef.current);
    update.current = setValue;
    return value;
  };

  const getter = () => {
    try {
      useState(); // 通过此 hack 获知数据是在 JSX 中，还是其它位置正常读取
      return <Render />;
    } catch (e) {
      return valRef.current;
    }
  };

  const setter = (newVal) => {
    valRef.current = newVal;
    update.current(newVal);
  };

  return [getter, setter];
}

上面是一个极简实现，但有问题，因为数据可能用在多处，而上文只能更新最后一处的数据。

4. 数据同步更新版 `useSignal`

用一个 listeners 数组将更新函数们收集起来，这样就行了。其实这也是 React 状态管理器们的实现思路。

function useSignal(val) {
  const valRef = useRef(val);
  const listeners = useRef([]);

  const Render = () => {
    const [value, setValue] = useState(valRef.current);

    useEffect(() => {
      listeners.current.push(setValue);
      return () => {
        listeners.current.splice(listeners.current.indexOf(setValue), 1);
      };
    }, []);

    return value;
  };

  return [
    () => {
      try {
        useState();
        return <Render />;
      } catch (e) {
        return valRef.current;
      }
    },
    (payload) => {
      listeners.current.forEach((listener) => {
        listener((prev) => {
          valRef.current =
            typeof payload === 'function' ? payload(prev) : payload;
          return valRef.current;
        });
      });
    },
  ];
}

上面已经是一个可用的实现。

写到这里，其实故事的核心已经讲完了。

但如果要真用于开发需求，还有很多未尽的事业。

4. 还要做什么？

如果要真的 "可用"，最起码还应该实现：

createEffect （用于监听数据更新）
createMemo （用于创建 computed 数据）
onMount （用于发送请求）
onCleanup （用于取消订阅）
如果数据是 object 或 array 怎么办？（这是最复杂的，上文其实只考虑了基本数据类型）
如何实现 JSX 中的三目表达式或函数调用？（三目或函数，都只在初始化执行一次，无法响应变化）
如何响应 HMR ？数据首次没出现在 JSX 中怎么办？组件 unmount 后如何取消订阅 ...

5. solid-react 登场

上面写了一堆问题，自然是准备好了答案 ... 这个答案就叫 solid-react。

上文提到的所有问题都解决了，若深入了解的话可以看源码。

☞ GitHub: https://github.com/nanxiaobei/solid-react

下面是 solid-react 的 API：

useSignal （对应 createSignal ，用于创建数据）
useUpdate （对应 createEffect ，用于监听数据更新）
useAuto （对应 createMemo ，用于创建 computed 数据）
useMount （对应 onMount ，用于发送请求）
useCleanup （对应 onCleanup ，用于取消订阅）
数据是 object 或 array （使用 proxy 处理此棘手情况）
Run （用于 JSX 中的三目表达式或函数，Run(() => fn(value())）

请注意 API 的命名，这也是有说法的：尽量不与已有 API 冲突（比如不直接命名为 useState useMemo，那样的话会让代码一团迷惑），同时还得保持足够的简洁（写起来不费事）和直观（理解起来不费事）。

具体 API 介绍请查看 README： https://github.com/nanxiaobei/solid-react 。

如此，已经可以覆盖大多数常见的开发场景，也就是可用于 "生产" 了。

6. 试试 solid-react

Demo: https://codesandbox.io/s/solid-react-rymhr6?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js

这里是一个 demo ，可以打开 console ，点击按钮试试，然后你就会发现：

组件再也不 re-render 了，React 完全变成了 SolidJS 式的按需更新！

useUpdate useAuto 也不需要 deps 之类的玩意，对其依赖都是自动获知。而且只有在依赖变化时，它们才再次执行。

是的，也就是可以摆脱 Hooks 了，什么 useCallback useMemo deps memo，会不会触发 re-render ，通通不需要了。

函数就是函数，对象就是对象，写在那里就不会再次新建了，完全不需要再包一层，随便给子组件 props 传递吧。

7. 还有什么？

solid-react 是一个实验项目，只是为了实现一个想法，而事实上实现的还不错。

solid-react 尽力做成了 "能力完备"，无论是发请求，还是监听数据，麻雀虽小（但很好吃），五脏俱全。

solid-react 是一个小东西，它可能会有缺陷，当然不能跟直接用 React 开发的成熟度对比，也不可能比。

solid-react 用于小 demo 项目肯定没问题，但未在大项目中实践过，它适合先用来玩一下，如果感兴趣的话。

solid-react 更像是一种理念，React 官方不可能走上这条路，但感谢开源，大可以自己在这条路上实验一下。

solid-react 为 "饱受 Hooks 写法困扰" 这一好几年也没消失的业界普遍困惑而努力（虽然我自己感觉 Hooks 还好）

solid-react 欢迎感兴趣的人一起尝试，创造出更多可能。

将 React 变成 SolidJS ，告别 Hooks ，告别 re-render ↓↓↓

https://github.com/nanxiaobei/solid-react

肯定有人想说，上面 solid-react 的 API 不就是 Hooks 吗？怎么告别 Hooks ！其实上面是为了兼容 React 和 solid-react 混用的情况 ... 是的，我连这种情况都考虑到了 🙈