class Child extends React.Component {
  render() {
    // 4. 這里使用 this.context.value 獲取
    return <p>{this.context.value}</p>
  }
}
// 3. 子組件添加 contextTypes 靜態屬性
Child.contextTypes = {
  value: PropTypes.string
};
class Parent extends React.Component {
  state = {
    value: 'foo'
  }
  // 1. 當 state 或者 props 改變的時候，getChildContext 函數就會被調用
  getChildContext() {
    return {value: this.state.value}
  }
  render() {
    return (
      <div>
        <Child />
      </div>
    )
  }
}
// 2. 父組件添加 childContextTypes 靜態屬性
Parent.childContextTypes = {
  value: PropTypes.string
};

// 1. Child 組件使用 PureComponent
class Child extends React.Component {
  render() {
    return <GrandChild />
  }
}
class GrandChild extends React.Component {
  render() {
    return <p>{this.context.theme}</p>
  }
}
GrandChild.contextTypes = {
  theme: PropTypes.string
};
class Parent extends React.Component {
  state = {
    theme: 'red'
  }
  getChildContext() {
    return {theme: this.state.theme}
  }
  render() {
    return (
      <div onClick={() => {
        this.setState({
          theme: 'blue'
        })
      }}>
        <Child />
        <Child />
      </div>
    )
  }
}
Parent.childContextTypes = {
  theme: PropTypes.string
};

// 1. 建立一個訂閱發布器，當然你也可以稱呼它為依賴注入系統（dependency injection system），簡稱 DI
class Theme {
  constructor(value) {
    this.value = value
    this.subscriptions = []
  }
  setValue(value) {
    this.value = value
    this.subscriptions.forEach(f => f())
  }
  subscribe(f) {
    this.subscriptions.push(f)
  }
}
class Child extends React.PureComponent {
    render() {
        return <GrandChild />
    }
}
class GrandChild extends React.Component {
    componentDidMount() {
      // 4. GrandChild 獲取 store 后，進行訂閱
        this.context.theme.subscribe(() => this.forceUpdate())
    }
    // 5. GrandChild 從 store 中獲取所需要的值
    render() {
        return <p>{this.context.theme.value}</p>
    }
}
GrandChild.contextTypes = {
  theme: PropTypes.object
};
class Parent extends React.Component {
    constructor(p, c) {
      super(p, c)
      // 2. 我們實例化一個 store（想想 redux 的 store），并存到實例屬性中
      this.theme = new Theme('blue')
    }
    // 3. 通過 context 傳遞給 GrandChild 組件
    getChildContext() {
        return {theme: this.theme}
    }
    render() {
        // 6. 通過 store 進行發布
        return (
            <div onClick={() => {
                this.theme.setValue('red')
            }}>
              <Child />
              <Child />
            </div>
        )
    }
}
Parent.childContextTypes = {
  theme: PropTypes.object
};

// 1. 創建 Provider 和 Consumer
const {Provider, Consumer} = React.createContext('dark');
class Child extends React.Component {
  // 3. Consumer 組件接收一個函數作為子元素。這個函數接收當前的 context 值，并返回一個 React 節點。
  render() {
    return (
      <Consumer>
        {(theme) => (
        <button>
          {theme}
        </button>
      )}
      </Consumer>
    )
  }
}
class Parent extends React.Component {
  state = {
    theme: 'dark',
  };
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        theme: 'light'
      })
    }, 2000)
  }
  render() {
    // 2. 通過 Provider 的 value 傳遞值
    return (
      <Provider value={this.state.theme}>
        <Child />
      </Provider>
    )
  }
}

class Store {
    constructor() {
        this.subscriptions = []
    }
    publish(value) {
        this.subscriptions.forEach(f => f(value))
    }
    subscribe(f) {
        this.subscriptions.push(f)
    }
}
function createContext(defaultValue) {
    const store = new Store();
    // Provider
    class Provider extends React.PureComponent {
        componentDidUpdate() {
            store.publish(this.props.value);
        }
        componentDidMount() {
            store.publish(this.props.value);
        }
        render() {
            return this.props.children;
        }
    }
    // Consumer
    class Consumer extends React.PureComponent {
        constructor(props) {
            super(props);
            this.state = {
                value: defaultValue
            };
            store.subscribe(value => {
                this.setState({
                        value
                });
            });
        }
        render() {
            return this.props.children(this.state.value);
        }
    }
    return {
            Provider,
            Consumer
    };
}

import {REACT_PROVIDER_TYPE, REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
export function createContext(defaultValue) {
  const context = {
    $$typeof: REACT_CONTEXT_TYPE,
    // As a workaround to support multiple concurrent renderers, we categorize
    // some renderers as primary and others as secondary. We only expect
    // there to be two concurrent renderers at most: React Native (primary) and
    // Fabric (secondary); React DOM (primary) and React ART (secondary).
    // Secondary renderers store their context values on separate fields.
    _currentValue: defaultValue,
    _currentValue2: defaultValue,
    // Used to track how many concurrent renderers this context currently
    // supports within in a single renderer. Such as parallel server rendering.
    _threadCount: 0,
    // These are circular
    Provider: null,
    Consumer: null,
    // Add these to use same hidden class in VM as ServerContext
    _defaultValue: null,
    _globalName: null,
  };
  context.Provider = {
    $$typeof: REACT_PROVIDER_TYPE,
    _context: context,
  };
  context.Consumer = context;
  return context;
}