Context
提供了一个无需为每层组件手动添加 props
,就能在组件树间进行数据传递的方法。
一般情况下,数据是通过 props
属性自上而下进行传递的,但这种做法对于某些类型的属性是极其繁琐的,比如主题,这些属性是应用程序中许多组件都需要的。Context
提供了一种在组件之间共享此类值的方式,而不必显示地通过组件树逐层传递 props
。
Context
设计目的是为了共享那些对于一个组件树而言是 “全局” 的数据,比如前面提到的主题。在下面代码中通过一个 theme
属性手动调整一个按钮组件的样式:
class App extends React.Component {
render() {
return ;
}
}
function Toolbar(props) {
// Toolbar 组件接受一个额外的“theme”属性,然后传递给 ThemedButton 组件。
// 如果应用中每一个单独的按钮都需要知道 theme 的值,这会是件很麻烦的事,
// 因为必须将这个值层层传递所有组件。
return (
);
}
class ThemedButton extends React.Component {
render() {
return ;
}
}
使用 context
,就可以避免通过中间元素传递 props
: