03.useContext和createContext在Function组件中的父子和多级组件传值

和原生的Context类似 useContext 使用Context createContext创建Context

• 使用前

  import React,{Component} from 'react';
  class Comp1 extends Component{
    constructor(props){
      super(props);
      this.state = {count:0};
    }
    addCount(){
      this.setState({ count:this.state.count+1 })
    };
    render(){
      return <div>
        <p>点击了{this.state.count}次</p>
        <button onClick={this.addCount.bind(this)}>点击+1</button>
        <Child count={this.state.count} />
      </div>
    }
  }
  export default Comp1;
  
  // 子组件
  class Child extends Component{
    render(){
      return ( <h2>{this.props.count}</h2> )
    }
  }
  

• 使用后

  import React,{useState,createContext,useContext} from 'react';
  
  //声明上下文环境
  const CountContext=createContext();
  
  function Comp2(){
    const [count,addCount] = useState(0);
    
    return (
      <div>
        <p>点击了{count}次</p>
        <button
          onClick={()=>{addCount(count+1)}}
        >点击+1</button>
        
        <CountContext.Provider value={count}>
          <Child />
        </CountContext.Provider>
      </div>
    )
  }
  
  function Child(){
    //获取CountContext是父组件创建时的名字
    let count = useContext(CountContext);
    return ( <h2>{count}</h2> )
  }
  export default Comp2;