React HOC 反向继承实现 路由参数同步

1,099 阅读2分钟

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...
    }
}