自从 React Hooks 发布以后,把逻辑从组件里抽出来就变得容易了。

这也是为什么现在写自己的 SoLiD 逻辑变得很简单了,用 React Hooks!然后写 LDFlex,完全不需要 SPARQL 知识,几乎不需要 JSON-LD 知识~

Ruben Verborgh 在 https://github.com/solid/react-components 里发布了大量的 Hooks,比如我下面介绍的用 Socket 监听服务器上文件更新的 Hooks:


注意,以下内容包含大量到源码的链接,请配合源码食用。


useLatestUpdate 里面使用了 UpdateTracker 这个类,传给 useLatestUpdate 的 URL 都会和一个 React.Dispatch(就是从 useState 里拿到的第二个变量 setLatestUpdate)一起传给 UpdateTracker。

它们被放进一个 Set() 里,类似:

{
 xxxURL: setLatestUpdate
}

然后 UpdateTracker 建立起一个到该 URL 的 host 部分(也就是 SoLiD 服务器的地址)的 WebSocket,一旦 onmessage (传来的 data 只是更新的文件的 URL,没有实际的文件内容)就看看拿到的这个 URL 在 Set() 里有没有对应的 React.Dispatch,如果有,就把一个 { timestamp: new Date(), url } 这样的对象丢进 React.Dispatch 里。

这样 useLatestUpdate 里的 latestUpdate 就会在我们订阅的 URL 对应的文件发生更新的时候也一起更新了。接着 useLatestUpdate 把 latestUpdate 返回。

<LiveUpdate /> 使用了 useLatestUpdate, 并把返回的值放进一个 React.Context 里面。

之后我们可能会把 <List /> 作为 <LiveUpdate /> 的子组件,List 辗转调用了 useLDflex,在 useLDflex 里面用 useLiveUpdate 来读取之前 <LiveUpdate /> 里面的那个 Context 里的值,并在每次值有更新的时候用 useEffect 来重新从服务器上取得文档的具体内容。


总结一下,我们是这样拿到推送的:

<LiveUpdate /> --[use]--> useLatestUpdate --[useEffect]--> UpdateTracker

React.Context

useLiveUpdate
Where
<List /> --[use]--> useLDflexList --[use]--> useLDflex --[useEffect]--> useLiveUpdate