为什么需要React Context.Provider（或有用）？

Question

React具有上下文的原因是允许多个同级组件共享一条状态数据。它是允许两个不相关的组件读取/写入共享变量的首选方法。之所以有必要，是因为React无法轻松地将数据值提供给多个屏幕，而无需在屏幕之间实际传递数据。相反，它允许每个屏幕在需要时访问数据。

所以...该实现要求创建一个称为Context.Provider组件的组件，然后您必须将需要访问共享数据的组件包装在Context.Provider中。但为什么？为什么这是一项要求？ Context被设计为在没有层次关系的组件之间共享数据，并且需要将这些组件置于层次结构中才能这样做？

直接放弃使用Context.Provider的要求将直接提高100倍，简单地使useContext函数默认情况下可以访问设置变量：

// In ctx.js
import React from 'react';
export default CTX = React.createContext({val: "value"});

// In compA.js
import CTX from './ctx.js';
import {useContext} from 'react';
function A(props) {
    var [context, setContext] = useContext(CTX);
    console.log(context); //Logs {val: 'value'};
    setContext({val: "newValue"});
}

然后，假设组件B在A之后渲染：

import CTX from './ctx.js';
import {useContext} from 'react';
function B(props) {
    var [context, setContext] = useContext(CTX);
    console.log(context); //Logs {val: 'newValue'};
}

上述用法（如果确实有效）解决了“在不相关的组件之间共享数据”的任务，并且比在上下文文件中定义整个新组件要简单得多。此解决方案更好，因为：1.无需重组应用程序。您不需要将组件包装在提供程序中。2.任何组件都可以轻松地请求任何共享状态，并且可以轻松设置共享状态。3.所涉及的代码更少，更易于理解（一行代码用于导入，而一行代码用于启动上下文）。4.不牺牲任何东西。这种方法允许在组件之间轻松共享状态，这首先就是上下文的全部原因。

我疯了吗？我们是否有绝对的理由绝对需要将我们的组件包装在一个特殊的组件中以共享数据？。为什么共享状态不能仅仅独立存在？就像他们选择了一个错误的解决方案一样……为什么要让每个开发人员在使用共享状态之前将组件包装在另一个组件中，为什么不让开发人员在需要使用共享状态时使用它们，而不是跳过箍呢？有人请教育我。

Answer 1

“直接放弃使用Context.Provider的要求将是100倍，并且同样有效”

首先，您的示例缺少许多基本功能：

/* OP EXAMPLE */
// In ctx.js
import React from 'react';
export default CTX = React.createContext({val: "value"});

• 您不能传递像state这样的动态值，它非常有用，例如dispatch函数和主题控件。
• 这种上下文范围是应用程序范围，意味着当您的应用程序增长时，您将传递更多对于整个应用程序而言不必要的变量。]​​>

此外，您可以使用当前的Context.Provider实现相同的示例，只需要包装入口点：

// index.js
const IndexPage = () => (
  <Context.Provider value={{val: "value"}}>
    <App />
  </Context.Provider>
);
为什么需要React Context.Provider

主要原因是您的应用程序中可以具有多个提供程序的能力：

const IndexPage = () => (
  <Context.Provider value={store}>
    <App />
    <SmallerScopeContext.Provider value={anotherStore}>
      <App2 />
    </SmallerScopeContext>
  </Context.Provider>
);
[它可能已经在您的应用程序中发生了，您可能不知道，有些例子可能是：

• [当您使用CSS-in-JS之类的styled-component时
• [当使用像redux这样的状态管理时
• 当将GraphQL与Apollo一起使用时>
• [当您使用Next.js和Gatsby之类的框架时