试图了解React上下文

时间:2018-12-20 00:58:14

标签: reactjs

我正在尝试了解上下文是什么,这是到目前为止我收集的内容:

使用它的方式是,每当创建Context时,都必须使用声明的常量在子组件中定义contextType,才可以使用上下文。

这里是example from the official docs

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

该示例将所有组件放置在同一文件中,这使开发人员可以在ThemedButton类中使用ThemeContext。

我可能在其中创建了带有上下文的App.jsx,并用ThemeContext.Provider包装了Home.jsx组件,以便我可以将其与ThemedButton一起使用。我必须在其JSX文件中的ThemedButton类中执行static contextType = ThemeContext,这意味着我必须从App.jsx导入ThemeContext。

文档中的定义是:上下文提供了一种通过组件树传递数据的方法,而不必在每个级别手动传递道具。

我不能也将export const theme = 'light'导入到一个孙辈中吗?它仍然在中间跳过父母,并且可以向侧面倾斜。

1 个答案:

答案 0 :(得分:4)

虽然确实可以直接导出和导入数据,但是您将失去能够更新该数据并强制执行新渲染的好处。想象一下,您正在通过上下文向下传递一种颜色,同时通过一种可以更新颜色的方法传递了该颜色。

现在,您可以选择在树中向下移动一些子级,此方法可以更改颜色,并使使用该颜色的组件重新呈现。

对于存在于React世界之外的数据无法做到这一点,就像您在其他地方导出和导入的数据一样。