尝试 React 17 RC / Demo of Gradual React Upgrades

/** 
* 注意这是重点，这里导入了 Themecontext，react-router、react-redux 的 context
* context 中存放的就各自的对象信息
*/
import {__RouterContext} from 'react-router';
import {ReactReduxContext} from 'react-redux';
import ThemeContext from './shared/ThemeContext';

// 懒加载 legacy root component
const createLegacyRoot = readModule(rendererModule, () =>
 import('../legacy/createLegacyRoot')
).default;
// 懒加载 legacy children component
const Component = readModule(componentModule, getLegacyComponent).default;
const containerRef = useRef(null);
const rootRef = useRef(null);
// Populate every contexts we want the legacy subtree to see.
// Then in src/legacy/createLegacyRoot we will apply them.
// 获取每个 context 里的信息
const theme = useContext(ThemeContext);
const router = useContext(__RouterContext);
const reactRedux = useContext(ReactReduxContext);
/**
* 组成一个 context 对象，拥有 theme、router、reactRedux 属性
* 并分别赋值为上述的 context 信息
*/
const context = useMemo(
  () => ({
    theme,
    router,
    reactRedux,
  }),[theme, router, reactRedux]);
  
// Create/unmount.
useLayoutEffect(() => {
  if (!rootRef.current) {
    rootRef.current = createLegacyRoot(containerRef.current);
  }
const root = rootRef.current;
  return () => {
    root.unmount();
  };
}, [createLegacyRoot]);

// Mount/update.
useLayoutEffect(() => {
  if (rootRef.current) {
    // 将 context 注入到 需要使用 context、react-router、react-redux 的组件中去
    rootRef.current.render(Component, props, context);
  }
}, [Component, props, context]);

/**
* 注意这里是重点，这里导入的对象用于 Provider，将 context 注入到被包裹的组件中
* 这样在组件中就可以使用 ThemeContext、react-router、React-Redux
*/
import ThemeContext from './shared/ThemeContext';
// Note: this is a semi-private API, but it's ok to use it
// if we never inspect the values, and only pass them through.
import {__RouterContext} from 'react-router';
import {Provider} from 'react-redux';

// 进行 Provider 注册 context
<ThemeContext.Provider value={context.theme}>
    <__RouterContext.Provider value={context.router}>
    {/*
      If we used the newer react-redux@7.x in the legacy/package.json,
      we woud instead import {ReactReduxContext} from 'react-redux'
      and render <ReactReduxContext.Provider value={context.reactRedux}>.
    */}
    <Provider store={context.reactRedux.store}>{children}</Provider>
  </__RouterContext.Provider>
</ThemeContext.Provider>

// 消费 ThemeContext
<ThemeContext.Consumer>
  {theme => (
    <div style={{border: '1px dashed black', padding: 20}}>
      <h3>src/legacy/Greeting.js</h3>

      <h4 style={{color: theme}}>
        This component is rendered by the nested React ({React.version}).
       </h4>
       <Clock />
        <p>
          Counter: {this.props.counter}{' '}
          <button onClick={() => this.props.dispatch({type: 'increment'})}>
            +
          </button>
        </p>
        <b>
          <Link to="/">Go to Home</Link>
        </b>           
      </div>
  )}
 </ThemeContext.Consumer>