React中功能性可观察模式的绝对最简单示例

问题描述

任何人都可以在ReactJS中提供一个愚蠢的简单示例吗？

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

Google搜索使我陷入RxJ，Redux，Hooks，共享内存，基于类的组件以及其他相关主题的困境。

以以下结构为例：

    """
    return [scrapy.Request(url=website.search_url.format(prod),callback=self.parse,cb_kwargs = dict(body = website.body_xpath,product_list  = website.products_list_xpath,name  = website.products_name_xpath,selling_price = website.selling_price_xpath,market_price  = website.market_price_xpath)) for website in websites for prod in modified_products]

    def parse(self,response,body,product_list,name,selling_price,market_price):
            body = response.cb_kwargs["body"]
            product_list = response.cb_kwargs["product_list"]
            name_ = response.cb_kwargs["name"]
            selling_price_ = response.cb_kwargs["selling_price"]
            market_price_ = response.cb_kwargs["market_price"]
    """

我只需要从组件D向C发送正确/错误消息即可。

这在React中固有地复杂吗？ tyvm，Keith：^）

解决方法

RxJS

Redux-observable使用ReactiveX可观察对象，但我认为这不是React应用程序中最常用的方法。

反应状态

反应状态（this.state或useState）仅从父级变为子级，因此当D和C需要状态时，必须在一个共同的祖先A中进行管理。这意味着A需要将道具传递给B，而B不需要，只有B才能将其传递给C。这称为道具钻孔，被认为是不好的，因此不是最佳选择。

Redux和react-redux

Redux存储是事件存储，您可以调度动作（事件），reduce或中间件将对这些动作进行操作以更新状态（reduce）或引起副作用（通常由中间件完成）。组件可以使用选择器通过useSelector(selectorFunction)从状态获取数据，以前使用过HOC connect，但是该钩子要简单得多。

当分派导致状态更改的动作时，所有selectorFunction函数都由react-redux调用，如果它们的返回值与上次运行不同，它将在useSelector处重新呈现组件被使用了。

如果您必须实现复杂的需求，则Redux是一个很好的选择，因为CQRS /事件存储模式可以轻松地将操作（指示发生了什么）与reducer（发生什么情况时）分开，并且可以通过以下方式查询存储选择器（通常使用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>