Ant Design Pro V5精讲（基础篇五）：useContext

解决痛点

  当组件树层级很深时，组件之间需要使用同一份数据时，通过组件的提升到父组件中用props传参的方式太过麻烦。

应用需求场景

1.兄弟组件之间共享state（即同一份数据）,useContext适合

2.爷孙组件（特别是组件树层级很深时）之间共享state,useContext适合

3.父子组件之间共享state，建议用useState+props实现普通父子组件之间传参即可。

4.项目工程各个组件全局共享state： 建议用UmiJS的插件@umijs/plugin-initial-state和@umijs/plugin-model一起搭配实现。

小结：context的使用场景就是“在组件树中，不同层级需要访问相同的数据源时，可以利用context，进行组件之间的通信或者订阅指定的context对象”。

特性

• 上下文变量的一种订阅方式
• 适合跨越组件层级直接传递变量，实现数据共享
• createContext 和 useContext 配套结合使用实现state共享
• <MyContext.Provider value={{ setStep, setCount, setNumber, fetchData }} /> 里面的方法可能越来越多，变得越来越臃肿，这时候配合useReducer，vaule={{dispatch}更省事。
• 只有一层的父子组件之间传参，使用普通的useState+props进行父子组件传参更适合。

用法示例

示例1：useContext+useState的定义共享数据

父组件parentComponent.tsx:
import React, { useContext } from "react";
import ReactDOM from "react-dom";

const TestContext= React.createContext({});
function App() {
  return (
	<TestContext.Provider 
		value={{
			username: '热水',
		}}
	>
}
子组件1：sub1Component.tsx:

const sub1Component= () => {
  const { username } = useContext(TestContext)

  return (
    <div>
      <p>{username}</p>
    </div>
  )
}
子组件2：sub2Compnent.tsx:
const sub2Compnent= () => {
  const { username } = useContext(TestContext)

  return (
    <div>
      <p>1 message for {username}</p>
    </div>
  )
}

示例2：useContext+useReducer

父组件：
import React, { useReducer } from 'react';
import Child from './Child';
import { MyContext } from './context-manager';

const initState = { count: 0, step: 0, number: 0 };

const reducer = (state, action) => {
    switch (action.type) {
        case 'stepInc': return Object.assign({}, state, { step: state.step + 1 });
        case 'numberInc': return Object.assign({}, state, { number: state.number + 1 });
        case 'count': return Object.assign({}, state, { count: state.step + state.number });
        default: return state;
    }
}

export default (props = {}) => {
    const [state, dispatch] = useReducer(reducer, initState);
    const { step, number, count } = state;

    return (
        <MyContext.Provider value={{ dispatch }}>
            <Child step={step} number={number} count={count} />
        </MyContext.Provider>
    );
}
子组件:
import React, { useContext, memo } from 'react';

import { MyContext } from './context-manager';

export default memo((props = {}) => {
    const { dispatch } = useContext(MyContext);

    return (
        <div>
            <p>step is : {props.step}</p>
            <p>number is : {props.number}</p>
            <p>count is : {props.count}</p>
            <hr />
            <div>
                <button onClick={() => { dispatch({ type: 'stepInc' }) }}>step ++</button>
                <button onClick={() => { dispatch({ type: 'numberInc' }) }}>number ++</button>
                <button onClick={() => { dispatch({ type: 'count' }) }}>number + step</button>
            </div>
        </div>
    );
});

示例3：不用useContext，用普通的props完成父子函数组件传参：

父组件（函数组件)：
import Child from 'Child';//引入子组件

const Father =() => {
	
	//父组件要传递给子组件的函数
	const func = () => {
		console.log("父组件")
	}
	
	return <Child func=func>  
	
}

子组件（函数组件)：
const Child = (props)=> {

	const handleClick = () => {
		const {func}=props;
		func();
	}
	
	return <button onclick={this.handleClick}>子组件</button>  
}