import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

//Функция, производящая вычисления и возвращающая Promise
import calculateFibonacciExternal from './calculateFibonacci'; 

export default class Fibonacci extends React.Component {
  //Определение типов параметров, описанных выше
  static propTypes = {
    className: PropTypes.string,
    value: PropTypes.number.isRequired,
    useServerCall: PropTypes.bool.isRequired,
  };
  
  //Внутреннее состояние компонента. Будем его обновлять что бы 
  //произвести рендеринг
  state = {
    loading: true,
    fibonacci: null,
  };
  
  //Компонент скоро будет отображен
  componentWillMount() {
    //У нас еще нет никаких результатов вычислений - начнем работу  
    //с того, что их запросим
    this.calculateFibonacci(this.props.value, this.props.useServerCall, (fibonacci) => {
      this.setState({
        fibonacci: fibonacci,
        loading: false,
      });
    });
  }

  //Компонент получил новые props
  componentWillReceiveProps(nextProps) {
    //Если изменилось value - делаем пересчет
    if(nextProps.value !== this.props.value) {
      this.setState({
        loading: true,
      });
      this.calculateFibonacci(nextProps.value, nextProps.useServerCall, (fibonacci) => {
        this.setState({
          fibonacci: fibonacci,
          loading: false,
        });
      });
    }
  }

  //Нужно ли обновлять компонент
  shouldComponentUpdate(nextProps, nextState) {
    //Ну по факту нужно во всех случаях, кроме изменения useServerCall
    return this.props.className !== nextProps.className ||
      this.props.value !== nextProps.value ||
      this.state.loading !== nextState.loading ||
      this.state.fibonacci !== nextState.fibonacci;
  }

  //Обязательно отметим, что компонент был удален и нам больше не интересны 
  //любые результаты вычислений, которые были недавно запущены
  componentWillUnmount() {
    this.unmounted = true;
  }

  unmounted = false;
  calculationId = 0;

  //Мы не хотим получать результаты старых вычислений, поэтому пришлось 
  //обернуть функцию и отсеивать их
  calculateFibonacci = (value, useServerCall, cb) => {
    const currentCalculationId = ++this.calculationId;
    calculateFibonacciExternal(value, useServerCall).then(fibonacci => {
      if(currentCalculationId === this.calculationId && !this.unmounted) {
        cb(fibonacci);
      }
    });
  };

  //Ну и простенький рендер
  render() {
    return (
      <div className={ classnames(this.props.className, this.state.loading && 'loading') }>
        { this.state.loading ?
          'Loading...' :
          `Fibonacci of ${this.props.value} = ${this.state.fibonacci}`
        }
      </div>
    );
  }
}

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { reactRxProps } from 'react-rx-props';
import { Observable } from 'rxjs';
import calculateFibonacciExternal from './calculateFibonacci';

//Преобразуем возвращаемый Promise в Observable для удобства.
const calculateFibonacci = (...args) => Observable.fromPromise(calculateFibonacciExternal(...args));

class FibonacciReactRxProps extends React.Component {
  //Обратите внимание, что принимаем мы уже Observables
  //$ добавляется к именам по соглашению об именовании (можно отключить)
  static propTypes = {
    className: PropTypes.string,
    value$: PropTypes.instanceOf(Observable).isRequired,
    useServerCall$: PropTypes.instanceOf(Observable).isRequired,
    exist$: PropTypes.instanceOf(Observable).isRequired,
  };

  //Тут нам все еще нужно внутреннее состояние
  state = {
    loading: true,
    fibonacci: null,
  };

  //Всю логику о том как и когда надо обновлять компонент распишем здесь
  componentWillMount() {
    //useServerCall мы просто сохраняем, никакой пересчет или рендеринг не нужен
    this.props.useServerCall$.subscribe(useServerCall => {
      this.useServerCall = useServerCall;
    });

    //value мы сохраняем и запускаем пересчет при каждом изменении
    this.props.value$.switchMap(value => {
      this.value = value;
      this.setState({
        loading: true,
      });
      return calculateFibonacci(value, this.useServerCall)
        .takeUntil(this.props.exist$);  //Нам не интересен результат если компонент удален
    }).subscribe(fibonacci => {
      this.setState({
        loading: false,
        fibonacci: fibonacci,
      });
    });
    //Мы ничего не написали про className, но как видно из propTypes - он не является
    //Observable. Получается при его изменении компонент сделает рендеринг.
    //Можно сконфигурировать props, которые не нужно преобразовывать в Observables
  }
  //Тут ничего не изменилось
  render() {
    return (
      <div className={ classnames(this.props.className, this.state.loading && 'loading') }>
        { this.state.loading ?
          'Loading...' :
          `Fibonacci of ${this.value} = ${this.state.fibonacci}`
        }
      </div>
    );
  }
}

//Применяем HoC, указав его вводные данные (это не обязательно)
export default reactRxProps({
  propTypes: {
    className: PropTypes.string,
    value: PropTypes.number.isRequired,
    useServerCall: PropTypes.bool.isRequired,
  },
})(FibonacciReactRxProps);

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { reactRxProps, reactRxPropsConnect } from 'react-rx-props';
import { compose } from 'recompose';
import { Observable } from 'rxjs';
import calculateFibonacciExternal from './calculateFibonacci';

const calculateFibonacci = (...args) => Observable.fromPromise(calculateFibonacciExternal(...args));

class FibonacciReactRxProps extends React.Component {
  //Принимаем данные уже в том виде в котором их легко сможем 
  //отобразить без использования внутреннего состояния
  static propTypes = {
    className: PropTypes.string,
    value: PropTypes.number,
    fibonacci: PropTypes.number,
  };
  
  //Соответственно, отображаем
  render() {
    return (
      <div className={ classnames(this.props.className, this.props.loading && 'loading') }>
        { this.props.loading ?
          'Loading...' :
          `Fibonacci of ${this.props.value} = ${this.props.fibonacci}`
        }
      </div>
    );
  }
}

//compose помогает применить несколько HoC к одному компоненту
export default compose(
  //Тут мы ничего не меняли
  reactRxProps({
    propTypes: {
      className: PropTypes.string,
      value: PropTypes.number.isRequired,
      useServerCall: PropTypes.bool.isRequired,
    },
  }),
  reactRxPropsConnect({
    //Принимаем те же props что принимал компонент в предыдущем примере
    propTypes: {
      className: PropTypes.string,
      value$: PropTypes.instanceOf(Observable).isRequired,
      useServerCall$: PropTypes.instanceOf(Observable).isRequired,
      exist$: PropTypes.instanceOf(Observable).isRequired,
    },
    //Сюда ушла вся логика работы с Observables
    //По сути тот же код, только: 
    //this -> model
    //this.props -> props
    //this.setState -> render
    connect: (props, render) => {
      const model = {};

      props.useServerCall$.subscribe(useServerCall => {
        model.useServerCall = useServerCall;
      });

      props.value$.switchMap(value => {
        model.value = value;
        render({
          loading: true,
        });
        return calculateFibonacci(model.value, model.useServerCall)
          .takeUntil(props.exist$);
      }).subscribe(fibonacci => {
        render({
          loading: false,
          value: model.value,
          fibonacci: fibonacci,
        });
      });
    },
  })
)(FibonacciReactRxProps);