Question

我正在使用React Native和RxJS，直到现在，只要我订阅了我一直在做的观察：

observable.subscribe(() => {
     this.setState({ loading: true });
}.bind(this));

但是自从我升级到React Native 0.16.0后，无论我在使用ES2015箭头符号声明的内联函数上执行bind（this），React Native都会将其作为错误进行选择。但是，当我将箭头符号更改回ES5常规函数表示法时，如下所示：

observable.subscribe(function() => {
    this.setState({ loading: true });
}.bind(this));

错误似乎消失了。

这里发生了什么？

Answer 1

当您使用箭头功能时，您已将此功能绑定到该特定功能。所以：

() => {} === function() {}.bind(this)

Answer 2

与您的问题相关，我建议您查看FrintJS，它也包含React和React Native集成：https://github.com/frintjs/frint-react-native

它带有一个observe高阶组件，它允许您使用RxJS observable将props传递给组件，因此您的基本组件始终被写为无状态函数。

示例：

import React from 'react';
import { Observable } from 'rxjs';
import { observe } from 'frint-react';

function MyComponent(props) {
  return <p>Interval: {props.interval}</p>;
}

export default observe(function () {
  // return an Observable emitting a props-compatible object here
  return Observable.interval(1000)
    .map(x => ({ interval: x }));
})(MyComponent);

有关此主题的更多信息：

用RxJS反应原生

2 个答案: