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

javascript 复制代码
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 />);

可以传递对象(通过 context 可以传递任何值)

javascript 复制代码
<CurrentUserContext.Provider
      value={{
        currentUser,
        setCurrentUser
      }}
    >
      <Form />
    </CurrentUserContext.Provider>

可以把把 provider 抽离成组件

javascript 复制代码
<MyProviders theme={theme} setTheme={setTheme}>
      <WelcomePanel />
</MyProviders>

function MyProviders({ children, theme, setTheme }) {
  const [currentUser, setCurrentUser] = useState(null);
  return (
    <ThemeContext.Provider value={theme}>
      <CurrentUserContext.Provider
        value={{
          currentUser,
          setCurrentUser
        }}
      >
        {children}
      </CurrentUserContext.Provider>
    </ThemeContext.Provider>
  );
}

可以同时存在多个content

javascript 复制代码
<ThemeContext.Provider value={theme}>
      <CurrentUserContext.Provider
        value={{
          currentUser,
          setCurrentUser
        }}
      >
        <WelcomePanel />
       </CurrentUserContext.Provider>
    </ThemeContext.Provider>

还可以和useReducer结合使用,在大型项目中

覆盖context

javascript 复制代码
const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
}

function Form() {
  return (
    <Panel title="Welcome">
      <Button>Sign up</Button>
      <Button>Log in</Button>
      <ThemeContext.Provider value="light">
        <Footer />
      </ThemeContext.Provider>
    </Panel>
  );
}

如果context value是有函数等多个成员时,可以通过useCallback和usememo来优化性能

javascript 复制代码
import { useCallback, useMemo } from 'react';

function MyApp() {
  const [currentUser, setCurrentUser] = useState(null);

  const login = useCallback((response) => {
    storeCredentials(response.credentials);
    setCurrentUser(response.user);
  }, []);

  const contextValue = useMemo(() => ({
    currentUser,
    login
  }), [currentUser, login]);

  return (
    <AuthContext.Provider value={contextValue}>
      <Page />
    </AuthContext.Provider>
  );
}
// 根据以上改变,即使 MyApp 需要重新渲染,调用 useContext(AuthContext) 的组件也不需要重新渲染,
// 除非 currentUser 发生了变化。
相关推荐
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip7 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel7 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休8 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪8 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do8 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选8 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选8 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼8 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——8 小时前
前端登录鉴权详解
前端·javascript