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

riyad

0 o3 M$ l) m* I
# c" e" v5 J& a- m5 r9 h

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

. A( B1 ]" o5 F% w# I8 h% r0 u安装pnpm
! N/ [9 n9 _1 d0 F& t

1. pnpm i @telegram-apps/signals

复制代码

npm

1. npm i @telegram-apps/signals

复制代码

yarn

1. yarn add @telegram-apps/signals
   $ {" \" n( O1 K, d: m

复制代码

Signal​

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

1. import { signal } from '@telegram-apps/signals';
   # K/ M! _+ P, N6 G! ]; {" ^
2. 
   & j# u- k6 g4 u' J- \( }$ U
3. const isVisible = signal(false);
   9 b* F% }& E0 N
4. 
   

复制代码

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

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

复制代码

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

# \( q  _  E/ C" b5 h" s/ C, v3 H

1. const s = signal(10, {
   
2.   equals(current, next) {
   / y# u) Z) N1 {* X: |
3.     // Will not update the signal if the next value is
   
4.     // higher than the current one.
   
5.     return next > current;
   
6.   }
   
7. });
   ( b3 i) X7 \+ n' \( F: @1 A
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) => {
   
2.   console.log('Value changed from', prev, 'to', current);
   
3. });
   
4. 
   9 T, q; E0 S: s6 K3 L- b  a  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);
   
3. }
   
4. 
   
5. isVisible.sub(listener, true);
   ( H0 n) O4 h; X2 e) [1 I
6. // or
   
7. isVisible.sub(listener, { once: true });

复制代码

" `7 K6 S6 y; Z4 W" a2 p# U# [
) k4 l5 b9 z3 tunsub​
6 ~) K! |4 B% O
- Q: \# c, ^1 u3 e; r' Y

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

1. function listener(current: boolean, prev: boolean) {
   
2.   console.log('Value changed from', prev, 'to', current);
   
3. }
   
4. 
   
5. isVisible.sub(listener);
   & ^* F' v' w; X1 r. j! N+ k5 j, w
6. 
   
7. // Remove the listener whenever needed.
   
8. isVisible.unsub(listener);

复制代码

$ O6 I. I- v5 T/ W4 [
unsubAll​
9 L. Y. G! \. x2 d
9 F% s2 S. `. b- A. K# b+ I& d

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

1. isVisible.unsubAll();

复制代码

INFO

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

8 A9 d8 A1 f& b2 m
  Q4 F- H7 m" F/ m8 `reset​
+ b8 R# U( j! I4 k8 z
" g0 x7 W  E7 k0 e* H6 B# G

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

1. import { signal } from '@telegram-apps/signals';
   # n) e# ^* |4 K4 N& J
2. const isVisible = signal(false);
   
3. isVisible.set(true); // isVisible becomes true
   
4. isVisible.reset(); // isVisible becomes false again

复制代码

4 y2 k3 U1 j9 h" Ddestroy​

; R$ i. Y1 k7 A, T9 s1 G

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

1. isVisible.destroy();

复制代码

Computed​

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

这里有一个例子：

1. import { signal, computed } from '@telegram-apps/signals';
   2 ?! k* W  H4 [" o; z# t- R/ e
2. 
   
3. const a = signal(2);
   
4. const b = signal(2);
   $ ?& p, {1 M; Q5 s8 \+ B
5. const sum = computed(() => a() + b()); // 4
   
6. 
   
7. a.set(5); // sum becomes 7
   
8. b.set(5); // sum becomes 10

复制代码

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

1 ]4 X7 n; j# H- v0 q批量更改​

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

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

1. <blockquote><font size="3">import { signal, computed, batch } from '@telegram-apps/signals';
   4 e( h4 D3 I# h0 T5 v3 h/ D* v3 Y+ q
2. 
   ; f# V) Z1 ]/ u8 l4 F* x5 N; ~0 I9 }! f
3. const a = signal(1);
   5 I  B/ c& i- ]# h& {
4. const b = signal(2);
   ; D$ C! A* I( }6 v$ B9 i6 I
5. const c = signal(3);
   ! @* P3 f+ N+ I
6. const sum = computed(() => a() + b() + c()); // 6
   3 T% ?# U3 U  B7 Q
7. 
   
8. // Without batching, re-computation happens 3 times:
   ! J! w8 p! N3 V& l) C3 r' e& l
9. a.set(2); // sum recomputes and becomes 7
   # V0 n0 k; f0 y. r; n6 K, T# o1 g
10. b.set(3); // sum recomputes and becomes 8
    
11. c.set(4); // sum recomputes and becomes 9
    
12. 
    
13. // Reset each signal.
    5 t+ H. P2 A' X5 f1 ~/ M6 ~
14. a.reset();
    
15. b.reset();
    
16. c.reset();
    
17. // Note: reset calls the set method, which also causes
    - [) \5 W$ G  ~  p
18. // the sum signal to recompute.
    / n5 P0 J' t( \
19. 
    / r- P( a, k) \% C4 u. b
20. // Now, let's optimize using the batch function:
    $ f; x) n2 d. U
21. batch(() => {
    
22.   a.set(2);
    ! t8 e" [) X0 |+ n7 i
23.   b.set(3);
    
24.   c.set(4);
    
25. });
    
26. // At this point, sum will recompute only once because
    
27. // batch causes the sum signal to wait for the function to complete,
    8 I) Q+ p* v7 `# Q% w
28. // and then it triggers the recomputation.
    4 s& K" L, T( S3 S! y
29. console.log(sum()); // 9</font>

复制代码

! I2 I/ W9 `: l% F0 e: e$ G2 s

& c# s! _9 p3 w( m' i5 j% x


- p( x5 q& d- ^
: e. K' [* V, p' i% }2 j1 f