[英]RXJS in React without Subjects
I'm slowly picking up RXJS and learning how to use it in the context of React.我正在慢慢学习 RXJS 并学习如何在 React 的上下文中使用它。
All the Rxjs tutorials I have found start off with observables.我发现的所有 Rxjs 教程都是从 observables 开始的。 This makes sense.
这是有道理的。 When I try and use an observable in react it doesn't work.
当我尝试在反应中使用可观察对象时,它不起作用。 I have to create a subject instead and push values into the subject.
我必须创建一个主题并将值推送到主题中。
Why is this the case?为什么会这样? Why can't I use plain old observables in React?
为什么我不能在 React 中使用普通的旧 observables? Am I doing something wrong?
难道我做错了什么? Can someone please explain why RXJS in react necessitates using subjects.
有人可以解释为什么 RXJS 在反应中需要使用主题。
I realise this is a bit vague, but I don't yet understand the concepts to formulate a better question.我意识到这有点含糊,但我还不了解提出更好问题的概念。 Here is an example to illustrate what I am struggling to understand.
这是一个例子来说明我正在努力理解的内容。
Here is a super simple component that takes a value in input value and displays it.这是一个超级简单的组件,它在输入值中获取一个值并显示它。 regular react, no RXJS.
常规反应,没有 RXJS。
const InputBox = () => {
const [value, setValue] = React.useState('');
return (
<>
<p>{value}</p>
<input value={value} onChange={e => setValue(e.target.value)}></input>
</>
);
};
If I want to do the same thing with RXJS, this works...如果我想对 RXJS 做同样的事情,这行得通……
const inputStream$ = new Subject();
const InputBox = () => {
const [value, setValue] = React.useState('');
React.useEffect(() => {
const subscription = inputStream$.subscribe(_value => setValue(_value));
return () => subscription.unsubscribe();
}, []);
return (
<>
<p>{value}</p>
<input
value={value}
onChange={e => inputStream$.next(e.target.value)}
></input>
</>
);
};
But if I try using a regular observable, no subject, then it doesn't work.但是,如果我尝试使用常规的 observable,没有主题,那么它就行不通了。
const inputStream$ = new Observable();
const InputBox = () => {
const [value, setValue] = React.useState('');
React.useEffect(() => {
const subscription = inputStream$.subscribe(_value => setValue(_value));
return () => subscription.unsubscribe();
}, []);
return (
<>
<p>{value}</p>
<input
value={value}
onChange={e => inputStream$.next(e.target.value)}
></input>
</>
);
};
The next method exists on the observer, not the observable.下一个方法存在于观察者身上,而不是可观察者身上。 A subject is both an observer and an observable, hence it has a next method.
主体既是观察者又是可观察者,因此它有一个 next 方法。 If you want to use a vanilla observable you need to pass the observer into the constructor.
如果你想使用一个普通的可观察对象,你需要将观察者传递给构造函数。 But why not use a subject, that is what they are for.
但是为什么不使用主题呢,这就是它们的用途。 A subject is also multicast so different components can subscribe to the same data more efficiently than with a plain observable.
主题也是多播的,因此不同的组件可以比普通的 observable 更有效地订阅相同的数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.