React Hooks之useContext

useContext

const value = useContext(MyContext);

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。
即使祖先使用 React.memo 或 shouldComponentUpdate，也会在组件本身使用 useContext 时重新渲染。

基本使用

1.创建全局Context上下文globalContext
2.App父组件通过Provider作为共享容器，生产Provider数据
3.Son子组件作为中间容器
4.Grandson孙组件通过useContext(globalContext)获取value渲染组件

globalContext.js

import React from 'react';
export const globalContext= React.createContext({
  //默认值defaultValue
  name: 'xiaoming',
  age: 18,
  sex: 'boy'
});
export const { Provider, Consumer } = globalContext;

App.js 父组件

import React, { Component } from 'react';
import Son from './son';//引入子组件
import { Provider } from './globalContext';
export default class App extends Component {
    render() {
        let student={
			  name: 'lily',
			  age: 17,
			  sex: 'girl'
			}
        return (
            //Provider共享容器 
            //如果没有Provider就会去context的默认值
            <Provider value={student}>
                <div>
                    <Son />
                </div>
            </Provider>
        );
    }
}

son.js 子组件

import React, { Component } from 'react';
import Grandson from "./grandson.js";//引入孙组件
export default class  Son extends Component {
    render() {
	    return (
	      <Grandson />
	    );
    }
}

grandson.js 孙组件

import React, { useContext } from 'react';
import { globalContext } from "./globalContext.js";//引入Consumer容器
export default function Grandson() {
    const value = useContext(globalContext)
    const { name, age, sex } = value;
    return (
        <div>
            name:{name}
            <br />
            age:{age}
            <br />
            sex:{sex}
        </div>
    );
}