React Hook使用之useContext

什么是Context?

在使用react组件的时候，经常会用到组件之间的传参，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：语言国际化，UI 主题，用户信息），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

怎么使用Context？

加入我们的系统要实现一个主题换肤的功能，一键点击换肤，所有组件的背景颜色都会发生修改，如果用传统的props来写的话，这就要求我们在每个父子组件之间添加一个theme的props变量，然后一层一层向下传去，导致全局出现大量的props变量。

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

function Toolbar(props) {
  // Toolbar 组件接受一个额外的“theme”属性，然后传递给 ThemedButton 组件。
  // 如果应用中每一个单独的按钮都需要知道 theme 的值，这会是件很麻烦的事，
  // 因为必须将这个值层层传递所有组件。
  return (
    <div>
      <ThemedButton theme={props.theme