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

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

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;

『翻译』设计 React 组件 API

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

提供最少的 API

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

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

『翻译』设计 React 组件 API

提供最少的 API

Categories

Archives

Recent

Tags

Recent

Tags

Your browser is out-of-date!