Telegram 小程序 | TypeScript @telegram-apps/signals

riyad

7 p2 U6 N+ H9 y' s3 E3 p! e
. ]2 U2 J+ h8 O1 u5 O

我们在整个 @telegram-apps 软件包中使用的 signals 实现。

安装pnpm

1. pnpm i @telegram-apps/signals

复制代码

npm
' ^, f/ Z' Z" k/ _- T$ R

1. npm i @telegram-apps/signals

复制代码

yarn

1. yarn add @telegram-apps/signals
   

复制代码

' j1 o" q" w( T. Z& ySignal​

signal 函数是最简单的 signal 构造函数，被其他软件包函数所使用。 要 创建新 signal，只需传递初始值即可：

1. import { signal } from '@telegram-apps/signals';
   1 L, r; Z) J! u' [
2. 
   7 \; ^. |( I/ s" @
3. const isVisible = signal(false);
   % S! x9 R( H( T
4. 
   ; f: Q" ~; i, E% v4 d# d# G# M1 d7 A

复制代码

返回值代表一个具有实用方法的函数。 函数本身返回 当前信号值。

1. console.log('The element is', isVisible() ? 'visible' : 'invisible');
   

复制代码

该函数还接受选项作为第二个参数。 开发人员可以指定 equals 函数，该函数接受当前值和输入值，如果认为它们相等，则返回 true， 。

* O& i6 K, g1 H

1. const s = signal(10, {
   
2.   equals(current, next) {
   - G0 L$ u! s( C/ X3 x
3.     // Will not update the signal if the next value is
   
4.     // higher than the current one.
   
5.     return next > current;
   
6.   }
   
7. });
   # g/ C* g4 D, T" c: ]- ]1 K  T6 ~
8. s.set(20); // will not update the signal
   
9. s.set(5); // will update the signal

复制代码

set​

要设置新值，请使用 set 方法：

1. isVisible.set(true);

复制代码

sub​

要跟踪信号变化，请使用 sub 方法。 它返回一个函数，用于移除绑定的 监听器。 监听器接受两个参数：当前值和上一个值。

1. const removeListener = isVisible.sub((current, prev) => {
   5 c0 Q& j2 x& w/ H, f# P
2.   console.log('Value changed from', prev, 'to', current);
   
3. });
   
4. 
   8 O: a& y8 j' P+ \0 j; N
5. // Remove the listener whenever needed.
   
6. removeListener();

复制代码

要只调用监听器一次，请使用第二个：

1. function listener(current: boolean, prev: boolean) {
   
2.   console.log('Value changed from', prev, 'to', current);
   ' c& j) D- o0 Y% b, F
3. }
   + @* W4 }9 _- e) M3 ?* B
4. 
   0 W& ~- e+ ]% h, d) }" _  ^
5. isVisible.sub(listener, true);
   8 W9 r: u. x! f/ A" v. K
6. // or
   
7. isVisible.sub(listener, { once: true });

复制代码

unsub​
8 r$ ]7 U" o3 v4 G$ n- p) B
+ y% h9 ?& q2 P; c4 H+ m

另外，要移除监听器，开发人员可以使用 unsub 方法：

1. function listener(current: boolean, prev: boolean) {
   $ ]; {3 b4 D& u6 Q9 R
2.   console.log('Value changed from', prev, 'to', current);
   / X6 I( \: f" o( K: O
3. }
   
4. 
   3 D7 A) K# E& I5 l, Q) M, h
5. isVisible.sub(listener);
   
6. 
   + @3 w& _2 n. [  K8 o, u( A
7. // Remove the listener whenever needed.
   ; g* y: k4 p  h
8. isVisible.unsub(listener);

复制代码

8 l$ G2 L, O; M
unsubAll​
7 D" X$ ^1 h$ F
$ }+ R7 _& G7 ~% r6 a

要移除所有监听器，请使用 unsubAll 方法：

1. isVisible.unsubAll();

复制代码

INFO

此方法不会移除计算信号添加的监听器。

reset​

9 X1 ~$ [0 w) l( r, J

要恢复到最初指定的值，请使用 reset 方法：

1. import { signal } from '@telegram-apps/signals';
   
2. const isVisible = signal(false);
   
3. isVisible.set(true); // isVisible becomes true
   5 {  [; z/ A# M8 S2 v
4. isVisible.reset(); // isVisible becomes false again

复制代码

destroy​

7 _0 }  I: h1 ?3 e% l% l( r

当不再需要该信号且该信号没有被任何计算信号监听时，开发者 可以使用 destroy 方法强制移除所有监听者：

1. isVisible.destroy();

复制代码

% \1 `7 ^; I. p0 {. c5 w

: E9 L$ t0 O9 t* X" QComputed​
8 x/ @4 k% w2 r. Q
$ x6 E& c1 Z/ \5 E# f) W

computed 函数构建了一个计算 signal，当被调用signal的任何 发生变化时，该 signal 会自动重新计算。

这里有一个例子：

1. import { signal, computed } from '@telegram-apps/signals';
   
2. 
   9 U- N! z4 e. E5 g# ~/ [
3. const a = signal(2);
   8 o, c2 E0 y* D% y! d) P
4. const b = signal(2);
   
5. const sum = computed(() => a() + b()); // 4
   
6. 
   
7. a.set(5); // sum becomes 7
   
8. b.set(5); // sum becomes 10

复制代码

返回值代表一个缺少 set 和 reset 方法的信号。

批量更改​

batch 函数创建一个作用域，在此对 signal 突变进行批处理。

当开发人员希望防止计算 signal 在几个 相关 signal 连续变化时重新计算时，该功能非常有用。

1. <blockquote><font size="3">import { signal, computed, batch } from '@telegram-apps/signals';
   
2. 
   8 L( f/ n/ p! ?& L, F
3. const a = signal(1);
     U, j& y% `/ b2 V9 ], ?
4. const b = signal(2);
   
5. const c = signal(3);
   7 g  I* Z) _+ I) m4 I) ?
6. const sum = computed(() => a() + b() + c()); // 6
   
7. 
   9 g- M) A! ^1 e/ R2 i
8. // Without batching, re-computation happens 3 times:
   
9. a.set(2); // sum recomputes and becomes 7
   
10. b.set(3); // sum recomputes and becomes 8
    
11. c.set(4); // sum recomputes and becomes 9
    % s. P2 U5 _  N3 C) r5 t
12. 
    * v% ^5 n& B% W3 T. x- f4 \/ ~
13. // Reset each signal.
    
14. a.reset();
    # T6 U+ C, K" q
15. b.reset();
    
16. c.reset();
    9 r5 ]. T# I/ ~$ Y) W) F2 H
17. // Note: reset calls the set method, which also causes
    ( M& _( \4 C$ T: X* q2 W
18. // the sum signal to recompute.
    
19. 
    
20. // Now, let's optimize using the batch function:
    1 Y. C; P/ O9 q1 q0 O
21. batch(() => {
    
22.   a.set(2);
    
23.   b.set(3);
    
24.   c.set(4);
    
25. });
    ; T& A' ]# V. c: C5 u
26. // At this point, sum will recompute only once because
    5 ?  t% i" s) P+ a9 O  F
27. // batch causes the sum signal to wait for the function to complete,
    8 T  c, N% k6 _( f- @7 G/ e
28. // and then it triggers the recomputation.
    ! X! c) a: d5 m9 |& K
29. console.log(sum()); // 9</font>

复制代码

7 P) k" G7 J7 f. q; q5 Q7 C

" g* Q2 z. S1 n  P% M0 T
  C1 H. D3 Y3 ^/ q! `0 F6 t