我正在尝试了解上下文是什么,这是到目前为止我收集的内容:
使用它的方式是,每当创建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'
导入到一个孙辈中吗?它仍然在中间跳过父母,并且可以向侧面倾斜。
答案 0 :(得分:4)
虽然确实可以直接导出和导入数据,但是您将失去能够更新该数据并强制执行新渲染的好处。想象一下,您正在通过上下文向下传递一种颜色,同时通过一种可以更新颜色的方法传递了该颜色。
现在,您可以选择在树中向下移动一些子级,此方法可以更改颜色,并使使用该颜色的组件重新呈现。
对于存在于React世界之外的数据无法做到这一点,就像您在其他地方导出和导入的数据一样。