React HOC 反向繼承實現 路由參數同步

sync-query

❄️

使用 React 高階組件，實現 React state 和 路由參數之間的同步

---

源碼地址

github.com/NeoYo/sync-…

安裝

yarn add sync-query

npm i --save sync-query

使用說明

TypeScript 裝飾器

import { SyncQueryFactory, syncQueryCb } from "sync-query";
 @SyncQueryFactory(['searchInput', 'pagination']) // 監聽到 searchInput 或 pagination 變化時同步到 URL query export class MyComponent extends Component {   @syncQueryCb(['searchInput']) // 監聽到 searchInput 變化時調用 fetch 函數  fetch() {  // network fetch...  } } 複製代碼

ES6 HOC

import { syncQueryHOC } from "sync-query";
 export class MyComponent extends Component {  fetch() {  // network fetch...  } }  export const MyComponentEnhance =  syncQueryHOC(  MyComponent,  ['searchInput', 'pagination'], // 監聽到 searchInput 或 pagination 變化時同步到 URL query  'fetch',  {  callbackDeps: ['searchInput'], // 監聽到 searchInput 變化時調用 fetch 函數  wait: 600, // 函數防抖，600ms  }  ); 複製代碼

注意: SyncQueryFactory 裝飾器工廠 和 syncQueryHOC 要放在離 MyComponent 最近的位置

API

syncQueryHOC

接收一個 React 組件，返回帶有同步 state 到路由參數功能的組件

syncQueryHOC(WrappedComponent, stateList: string[], callbackName?:string, config?:SyncQueryConfig): EnhanceComponent

• WrappedComponent: 被裝飾的原始組件
• stateList: 傳一個數組，state 中對應 key 的值會被監聽
• callbackName?: 監聽到變化時，觸發 effect 方法
• config?: SyncQueryConfig

  type SyncQueryConfig = {
   wait: number, // 函數防抖的等待時間， 單位 ms  callbackDeps?: string[], // callbackDeps 存放 state key 的數組，監聽到 state 中對應key 的 value 變化時，會調用 callback（網絡請求等）  // callbackDeps 沒有傳入時，默認監聽的內容等於 stateList  parser?: IQueryParser, // 解析器：用於將路由參數 query 解析到 state，默認是 JSON.parse  stringify?: IQueryStringify, // 生成器：用於生成 state 對應的 query 字符串，默認是 JSON.stringify } 複製代碼

SyncQueryFactory

SyncQueryFactory 裝飾器工廠， 在 typescript 中使用

SyncQueryFactory(stateList: string[], callbackName?:string, config?:SyncQueryConfig)

注意 類裝飾器工廠 SyncQueryFactory 和 方法裝飾器 syncQueryCb 能夠配合使用， 高階組件 syncQueryHOC 與前二者儘可能避免共用。

• stateList: 傳一個數組，state 中對應 key 的值會被監聽
• callbackName?: 監聽到變化時，觸發 effect 方法
• config?: SyncQueryConfig

  type SyncQueryConfig = {
   wait: number, // 函數防抖的等待時間， 單位 ms  callbackDeps?: string[], // callbackDeps 存放 state key 的數組，監聽到 state 中對應key 的 value 變化時，會調用 callback（網絡請求等）  // callbackDeps 沒有傳入時，默認監聽的內容等於 stateList  parser?: IQueryParser, // 解析器：用於將路由參數 query 解析到 state，默認是 JSON.parse  stringify?: IQueryStringify, // 生成器：用於生成 state 對應的 query 字符串，默認是 JSON.stringify } 複製代碼

代碼實現以下：

function SyncQueryFactory(stateList: string[], callbackName?:string, config?:SyncQueryConfig) {
 return function(WrappedComponent) {  return syncQueryHOC(WrappedComponent, stateList, callbackName, config);  } } 複製代碼

syncQueryCb

syncQueryCb 方法裝飾器，與 SyncQueryFactory 配合使用

syncQueryCb(callbackDeps?:string[])

• callbackDeps?: string[] callbackDeps 存放 state key 的數組，監聽到 state 中對應key 的 value 變化時，會調用 callback（網絡請求等）

使用示例：

import { SyncQueryFactory, syncQueryCb } from "sync-query";
 @SyncQueryFactory(['searchInput', 'pagination']) // 監聽到 searchInput 或 pagination 變化時同步到 URL query export class MyComponent extends Component {   @syncQueryCb(['searchInput']) // 監聽到 searchInput 變化時調用 fetch 函數  fetch() {  // network fetch...  } } 複製代碼