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

V2EX = way to explore

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

现在注册

已注册用户请登录

React

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

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

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

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

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