使用装饰器自动取消订阅 React 组件中的 RxJS 流

最近自己的一个项目使用了 RxJS 进行状态管理, 需要在组件中订阅流来获取全局状态, 但是在组件卸载的时候需要手动取消订阅流.
这样写起来有点繁琐,所以考虑用装饰器简化下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import * as React from "react";
import { Subscription } from "rxjs";
import { action$, state$ } from "../store/store";

class Artist extends React.Component {
sub: Subscription;
handleClick() {
setInterval(() => {
action$.next((state: any) => state);
}, 1000);
}
componentDidMount() {
this.sub = state$.subscribe(v => {
console.log("artist", v);
});
}
componentWillUnmount() {
console.log("artist unsubscribe");
this.sub.unsubscribe();
}
render() {
return (
<div>
<button onClick={() => this.handleClick()}>Click Me</button>
</div>
);
}
}

export default Artist;

nginx 笔记

macos 安装

brew install nginx

然后它的默认配置存放于 /usr/local/etc/nginx/nginx.conf
默认网站托管文件存放于 /usr/local/Cellar/nginx/1.15.0/html

基本操作

启动

sudo nginx

『翻译』设计 React 组件 API

多年来,我注意到自己在处理组件 api 和构建应用程序和库方面有一系列模式。以下是一系列如何设计组件 api 的想法、观点和建议,这会让组件更灵活、更具有组合性、更容易理解。这些规则都不是硬性的,但它们帮助我想明白了如何组织和创建组件。

提供最少的 API

正如 React 库本身的目标是 最少化 API 一样,我建议在设计组件 API 时采用类似的观点。需要学习的新内容越少,其他人就越容易知道如何使用你创建的组件,从而使它们更可容易被重用。如果有人不理解你的组件 API,那么他们重复你的工作的可能性就会增加。这是我如何创建组件的核心理念,我发现在我工作中牢记它很有帮助。

装饰器学习

前言

一直觉得装饰器的写法有种蜜汁好感和好奇,例如 @component或者@connect(x, y)

装饰器在 React 和 Angular 中很常见,因为这两个框架很强调类,而装饰器的作用范围正是类和类成员,来看装饰器提案的一句话

Decorators make it possible to annotate and modify classes and properties at design time.

指出了装饰器作用对象,注意到最后三个单词 at design time, 再抄袭一句话

装饰器对类的行为的改变,是代码编译时发生的,而不是在运行时。这意味着,装饰器能在编译阶段运行代码。也就是说,装饰器本质就是编译时执行的函数

RxJS Subject 学习

Subject

其实一个 Observable 可以被订阅多次, 但是并不共享一个流的数据,如下例

1
2
3
4
5
6
let stream$ = Rx.of(1, 2, 3);
stream$.subscribe(r => console.log("a", r));

setTimeout(() => {
stream$.subscribe(r => console.log("b", r));
}, 110);

输出结果

1
2
3
4
5
6
a 1
a 2
a 3
b 1
b 2
b 3

RxJS 操作符笔记

RxJS 6

操作符

一些常用的操作符

  • of
  • from
  • first
  • last
  • tap
  • interval
  • timer
  • forkJoin
  • filter
  • map
  • switchMap
  • scan
  • takeWhile
  • takeUtil
  • take
  • concat
  • throttle
  • debounce
  • merge

of

将数字转化为 Observable

1
2
Rx.of("1", "2").subscribe(v => console.log(v));
// 输出 1, 2

JavsScript 函数式学习手记

高阶函数

  • map
  • filter
  • some
  • every
  • reduce
  • unary
  • once
  • pluck
  • pick
  • zip
  • flatten
  • merge
  • takeLast
  • uniq
  • omit
  • memoized
  • compose
  • pipe
  • debounce
  • throttle
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×