ReactHook ContextHook

和context作用相同,可以解決多層組件傳遞參數

1、引入
	import React, {Component,useContext } from 'react';

2、定義Context
	const xx=React.createContext(初始值);

3、改變初始值
	組件中
  <xx.Provider value ={值}>
		...
  </xx.Provider>
  
4、獲取參數
	const x =useContext(xx);
	{x}

代碼示例:

import React, { Component,useState,useEffect,useRef,useContext } from 'react';
import logo from './logo.svg';
import './App.css';


//創建上下文對象，傳入初始值
const CountContext=React.createContext(0);

class App extends Component {
  state={
    count:1
  }
  render() {
    return (
      <div className="App">
        
      <CountContext.Provider value ={this.state.count}>
        <button onClick={()=>{this.setState({count:this.state.count+1})}}>add</button>
        <B></B>
      </CountContext.Provider>

      </div>
    );
  }
}

function B()
{
  return(
    <div>
        <h1>B組件</h1>
          <C></C>
          
    </div>

  )
}
function C()
{
  const count =useContext(CountContext);

  return(
    <div>

      C組件:{count}

    </div>
  )
}

export default App;