solid.js响应式createSignal 源码解析_vue.js_

// packages/solid/src/reactive/signal.ts export interface BaseOptions { name?: string; } export interface EffectOptions extends BaseOptions {} export interface MemoOptions extends EffectOptions { equals?: false | ((prev: T, next: T) => boolean); } export type Accessor = () => T; export type Setter = (undefined extends T ? () => undefined : {}) & ((value: (prev: T) => U) => U) & ((value: Exclude) => U) & ((value: Exclude | ((prev: T) => U)) => U); 

// packages/solid/src/reactive/signal.ts export type Signal = [get: Accessor, set: Setter]; export interface SignalOptions extends MemoOptions { internal?: boolean; } export function createSignal(): Signal; export function createSignal(value: T, options?: SignalOptions): Signal; 

// packages/solid/src/reactive/signal.ts export function createSignal(value?: T, options?: SignalOptions): Signal { options = options ? Object.assign({}, signalOptions, options) : signalOptions; const s: SignalState = { value, observers: null, observerSlots: null, comparator: options.equals || undefined }; if ("_SOLID_DEV_" && !options.internal) s.name = registerGraph(options.name || hashValue(value), s as { value: unknown }); const setter: Setter = (value?: unknown) => { if (typeof value === "function") { if (Transition && Transition.running && Transition.sources.has(s)) value = value(s.tValue); else value = value(s.value); } return writeSignal(s, value); }; return [readSignal.bind(s), setter]; } 

// packages/solid/src/reactive/signal.ts export const equalFn = (a: T, b: T) => a === b; const signalOptions = { equals: equalFn }; 

const [object, setObject] = createSignal({ count: 0 }); createEffect(() => { console.log(object()); }); object().count = 2; setObject(object); setObject(current => { current.count += 1; current.updated = new Date(); return current; }); // { count: 0 } 

const [object, setObject] = createSignal({ count: 0 }, { equals: false }); // { count: 0 } // { count: 2 } // { count: 3, updated: 2022-09-11T08:21:44.258Z } 

// packages/solid/src/reactive/signal.ts export interface SignalState { value?: T; observers: Computation[] | null; observerSlots: number[] | null; tValue?: T; comparator?: (prev: T, next: T) => boolean; name?: string; } export function createSignal(value?: T, options?: SignalOptions): Signal { options = options ? Object.assign({}, signalOptions, options) : signalOptions; const s: SignalState = { value, observers: null, observerSlots: null, comparator: options.equals || undefined }; if ("_SOLID_DEV_" && !options.internal) s.name = registerGraph(options.name || hashValue(value), s as { value: unknown }); const setter: Setter = (value?: unknown) => { if (typeof value === "function") { if (Transition && Transition.running && Transition.sources.has(s)) value = value(s.tValue); else value = value(s.value); } return writeSignal(s, value); }; return [readSignal.bind(s), setter]; } 

// packages/solid/src/reactive/signal.ts if ("_SOLID_DEV_" && !options.internal) s.name = registerGraph(options.name || hashValue(value), s as { value: unknown }); 

// packages/solid/rollup.config.js export default [ { input: "src/index.ts", // ... plugins: [ replace({ '"_SOLID_DEV_"': false, preventAssignment: true, delimiters: ["", ""] }) ].concat(plugins) } ] 

// packages/solid/src/reactive/signal.ts export function createSignal(value?: T, options?: SignalOptions): Signal { // ... const setter: Setter = (value?: unknown) => { if (typeof value === "function") { if (Transition && Transition.running && Transition.sources.has(s)) value = value(s.tValue); else value = value(s.value); } return writeSignal(s, value); }; return [readSignal.bind(s), setter]; } 

// packages/solid/src/reactive/signal.ts // Internal export function readSignal(this: SignalState | Memo) { const runningTransition = Transition && Transition.running; if ( (this as Memo).sources && ((!runningTransition && (this as Memo).state) || (runningTransition && (this as Memo).tState)) ) { if ( (!runningTransition && (this as Memo).state === STALE) || (runningTransition && (this as Memo).tState === STALE) ) updateComputation(this as Memo); else { const updates = Updates; Updates = null; runUpdates(() => lookUpstream(this as Memo), false); Updates = updates; } } if (Listener) { const sSlot = this.observers ? this.observers.length : 0; if (!Listener.sources) { Listener.sources = [this]; Listener.sourceSlots = [sSlot]; } else { Listener.sources.push(this); Listener.sourceSlots!.push(sSlot); } if (!this.observers) { this.observers = [Listener]; this.observerSlots = [Listener.sources.length - 1]; } else { this.observers.push(Listener); this.observerSlots!.push(Listener.sources.length - 1); } } if (runningTransition && Transition!.sources.has(this)) return this.tValue; return this.value; } 

// packages/solid/src/reactive/signal.ts export function readSignal(this: SignalState | Memo) { // ... if (Listener) { const sSlot = this.observers ? this.observers.length : 0; if (!Listener.sources) { Listener.sources = [this]; Listener.sourceSlots = [sSlot]; } else { Listener.sources.push(this); Listener.sourceSlots!.push(sSlot); } if (!this.observers) { this.observers = [Listener]; this.observerSlots = [Listener.sources.length - 1]; } else { this.observers.push(Listener); this.observerSlots!.push(Listener.sources.length - 1); } } if (runningTransition && Transition!.sources.has(this)) return this.tValue; return this.value; } 

// packages/solid/src/reactive/signal.ts let Listener: Computation | null = null; let Updates: Computation[] | null = null; let Effects: Computation[] | null = null
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：微信小程序全局数据共享和分包图文详解_javascript技巧_
                                                                
下一篇：详解vue的Des加密解密_vue.js_