[关闭]
@bornkiller 2017-08-12T11:17:38.000000Z 字数 8972 阅读 3330

Reactive 视角审视 React 组件

React

前言

React 问世已久，笔者方才入坑。先于 React，笔者在实际项目中，引入了 redux，rxjs，所以目前实际开发中，大量使用 rxjs 践行 reactive programming，此文带来个人视角的组件状态管理。

状态管理

React 本身作为 view 层，执行从数据到 DOM 的转换，对于开发来说，主要工作在于维护状态。redux 实现的集中式状态管理，可能算是 React 生态圈事实标准，笔者一直持保留态度，是否引入需考虑实际需求，谋定而后动。本文中，笔者使用 rxjs 处理组件级别的状态管理。

首先实现简单的时间组件，呈现当前格式化时间：

  1. /**
  2.  * @description - Count component implement
  3.  * @author - huang.jian <hjj491229492@hotmail.com>
  4.  */
  5. // External
  6. import format from 'dateformat';
  7. import React, { Component } from 'react';
  8. import { Alert, Card } from 'antd';
  9. import { Observable } from 'rxjs/Observable';
  10. import 'rxjs/add/observable/interval';
  11. import 'rxjs/add/operator/map';
  12. // Internal
  13. // Component
  14. const readableTimeFormat = 'yyyy-mm-dd HH:MM:ss:l';
  16. export class Counter extends Component {
  17.   constructor(props) {
  18.     super(props);
  19.     this.state = {
  20.       timestamp: Date.now()
  21.     };
  22.   }
  24.   componentWillMount() {
  25.     this.state$ = Observable.interval(1000).map(() => ({ timestamp: Date.now() }));
  26.   }
  28.   componentDidMount() {
  29.     this.subscription = this.state$.subscribe((state) => {
  30.       this.setState(state);
  31.     });
  32.   }
  34.   componentWillUnmount() {
  35.     this.subscription.unsubscribe();
  36.   }
  38.   render() {
  39.     return (
  40.       <Card title="React Count">
  41.         <Alert message={`React Count: ${format(this.state.timestamp, readableTimeFormat)}`} type="success"/>
  42.         <Alert message={`React Count: ${format(this.state.timestamp, readableTimeFormat)}`} type="info"/>
  43.         <Alert message={`React Count: ${format(this.state.timestamp, readableTimeFormat)}`} type="warning"/>
  44.       </Card>
  45.     );
  46.   }
  47. }

image.png-19.8kB

笔者当前使用习惯，是利用 Component lifecycle 处理可观察对象声明，订阅，退订操作。在 componentWillMount 内部声明可观察对象，出于一致性考量，整个组件的状态归并为 state$，在 componentDidMount 内部订阅 state$，订阅名统一为 subscription，在 componentWillUnmount 内部退订可观察对象，订阅，退订降级为模板代码，核心将组件的状态变换为可观察对象。

  1. // Declaration
  2. this.state$ = Observable.interval(1000).map(() => ({ timestamp: Date.now() }));
  4. // Subscribe
  5. this.subscription = this.state$.subscribe((state) => {
  6.   this.setState(state);
  7. });
  9. // Unsubscribe
  10. this.subscription.unsubscribe();

上述案例状态非常简单，不存在 Network, DOM 等存在 side effect 的操作，处理 side effect，redux 通过 middleware 来实现，笔者之前使用过 redux-thunk，redux-promise，自定义项目中使用的 redux-http 等，基本理念相同，触发 complex action，中间件针对特定 action type，转化为 pure action，即 reducer 直接操作的 action，保证状态的纯净。使用 rxjs 来处理理念依旧相同，但 rxjs 异步控制相比 redux-saga 更为简单可控。

接下来实现一个 instant search 组件，通过关键词搜索 github repo，然后使用表格呈现，只处理首页数据，目标类似于 https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

处理 HTTP 请求代码如下：

  1. /**
  2.  * @description - repo search request remote API
  3.  * @author - huang.jian <hjj491229492@hotmail.com>
  4.  */
  6. // External
  7. import pick from 'lodash/pick';
  8. import { message } from 'antd';
  9. import { Observable } from 'rxjs/Observable';
  11. /**
  12.  * @description - search github repo
  13.  *
  14.  * @param {string} keyword
  15.  *
  16.  * @return {*}
  17.  */
  18. export function fromRepoSearch(keyword) {
  19.   const url = `https://api.github.com/search/repositories?q=${keyword}`;
  20.   const init = { mode: 'cors' };
  21.   const fields = ['id', 'full_name', 'description', 'html_url', 'stargazers_count', 'language'];
  23.   return Observable.create((observer) => {
  24.     // Notify fetch start
  25.     observer.next({ repoSearchRequesting: true });
  27.     fetch(url, init)
  28.       .then((res) => res.json())
  29.       .then((res) => {
  30.         const items = res.items.map((item) => pick(item, fields));
  32.         message.info('search repo success');
  33.         observer.next({ repos: items });
  34.       })
  35.       .catch((err) => {
  36.         message.error('search repo failed');
  37.         observer.error(err);
  38.       })
  39.       .then(() => {
  40.         // Notify fetch complete
  41.         observer.next({ repoSearchRequesting: false });
  42.         observer.complete();
  43.       }, () => {
  44.         observer.next({ repoSearchRequesting: false });
  45.         observer.complete();
  46.       });
  47.   });
  48. }

代码异曲同工，类似于使用 observer.next 替换 store.dispatch 调用。redux-logger 通过扩展 Observable operator 来实现，简易代码如下：

  1. /**
  2.  * @description - Lite state output
  3.  *
  4.  * @param {string} groupName
  5.  *
  6.  * @return {any|Observable|Observable<T>|*}
  7.  */
  8. function logger(groupName) {
  9.   return this.do((state) => {
  10.     const timestamp = Date.now();
  11.     const dynamicGroupNmae = `${groupName} @ ${format(timestamp, readableTimeFormat)}`;
  13.     console.groupCollapsed(dynamicGroupNmae);
  14.     console.log(state);
  15.     console.groupEnd(dynamicGroupNmae);
  16.   });
  17. }

组件实现如下：

  1. /**
  2.  * @description - github repo search
  3.  * @author - huang.jian <hjj491229492@hotmail.com>
  4.  */
  5. // External
  6. import React, { Component } from 'react';
  7. import { Icon, Input, Table } from 'antd';
  8. import { Subject } from 'rxjs/Subject';
  9. import { Observable } from 'rxjs/Observable';
  10. import 'rxjs/add/observable/merge';
  11. import 'rxjs/add/operator/scan';
  12. import 'rxjs/add/operator/debounceTime';
  13. import 'rxjs/add/operator/distinctUntilChanged';
  14. import 'rxjs/add/operator/switchMap';
  15. import 'rxjs/add/operator/pluck';
  16. import 'rxjs/add/operator/share';
  17. // Internal
  18. import { fromRepoSearch } from './request';
  19. import { TimeMachine } from '../../hoc/time-machine';
  20. // Component scope
  22. @TimeMachine()
  23. export class RepoSearch extends Component {
  24.   constructor(props) {
  25.     super(props);
  27.     this.state = {
  28.       keyword: '',
  29.       repos: [],
  30.       repoSearchRequesting: false
  31.     };
  32.     this.columns = [
  33.       { key: 'full_name', dataIndex: 'full_name', title: 'Name' },
  34.       { key: 'description', dataIndex: 'description', title: 'Description', width: 400 },
  35.       {
  36.         key: 'html_url',
  37.         dataIndex: 'html_url',
  38.         title: 'URL',
  39.         render: (url) => (<a href={url} target="_blank">{url}</a>)
  40.       },
  41.       { key: 'stargazers_count', dataIndex: 'stargazers_count', title: 'Star' },
  42.       { key: 'language', dataIndex: 'language', title: 'Language' }
  43.     ];
  44.     this.suffix = (<Icon type="search"/>);
  45.   }
  47.   componentWillMount() {
  48.     this.keyword$ = Reflect.construct(Subject, []);
  50.     this.search$ = this.keyword$.debounceTime(1000)
  51.       .pluck('keyword')
  52.       .distinctUntilChanged()
  53.       .switchMap((keyword) => fromRepoSearch(keyword))
  54.       .share();
  56.     // Subscribe several times for HOC TimeMachine
  57.     // Entire state object is not necessary, which maybe cause diff performance issue
  58.     // Initial state is also not necessary, which already declare in constructor block
  59.     this.state$ = Observable.merge(this.keyword$, this.search$).share();
  60.   }
  62.   componentDidMount() {
  63.     this.subscription = this.state$.subscribe((state) => {
  64.       this.setState(state);
  65.     });
  66.   }
  68.   componentWillUnmount() {
  69.     this.subscription.unsubscribe();
  70.   }
  72.   handleKeywordSearch = (evt) => {
  73.     this.keyword$.next({ keyword: evt.target.value });
  74.   };
  76.   render() {
  77.     return (
  78.       <section className="repo-search__box">
  79.         <header className="repo-search__stdin">
  80.           <Input
  81.             type="text"
  82.             size="large"
  83.             placeholder="repo keyword"
  84.             suffix={this.suffix}
  85.             value={this.state.keyword}
  86.             onInput={this.handleKeywordSearch}
  87.           />
  88.         </header>
  89.         <article className="repo-search__visualize">
  90.           <Table
  91.             rowKey="id"
  92.             pagination={false}
  93.             loading={this.state.repoSearchRequesting}
  94.             columns={this.columns}
  95.             dataSource={this.state.repos}
  96.           />
  97.         </article>
  98.       </section>
  99.     );
  100.   }
  101. }

问题频发于 this.state$ 归并操作，cold observable 会重复订阅，需要特别小心。从行为上来讲，combineLatest operator 最为合适，多数据流合并为完整的 Component state object，但官方实现不支持多元可观察对象的合并，且状态变更，即 this.setState 调用传入完整对象笔者认为并无必要。

细心的读者可能发现还有个 TimeMachine 的关键字，此处为高阶组件，使用 esnext decorator 方式，目的在于实现简易的 Time Travel Debug。如果仔细斟酌，会发现时光旅行调试并不是 redux 独此一家，笔者仅做抛砖引玉，不被工具链所束缚，做到看山不是山，看水亦是水。

做到时光旅行调试，笔者通过建立 state snapshot 的方式来进行，暂用 merge + scan 方式组合状态。redux 如何实现并未仔细研究，请不吝赐教。具体代码维度，依旧 extend Observable operator的套路：

  1. const timeArrivalStationReducer = (size) => (buffer, state) => {
  2.   let history = buffer.length <= size ? buffer.slice() : buffer.slice(1);
  3.   let now = Date.now();
  4.   let nextState = {
  5.     time: format(now, readableTimeFormat),
  6.     raw: omit(state, 'timeArrivalStations')
  7.   };
  9.   return [...history, nextState];
  10. };
  12. /**
  13.  * @description - Backup history state
  14.  *
  15.  * @param {number} size - Maximum buffer length
  16.  *
  17.  * @return {Observable<R>}
  18.  */
  19. function timeMachine(size = 25) {
  20.   return this.scan(timeArrivalStationReducer(size), []).map((timeArrivalStations) => ({ timeArrivalStations }));
  21. }

如何选择旅行节点，是当前实现的难点，没有 action type 这样明显的标记，笔者示例使用时间戳作为节点标记，使用 Select 展示可旅行节点，高阶组件实现如下：

  1. /**
  2.  * @description - time machine HOC
  3.  * @author - huang.jian <hjj491229492@hotmail.com>
  4.  */
  5. // External
  6. import React from 'react';
  7. import { Select } from 'antd';
  8. import { Observable } from 'rxjs/Observable';
  9. import { Subject } from 'rxjs/Subject';
  10. import 'rxjs/add/observable/merge';
  11. import 'rxjs/add/operator/startWith';
  12. import 'rxjs/add/operator/shareReplay';
  13. import 'rxjs/add/operator/withLatestFrom';
  14. import 'rxjs/add/operator/pluck';
  16. // Component scope
  17. const Option = Select.Option;
  18. const DefaultTimeMachineOptions = {
  19.   size: 25
  20. };
  22. export const TimeMachine = (options) => (RawComponent) => {
  23.   options = { ...DefaultTimeMachineOptions, options };
  25.   return class extends RawComponent {
  26.     static displayName = `HOC"${RawComponent.displayName || RawComponent.name}"`;
  28.     constructor(props) {
  29.       super(props);
  31.       this.prevInitialState = { ...this.state };
  32.       this.state = {
  33.         ...this.state,
  34.         timeArrivalStations: []
  35.       };
  36.     }
  38.     componentWillMount() {
  39.       // Inherit parent lifecycle
  40.       super.componentWillMount();
  42.       // Create time machine
  43.       this.rollback$ = Reflect.construct(Subject, []);
  44.       this.arrival$ = this.state$
  45.         .startWith(this.prevInitialState)
  46.         .scan((acc, curr) => Object.assign({}, acc, curr))
  47.         .logger('RepoSearch')
  48.         .timeMachine(options.size)
  49.         .shareReplay(1);
  51.       this.jump$ = this.rollback$
  52.         .withLatestFrom(this.arrival$, (point, arrivals) => arrivals.timeArrivalStations.find((arrival) => arrival.time === point))
  53.         .pluck('raw');
  55.       this.timeMachine$ = Observable.merge(this.arrival$, this.jump$);
  56.     }
  58.     componentDidMount() {
  59.       // Inherit parent lifecycle
  60.       super.componentDidMount();
  61.       // Time machine lifecycle
  62.       this.timeMachineSubscription = this.timeMachine$.subscribe((state) => {
  63.         this.setState(state);
  64.       });
  65.     }
  67.     componentWillUnmount() {
  68.       // Inherit parent lifecycle
  69.       super.componentWillUnmount();
  70.       // Time machine lifecycle
  71.       this.timeMachineSubscription.unsubscribe();
  72.     }
  74.     handleTimeJump = (point) => {
  75.       this.rollback$.next(point);
  76.     };
  78.     render() {
  79.       return (
  80.         <section className="time-machine">
  81.           <header className="time-machine__panel">
  82.             <Select style={{ width: 200 }} onChange={this.handleTimeJump}>
  83.               {
  84.                 this.state.timeArrivalStations.map((item) => (
  85.                   <Option key={item.time} value={item.time}>
  86.                     {item.time}
  87.                   </Option>)
  88.                 )
  89.               }
  90.             </Select>
  91.           </header>
  92.           <article className="time-machine__slot">
  93.             {super.render()}
  94.           </article>
  95.         </section>
  96.       );
  97.     }
  98.   };
  99. };

效果预览录屏繁琐，静态图将就：

QQ20170806-3.png-376.2kB

QQ20170806-4.png-363.8kB

QQ20170806-5.png-379.3kB

Contact

Email: hjj491229492@hotmail.com

qrcode_for_gh_d8efb59259e2_344.jpg-8.7kB

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注