react:usecontext使用

本文主要是介绍react:usecontext使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

useContext返回 调用组件上方最近的 SomeContext.Provider 的 value
如果没有这样的 provider 传递给 createContext 的 defaultValue。返回的值始终是最新的。
如果 context 发生变化，React 会自动重新渲染读取 context 的组件。

1. <Context.Provider> 需要位于调用 useContext() 的组件 之上。
2. 使用 memo 来跳过重新渲染并不妨碍子级接收到新的 context 值。

https://codepen.io/pen?&editors=001

const { createRoot } = ReactDOM;
const ThemeContext = React.createContext('light'); 
// import { createContext, useContext } from 'react';const {  Button, Flex  } = antd;// 由于组件A被放置在了<ThemeContext.Provider value="dark">的范围内，
//它会成功地从上下文中获取到ThemeContext的值。因此，组件A不需要直接传递ThemeContext，并且不会因此而报错。
const A = () => {const theme = React.useContext(ThemeContext);return <div>123{theme}</div>
}const App = () => (<ThemeContext.Provider value="dark"><Flex gap="small" wrap="wrap"><Button type="primary">Primary Button</Button><Button>Default Button</Button><Button type="dashed">Dashed Butto1n</Button><Button type="text">Text Button</Button><Button type="link">Link Button</Button></Flex><A/></ThemeContext.Provider>
);
const ComponentDemo = App;createRoot(mountNode).render(<ComponentDemo />);

这篇关于react:usecontext使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---