问题的产生

既然使用组件进行开发，那么避免不了组件之间的传参，在组件层级较少的时候，使用props来进行参数的传递是很方便的方法。那么当组件层级非常多的是时候，一层一层的传递props，一直传到十八层地狱(不是），岂不是太麻烦。这就是一个问题了

问题的解决

context就是为了解决这问题而出现的，可以简单的将context理解为穿透性的props，一插到底，不妨画个示意图

首先在最外层创建一个Context，然后使用React里的组件Context.Provider 将其传递下去，当某个子组件访问context时，会从该子组件一层一层往上找，一直找到离它最近的Provider(重要)，然后取到Provider上value的值

如何在子组件中修改context的值？

其实很简单，只要在context中携带一个用于修改context属性的方法，子组件通过调用此方法就可以达到修改的目的，这点和props并无不同。

代码示例

有了这个思路，我们再来看代码就容易多了

1.创建Context

import { createContext,useState } from "react"
const Context = createContext();

2.创建Provider和中间任意组件

        const A = ({ children }) => {
		    const [context,setContext] = useState({ name: "A" });
		    return (
		        <Context.Provider value={context}>
		            {children}
		        </Context.Provider>
		    )
		}
		
		const B = ({ children }) => {
		    return (
		        <div>
		            <h2>B</h2>
		            <div>
		                {children}
		            </div>
		        </div>
		    )
		}

3.访问Context

		const C = () => {
		    const contextC = useContext(Context);
		    return (
		        <div>
		            <h4>C</h4>
		            <div>
		                我是C，我要访问context，它的值是：{contextC.name}
		            </div>
		        </div>
		    )
             }
             const ComponentTest = () => {
                return (
                    <A>
                        <B>
                            <C />
                        </B>
                    </A>
                )
            }
            export default ComponentTest;

4.修改Context

首先对A稍微进行修改以使它可以传递函数

       const A = ({ children }) => {
		    const [context,setContext] = useState({ name: "A" });
		    const contextValue = {
		        value: context,
		        setContext: setContext
		    }
		    return (
		        <Context.Provider value={contextValue}>
		            {children}
		        </Context.Provider>
		    )
		}

只需要将函数包裹进去就可以,然后在C中调用此函数

		
		const C = () => {
		    const contextC = useContext(Context);
		    return (
		        <div>
		            <h4>C</h4>
		            <div>
		                我是C，我要访问context，它的值是：{contextC.value.name}
		            </div>
		            <button
		                className="btn border"
		                onClick={() => {
		                    contextC.setContext({ name: "C" });
		                }}>
		                修改context
		            </button>
		        </div>
		    )
		}