react_hooks系列06_useContext

Context状态树的使用，比较复杂，特别是使用Consumer时。

useContext这个hook能让Context使用起来变得非常简单。不需要再使用Consumer。使用useContext就能拿到context状态树里的值。

const value = useContext(context对象);

useContext函数的解释：

参数： context 对象（React.createContext 的返回值）

返回值： context对象的当前值（由上层组件中距离当前组件最近的 的 value prop 决定）

当组件上层最近的 Provider 更新时，该 Hook 会触发重新渲染 。

示例：

//context/index.js 创建context对象。
 
import {createContext} from "react";
 
export default createContext({count:0});
 
//主入口文件 index.js
 
import ReactDOM from 'react-dom';
import App from './App';
import Context from "./context"
 
let count = 10;
 
ReactDOM.render(
    <Context.Provider value={count}>
     <App/>
    </Context.Provider>,
  document.getElementById('root')
);
 
 
//孙子组件 App-->User-->UserAdd.js
 
import myContext from "../../../context";
import {useContext} from "react";
 
export default (props)=>{
    let context = useContext(myContext);
    console.log(context);
    return (
        <div>
            <h1>我是用户添加页面</h1>
            <p>count:{context}</p> //此处使用比起consumer是不是简单的多得多得多了呢？
            <p></p>
        </div>
    );
}