react hooks--useContext

概述

在之前的开发中,我们要在组件中使用共享的Context有两种方式:

  •  类组件可以通过 类名.contextType = MyContext方式,在类中获取context;
  •  多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context;

context基础语法

使用场景:跨组件共享数据。

Context 作用:实现跨组件传递数据,而不必在每个级别手动传递 props,简化组件之间的数据传递过程

Context 对象包含了两个组件

  • <Context.Provider value>:通过 value 属性提供数据。
  • <Context.Consumer>:通过 render-props 模式,在 JSX 中获取 Context 中提供的数据。

注意:

  1. 如果提供了 Provider 组件,Consumer 获取到的是 Provider 中 value 属性的值。
  2. 如果没有提供 Provider 组件,Consumer 获取到的是 createContext(defaultValue) 的 defaultValue 值。

useContext使用

基本语法

作用:在函数组件中,获取 Context 中的值。要配合 Context 一起使用。

useContext Hook 与 <Context.Consumer> 的区别:获取数据的位置不同,

  • <Context.Consumer>:在 JSX 中获取 Context 共享的数据。
  • useContext:在 JS 代码中获取 Context 的数据。

解释:

  • useContext 的参数:Context 对象,即:通过 createContext 函数创建的对象。
  • useContext 的返回值:Context 中提供的 value 数据。

多个 context 的用法

以前的方式:

context/them-context.js

复制代码
import React from 'react';
// 创建一个上下文
const ThemContext = React.createContext()

export default ThemContext

context/user-context.js

复制代码
import React from 'react';
// 创建一个上下文
const UserContext = React.createContext()

export default UserContext

祖先组件:

复制代码
import React, { Component } from 'react';
import Home from './Home';
import ThemContext from './context/them-context'
import UserContext from './context/user-context'
class classHello extends Component {
  render() {
    return (
      <div>
      <UserContext.Provider value={{nickName: 'zs'}}>
        <ThemContext.Provider value={{color: 'red', size: '30'}}>
          <Home />
        </ThemContext.Provider>
      </UserContext.Provider>
      </div>
    );
  }
}

export default classHello;

父组件:

复制代码
import React, { Component } from 'react'
import HomeInfo from './HomeInfo'
import HomeBanner from './HomeBanner'
export class Home extends Component {
  render() {
    return (
      <div>
        Home
        <hr />
        <HomeInfo />
        <HomeBanner />
      </div>
    )
  }
}

export default Home

孙组件:使用(获取context)

复制代码
import React, { Component } from 'react'
import ThemContext from './context/them-context'
import UserContext from './context/user-context'
export class HomeInfo extends Component {
  
  render() {
    console.log(this.context);
    return (
      <div>
        <p>HomeInfo(类组件):{this.context.color}</p>
        <UserContext.Consumer>
          {
            value => {
              return <h2>Info User:{value.nickName}</h2>
            }
          }
        </UserContext.Consumer>
      </div>
    )
  }
}
HomeInfo.contextType = ThemContext
export default HomeInfo

孙组件:使用(获取context)

复制代码
import React from 'react'
import ThemContext from './context/them-context'
export default function HomeBanner() {
  return (
    <div>
      HomeBanner(函数组件):
      {
        <ThemContext.Consumer>
          {
            value => {
              return <span>{value.color}</span>
            }
          }
        </ThemContext.Consumer>
      }
    </div>
  )
}

现在的方式:

context/user-context.js

复制代码
import {createContext} from 'react'

const UserContext =  createContext()

export default UserContext

context/theme-context.js

复制代码
import {createContext} from 'react'

const ThemeContext =  createContext()

export default ThemeContext

context/index.js

复制代码
import UserContext from "./user-context";
import ThemeContext from "./theme-context";

export {
  UserContext,
  ThemeContext
}

index.js

复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ThemeContext, UserContext } from './context';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <UserContext.Provider value={{name: 'zs',age: 20}}>
    <ThemeContext.Provider value={{color:'red', size: 20}}>
      <App />
    </ThemeContext.Provider>
  </UserContext.Provider>
);

reportWebVitals();

App.js:使用(获取context)

复制代码
import React, { memo, useContext } from 'react'
import { ThemeContext, UserContext } from './context'

const App = memo(() => {

  // useContext hook获取
  const user = useContext(UserContext)
  const theme = useContext(ThemeContext)

  return (
    <div>
      <p>user: {user.name}--{user.age}</p>
      <p>theme:{theme.color}--{theme.size}</p>
    </div>
  )
})

export default App

注意事项:

 当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重新渲染,并使用最新传递给 MyContext provider 的 context value 值

总结

相关推荐
东东233几秒前
前端开发中如何取消Promise操作
前端·javascript·promise
掘金安东尼5 分钟前
官方:什么是 Vite+?
前端·javascript·vue.js
柒崽7 分钟前
ios移动端浏览器,vh高度和页面实际高度不匹配的解决方案
前端
渣哥23 分钟前
你以为 Bean 只是 new 出来?Spring BeanFactory 背后的秘密让人惊讶
javascript·后端·面试
烛阴31 分钟前
为什么游戏开发者都爱 Lua?零基础快速上手指南
前端·lua
大猫会长41 分钟前
tailwindcss出现could not determine executable to run
前端·tailwindcss
Moonbit1 小时前
MoonBit Pearls Vol.10:prettyprinter:使用函数组合解决结构化数据打印问题
前端·后端·程序员
533_1 小时前
[css] border 渐变
前端·css
云中雾丽1 小时前
flutter的dart语言和JavaScript的消息循环机制的异同
前端
地方地方1 小时前
Vue依赖注入:provide/inject 问题解析与最佳实践
前端·javascript·面试