React
Context ，即上下文，通过上下文可以跨父子孙之间进行传值
使用createContext示例
import React from "react";
import ReactDOM from "react-dom";
/*
1.需要引入createContext,useContext
2.通过createContext来创建句柄
3.Context.Provider来确定共享范围
4.通过value来分发内容 5.在子组件中通过useContext（Context句柄）来获取数据
*/
// 创建 Context
const NumberContext = React.createContext();
// 它返回一个具有两个值的对象
// { Provider, Consumer }
function App() {
cosnt state={
new:'new',
old:['old']
}
// 使用 Provider 为所有子孙代提供 value 值
return (
<NumberContext.Provider value={state}>
<div>
<Display />
</div>
</NumberContext.Provider>
);
}
function Display() {
// 使用 Consumer 从上下文中获取 value
return (
<NumberContext.Consumer>
{value => <div>The answer is {value}.</div>}
</NumberContext.Consumer>
);
}
ReactDOM.render(<App />, document.querySelector("#root"));使用useContext
import React, { useContext } from 'react';
//调用useContext，传入从`React.createContext`获取的上下文对象。
//唯一需要注意的是你必须将整个上下文对象传递给useContext - 而不仅仅是Consumer，
function Display() {
//获取到父组件传递过来的数据，对象/数组/值
const value = useContext(NumberContext);
return <div>The answer is {value}.</div>;
}