更新了 router-as-view 元件

題葉發表於2016-09-23
View元件

有點老調重彈了, 寫短一點, 這篇文件介紹一下 router-as-view 元件的改進.
元件前身是在簡聊當中使用的 router-view 元件, 獨立實現的路由,
由於我重構了的簡聊 Store 方案, 發現路由存在私有狀態, 於是設計了這個方案.
後來簡聊停在了那個版本, GitHub 上的程式碼也就大概鎖死了,
所以最近我重新命名了元件為 router-as-view 以便以後使用:
https://github.com/react-chin…
Demo 也更新了, 可以直接點選檢視:
http://repo.react-china.org/r…

巢狀路由, 巢狀資料

這次修改主要改變的是路由的資料表示, 比如這個地址:

/team/23/room/34

我定義的路由規則是這樣的, key 是名字, value 是引數, 可能有多個引數:

rules = Immutable.fromJS {
  home: []         # means / or /home
  demo: []         # means /demo
  team: [`teamId`] # means /team/:teamId
  room: [`roomId`] # means /room/:roomId
  `中文`: [`中文`]   # means /中文/:中文
}

然後解析路由時會按匹配名字, 再匹配引數個數, 然後生成巢狀的路由資料:

{
  "router": {
    "name": "team",
    "data": {
      "teamId": "23"
    },
    "query": {},
    "router": {
      "name": "room",
      "data": {
        "roomId": "34"
      },
      "query": {}
    }
  }
}

原先在簡聊用的路由資料是一層的, 巢狀路由的情況在頂層判斷並不方便.
現在是巢狀的 router, 那麼父級路由直接就包含自路由了, 方便一些.
其他方面大概沒什麼改變, 主要還是為了擴充套件路由的靈活性.

增加的缺點

也帶來一些問題, 就是要求路由比如有對應的資料,
一個是 / 路由, 另一個是 404 的處理上.
/ 是一個特殊的路由, 沒有任何欄位可用於判斷, 所以我強制對映到和 /home,
或者說 /home 有些情況也要被對映成 /, 有點強制性..
而 404 表示的是”找不到目標”, 那麼, 所有找到不的路由就自動 404 了,
比如說父級路由找到了, 然後再匹配卻找不到, 就是一個很自然的 404.

對於強迫症來說, 強制設定這麼多規則是有問題的,
而且從靈活性上考量, 這比起其他的路由方案也增加了一些約束,
react-router 其實用的蠻漂亮的辦法解決了巢狀路由的問題,
只是說它看起來太像是私有狀態了, 我對它不信任.

小結

除了 router-as-view, 還有個 actions-in-recorder 也放出了,
以後寫 React 我還是想用這套方案, 實在不行再用 Redux,
所以這些元件後面會繼續維護, 保證我自己的程式碼沒有問題.

相關文章