context上下文

context上下文有新旧两种写法：

新的用法：分为接受方和传值方；

import React, { Component } from 'react'
let store = {
    name: 'yangtao',
    from: '北京'
}
//创建上下文对象
const XdContext = React.createContext()
// 解构赋值，获取方法，Provider是传值方，Consumer是接收方
const { Provider, Consumer} = XdContext
function Info(props) {
    return (
        <Consumer>
            {
                store => {
                    return (
                        <div>
                            姓名：{store.name}
                            地区：{store.from}
                        </div>
                    )
                        
                }
            }
        </Consumer>
    )
}

// 儿子
function TolBar() {
    return (
        // 孙子
        <Info></Info>
    )
}

class Context1 extends Component{
    render() {
        return (
            <div>
                <Provider value={ store }>
                    <TolBar></TolBar>
                </Provider>
            </div>
        )
    }
}

旧的方法：

import React from 'react';
import './App.css';
import PropTypes from 'prop-types'



class Router extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      url: window.location.pathname
    }
    this.history = window.history
    this.history.route = (name) => {
      this.setState({
        url: `/${name}`
      })
      window.history.pushState(null,null,name)
    }
  }

  render() {
    return (
      <>
        {this.props.children}
      </>
    );
  }

  static childContextTypes = {//传递的数据类型检测；
    url: PropTypes.string,
    history: PropTypes.object
  }

  getChildContext () {//传递的数据；
    return {
      url: this.state.url,
      history: this.history
    }
  }




}

class Route extends React.Component{

  static contextTypes = {//接受数据的类型检测
    url: PropTypes.string,
    history: PropTypes.object
  }

  render() {
    const {
      component,
      path
    } = this.props
    const {
      url
    } = this.context

   
    return (
      <>
        {url === path &&  React.createElement(component,null,null)}
      </>
    );
  }




}

const AA = () => <div>aa</div>
const BB = () => <div>bb</div>

function App() {
  return (
    <div className="App">
      <Router >
        <header className="App-header">
          <div>header</div>
          <Route path='/aa' component={AA}/>
          <Route path='/bb' component={BB}/>
        </header>
      </Router>

    </div>
  );
}

export default App;

 至于context能不能被改变？如果可以如何改变，明天再说。。。。。