reactjs - React 中函数式 Observable 模式的绝对最简单示例

Question

谁能提供一个 ReactJS 中可观察对象的愚蠢简单示例？

基本上，我想将消息从一个组件传递到另一个组件。

Google 搜索让我陷入了 RxJs、Redux、Hooks、共享内存、基于类的组件和其他相关主题的困境。

以下面的结构为例:

    A
   / \
  B   C
 /\
D  E

我只需要从组件 D 向 C 发送一个 true/false 消息。

这在 React 中天生就很复杂吗？ tyvm，基思 :^)

Answer 1

RxJS

Redux-observable 使用 ReactiveX observables，但我认为它不是 React 应用程序最常用的方法。

react 状态

React 状态(this.state 或 useState)仅从父级传给子级，因此当 D 和 C 需要状态时，它必须在一个共同的祖先 A 中进行管理。这意味着 A 需要将 Prop 传递给 B，B不需要，只有这样 B 才能将其传递给 C。这称为 props drilling，被认为是不好的，因此不是最佳选择。

Redux 和 react-redux

Redux store 是一个事件存储，您可以调度操作(事件)，reducer 或中间件将作用于这些操作以更新状态(reducer)或产生副作用(通常使用中间件完成)。组件可以使用选择器通过 useSelector(selectorFunction) 从状态中获取数据，之前使用了 HOC connect 但 Hook 要简单得多。

当分派(dispatch)导致状态更改的 Action 时，所有 selectorFunction 函数都会被 react-redux 调用，如果它们的返回值与上次运行的不同，它将重新渲染 所在的组件>useSelector 已被使用。

如果您必须实现复杂的需求，Redux 是一个很好的选择，因为 CQRS/事件存储模式可以很容易地将操作(指示发生了什么)与缩减器(发生事情时做什么)分开，并且您可以使用查询存储选择器(通常使用 reselect)。

上下文

对于没有复杂需求的应用程序，您可以使用上下文，只要您更改上下文，具有 useContext 的组件将重新呈现。下面是一个简单的例子。

const BoolContext = React.createContext();
const BoolProvider = ({ children }) => {
  //set bool message to true
  const [bool, setBool] = React.useState(true);
  const toggle = React.useCallback(
    () => setBool((b) => !b),
    []
  );
  return (
    // set value of context to {bool, toggle}
    <BoolContext.Provider value={{ bool, toggle }}>
      {children}
    </BoolContext.Provider>
  );
};

const D = () => {
  const { bool, toggle } = React.useContext(BoolContext);
  return <button onClick={toggle}>D:{String(bool)}</button>;
};
const C = () => {
  const { bool, toggle } = React.useContext(BoolContext);
  return <button onClick={toggle}>C:{String(bool)}</button>;
};
//removed E as it does not do anything to demonstrate context
const B = () => ( <D /> )

const A = () => {
  return (
    <BoolProvider>
      <B />
      <C />
    </BoolProvider>
  );
};

ReactDOM.render(<A />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>