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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 968 天前的主题，其中的信息可能已经有所发展或是发生改变。

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;
        });
      });
    },
  ];
}

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

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

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