React 基础篇（七）—— Context

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 ：