useWatch

关于

useWatch函数用来侦听store对象的变化并返回一个值作为计算状态,当组件销毁自动取消订阅，本质上是对store.watch的封装。

useWatch函数签名如下：

export type UseWatchGetter<Value,DependValue> = (operate:StateOperate<DependValue>)=>Value | undefined | Promise<Value | undefined>
export type UseWatchSetter<Value> = (value:Value)=>void
export type UseWatchOptions<Value> = WatchListenerOptions & { 
    initial?:Value         // 提供初始值    
}

export interface UseWatchType<State extends Dict> {
    <Value=any,DependValue=any>(
        selector: ObjectKeyPaths<ComputedState<State>>,
        getter:UseWatchGetter<Value,DependValue>,
        options?:UseWatchOptions<Value>
    ): [Value,UseWatchSetter<Value>]
    <Value=any,DependValue=any>(
        selector: string[],
        getter:UseWatchGetter<Value,DependValue>,
        options?:UseWatchOptions<Value>
    ): [Value,UseWatchSetter<Value>]
    <Value=any,DependValue=any>(
        getter:UseWatchGetter<Value,DependValue>,
        options?:UseWatchOptions<Value>
    ): [Value,UseWatchSetter<Value>]
}

• 使用方法与store.watch一致，只是useWatch函数会在组件销毁时自动取消订阅。
• getter函数可以返回一个值作React状态

基本用法

同样的diray检测功能实现如下:

• useWatch创建的侦听会在组件销毁时自动取消订阅，不需要手动取消订阅。
• useWatch不会创建WatchObject.
• useWatch的getter函数可以返回一个值作为React状态，该状态会在selector所指向的状态变化后自动更新。
• 如果没有指定selector，则会侦听store对象的所有变化。

提示

useWatch会在组件销毁时自动取消订阅，不需要手动取消订阅。