Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

使用Context 前的考虑

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。
但是，有的时候在组件树中很多不同层级的组件需要访问同样的一批数据。Context 能让你将这些数据向组件树下所有的组件进行“广播”，所有的组件都能访问到这些数据，也能访问到后续的数据更新。使用 context 的通用的场景包括管理当前的 locale，theme，或者一些缓存数据，这比替代方案要简单的多。

motivation

problem

属性需要层层传递。

  2. class App extends React.Component {
  3.   render() {
  4.     return <Toolbar theme="dark" />;
  5.   }
  6. }
  8. function Toolbar(props) {
  9.   // highlight-range{1-4,7}
  10.   // The Toolbar component must take an extra "theme" prop
  11.   // and pass it to the ThemedButton. This can become painful
  12.   // if every single button in the app needs to know the theme
  13.   // because it would have to be passed through all components.
  14.   return (
  15.     <div>
  16.       <ThemedButton theme={props.theme} />
  17.     </div>
  18.   );
  19. }
  21. class ThemedButton extends React.Component {
  22.   render() {
  23.     return <Button theme={this.props.theme} />;
  24.   }
  25. }

solution

通过 static contextType 解决。

  1. // highlight-range{1-4}
  2. // Context lets us pass a value deep into the component tree
  3. // without explicitly threading it through every component.
  4. // Create a context for the current theme (with "light" as the default).
  5. const ThemeContext = React.createContext('light');
  7. class App extends React.Component {
  8.   render() {
  9.     // highlight-range{1-3,5}
  10.     // Use a Provider to pass the current theme to the tree below.
  11.     // Any component can read it, no matter how deep it is.
  12.     // In this example, we're passing "dark" as the current value.
  13.     return (
  14.       <ThemeContext.Provider value="dark">
  15.         <Toolbar />
  16.       </ThemeContext.Provider>
  17.     );
  18.   }
  19. }
  21. // highlight-range{1,2}
  22. // A component in the middle doesn't have to
  23. // pass the theme down explicitly anymore.
  24. function Toolbar(props) {
  25.   return (
  26.     <div>
  27.       <ThemedButton />
  28.     </div>
  29.   );
  30. }
  32. class ThemedButton extends React.Component {
  33.   // highlight-range{1-3,6}
  34.   // Assign a contextType to read the current theme context.
  35.   // React will find the closest theme Provider above and use its value.
  36.   // In this example, the current theme is "dark".
  37.   static contextType = ThemeContext;
  38.   render() {
  39.     return <Button theme={this.context} />;
  40.   }
  41. }

multiple-contexts

  2. // Theme context, default to light theme
  3. const ThemeContext = React.createContext('light');
  5. // Signed-in user context
  6. const UserContext = React.createContext({
  7.   name: 'Guest',
  8. });
  10. class App extends React.Component {
  11.   render() {
  12.     const {signedInUser, theme} = this.props;
  14.     // App component that provides initial context values
  15.     // highlight-range{2-3,5-6}
  16.     return (
  17.       <ThemeContext.Provider value={theme}>
  18.         <UserContext.Provider value={signedInUser}>
  19.           <Layout />
  20.         </UserContext.Provider>
  21.       </ThemeContext.Provider>
  22.     );
  23.   }
  24. }
  26. function Layout() {
  27.   return (
  28.     <div>
  29.       <Sidebar />
  30.       <Content />
  31.     </div>
  32.   );
  33. }
  35. // A component may consume multiple contexts
  36. function Content() {
  37.   // highlight-range{2-10}
  38.   return (
  39.     <ThemeContext.Consumer>
  40.       {theme => (
  41.         <UserContext.Consumer>
  42.           {user => (
  43.             <ProfilePage user={user} theme={theme} />
  44.           )}
  45.         </UserContext.Consumer>
  46.       )}
  47.     </ThemeContext.Consumer>
  48.   );
  49. }

theme-detailed

app

  1. import {ThemeContext, themes} from './theme-context';
  2. import ThemedButton from './themed-button';
  4. // An intermediate component that uses the ThemedButton
  5. function Toolbar(props) {
  6.   return (
  7.     <ThemedButton onClick={props.changeTheme}>
  8.       Change Theme
  9.     </ThemedButton>
  10.   );
  11. }
  13. class App extends React.Component {
  14.   constructor(props) {
  15.     super(props);
  16.     this.state = {
  17.       theme: themes.light,
  18.     };
  20.     this.toggleTheme = () => {
  21.       this.setState(state => ({
  22.         theme:
  23.           state.theme === themes.dark
  24.             ? themes.light
  25.             : themes.dark,
  26.       }));
  27.     };
  28.   }
  30.   render() {
  31.     //highlight-range{1-3}
  32.     // The ThemedButton button inside the ThemeProvider
  33.     // uses the theme from state while the one outside uses
  34.     // the default dark theme
  35.     //highlight-range{3-5,7}
  36.     return (
  37.       <Page>
  38.         <ThemeContext.Provider value={this.state.theme}>
  39.           <Toolbar changeTheme={this.toggleTheme} />
  40.         </ThemeContext.Provider>
  41.         <Section>
  42.           <ThemedButton />
  43.         </Section>
  44.       </Page>
  45.     );
  46.   }
  47. }
  49. ReactDOM.render(<App />, document.root);

themed-button

  1. import {ThemeContext} from './theme-context';
  3. class ThemedButton extends React.Component {
  4.   // highlight-range{3,12}
  5.   render() {
  6.     let props = this.props;
  7.     let theme = this.context;
  8.     return (
  9.       <button
  10.         {...props}
  11.         style={{backgroundColor: theme.background}}
  12.       />
  13.     );
  14.   }
  15. }
  16. ThemedButton.contextType = ThemeContext;
  18. export default ThemedButton;

theme-context

  1. export const themes = {
  2.   light: {
  3.     foreground: '#000000',
  4.     background: '#eeeeee',
  5.   },
  6.   dark: {
  7.     foreground: '#ffffff',
  8.     background: '#222222',
  9.   },
  10. };
  12. // highlight-range{1-3}
  13. export const ThemeContext = React.createContext(
  14.   themes.dark // default value
  15. );

updating-nested

App

  1. import {ThemeContext, themes} from './theme-context';
  2. import ThemeTogglerButton from './theme-toggler-button';
  4. class App extends React.Component {
  5.   constructor(props) {
  6.     super(props);
  8.     this.toggleTheme = () => {
  9.       this.setState(state => ({
  10.         theme:
  11.           state.theme === themes.dark
  12.             ? themes.light
  13.             : themes.dark,
  14.       }));
  15.     };
  17.     // highlight-range{1-2,5}
  18.     // State also contains the updater function so it will
  19.     // be passed down into the context provider
  20.     this.state = {
  21.       theme: themes.light,
  22.       toggleTheme: this.toggleTheme,
  23.     };
  24.   }
  26.   render() {
  27.     // highlight-range{1,3}
  28.     // The entire state is passed to the provider
  29.     return (
  30.       <ThemeContext.Provider value={this.state}>
  31.         <Content />
  32.       </ThemeContext.Provider>
  33.     );
  34.   }
  35. }
  37. function Content() {
  38.   return (
  39.     <div>
  40.       <ThemeTogglerButton />
  41.     </div>
  42.   );
  43. }
  45. ReactDOM.render(<App />, document.root);

theme-toggler-button

  1. import {ThemeContext} from './theme-context';
  3. function ThemeTogglerButton() {
  4.   // highlight-range{1-2,5}
  5.   // The Theme Toggler Button receives not only the theme
  6.   // but also a toggleTheme function from the context
  7.   return (
  8.     <ThemeContext.Consumer>
  9.       {({theme, toggleTheme}) => (
  10.         <button
  11.           onClick={toggleTheme}
  12.           style={{backgroundColor: theme.background}}>
  13.           Toggle Theme
  14.         </button>
  15.       )}
  16.     </ThemeContext.Consumer>
  17.   );
  18. }
  19. export default ThemeTogglerButton;

context

  1. // Make sure the shape of the default value passed to
  2. // createContext matches the shape that the consumers expect!
  3. // highlight-range{2-3}
  4. export const ThemeContext = React.createContext({
  5.   theme: themes.dark,
  6.   toggleTheme: () => {},
  7. });