脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Context

React Context详解使用方法

 更新时间：2022年12月03日 11:36:10   作者：码农小菲  
Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过props属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的

一、概述

  • Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。
  • 如果多个组件中都需要这个值 或者 获取值和使用值的层级相隔很远，就可以使用Context(上下文)来共享数据。
  • 如：地区偏好，UI 主题、当前认证的用户、语言等
  • 谨慎使用，这会使组件的复用性变差

二、API

React.createContext

const MyContext = React.createContext（defaultValue）
  • 创建一个 Context 对象
  • 提供一个默认值，只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效

Context.Provider

  const MyContext = React.createContext（defaultValue）
  <MyContext.Provider value={xxx}> ... </MyContext.Provider>
  • 每个 Context 对象都会返回一个 Provider React 组件
  • Provider 接收一个 value 属性，传递给消费组件。一个 Provider 可以对应多个消费组件。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据
  • value 值发生变化时，它内部的所有消费组件都会重新渲染

Class.contextType

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* 在组件挂载完成后，使用 MyContext 组件的值来执行一些有副作用的操作 */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* 基于 MyContext 组件的值进行渲染 */
  }
}
MyClass.contextType = MyContext;
  • 挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象
  • 可以在任意生命周期中访问

Context.Consumer

<MyContext.Consumer>
   {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>
  • 消费组件(子组件)中使用value
  • 函数作为子元素；这个函数接收当前的 context 值，返回一个 React 节点。传递给函数的 value 值等同于往上组件树离这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider，value 参数等同于传递给 createContext() 的 defaultValue。

Context.displayName

const MyContext = React.createContext()
MyContext.displayName = 'MyDisplayName'
<MyContext.Provider> //在 DevTools 中显示的标签：MyDisplayName.Provider  
<MyContext.Consumer>//在 DevTools 中显示的标签：MyDisplayName.Consumer  
//如果没有 MyContext.displayName = 'MyDisplayName' ，则显示Context.Provider、Context.Consumer

在 DevTools 中需要显示的内容

三、使用

1.自定义Context (类组件中使用)

//ThemeContext.js
import React from 'react'
export const ThemeContext = React.createContext('light')
//themed-button.js
//在需要的位置使用 Class.contextType
import React, { Component } from 'react';
import ThemeContext from "./context/ThemeContext.js";

class ThemedButton extends Component {
	static contextType = ThemeContext;
	render() {
		return <button>{this.context}</button>;
	}
}
export default ThemedButton
//app.js
//上下文包裹组件 Context.Provider
import ThemeContext from './context/ThemeContext.js';
import ThemedButton from './ThemedButton.js';
import './App.css';
function App() {
  return (
    <ThemeContext.Provider value='dark'> //dark将默认值light覆盖
      <div className="App">
        <header className="App-header">
          <ThemedButton />
        </header>
      </div>
    </ThemeContext.Provider>
  );
}
export default App;

2.使用Consumer支持获取多个Context上的值

需要多个上下文的值时可以使用Consumer

//ThemeContext.js
import React from 'react'
const ThemeContext = React.createContext('light')
ThemeContext.displayName = 'ThemeContext'
export default ThemeContext
//UserContext.js
import React from 'react'
const UserContext = React.createContext('guest')
UserContext.displayName = 'UserContext'
export default UserContext
//app.js
//使用Provider赋值：
import React, { Component } from 'react';
import ThemeContext from './context/ThemeContext.js';
import UserContext from './context/UserContext.js';
import ThemedButton from './ThemedButton.js';
import './App.css';
class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
        <ThemeContext.Provider value={'dark'}>
          <div className="App">
            <UserContext.Provider value={'user'}>
              <header className="App-header">
                <ThemedButton />
              </header>
            </UserContext.Provider>
          </div>
        </ThemeContext.Provider>
    );
  }
}
export default App
//themed-button.js
import React, { Component } from 'react';
import ThemeContext from "./context/ThemeContext.js";
import UserContext from "./context/UserContext.js";
class ThemedButton extends Component {
	render() {
		return (
			<>
				<ThemeContext.Consumer>
					{theme => <div>{theme}</div>}
				</ThemeContext.Consumer>
				<UserContext.Consumer>
					{user => <div>{user}</div>}
				</UserContext.Consumer>
			</>
		);
	}
}
export default ThemedButton

3.useContext使用（函数式组件中使用）

react原生Hook ,让函数式组件也可以使用Context,而且支持多个不同类型的context

//ThemeContext.js
import React from 'react'
const ThemeContext = React.createContext('light')
ThemeContext.displayName = 'ThemeContext'
export default ThemeContext
//UserContext.js
import React from 'react'
const UserContext = React.createContext('guest')
UserContext.displayName = 'UserContext'
export default UserContext
//app.js
//使用Provider赋值：
import React, { Component } from 'react';
import ThemeContext from './context/ThemeContext.js';
import UserContext from './context/UserContext.js';
import ThemedButton from './ThemedButton.js';
import './App.css';
const App = () => {
  render() {
    return (
        <ThemeContext.Provider value={'dark'}>
          <div className="App">
            <UserContext.Provider value={'user'}>
              <header className="App-header">
                <ThemedButton />
              </header>
            </UserContext.Provider>
          </div>
        </ThemeContext.Provider>
    );
  }
}
export default App
//themed-button.js
import { useContext } from 'react'
import ThemeContext  from './context/ThemeContext'
import UserContext from './context/UserContext'
const ThemedButton = () => {
 const theme = useContext(ThemeContext)
 const user = useContext(UserContext)
 return (
    <>
		<div>{theme}</div>
		<div>{user}</div>
	</>
 )
}
export default ThemedButton

到此这篇关于React Context详解使用方法的文章就介绍到这了,更多相关React Context内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 使用React Native创建以太坊钱包实现转账等功能

    使用React Native创建以太坊钱包实现转账等功能

    这篇文章主要介绍了使用React Native创建以太坊钱包，实现转账等功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • React redux 原理及使用详解

    React redux 原理及使用详解

    这篇文章主要为大家介绍了React redux 原理及使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 详解react-redux插件入门

    详解react-redux插件入门

    这篇文章主要介绍了详解react-redux插件入门，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • React Native设备信息查看调试详解

    React Native设备信息查看调试详解

    这篇文章主要为大家介绍了React Native设备信息查看调试详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 详解React组件卸载怎么中止递归方法

    详解React组件卸载怎么中止递归方法

    最近在处理项目代码的时候,出现了一个bug,组件中的方法在组件卸载后仍然在执行,代码片段发给我看,但是变量的用意我也不懂,只看到有方法调用自身方法,这不就是递归嘛,所以本文详细给大家介绍了React组件卸载怎么中止递归方法,需要的朋友可以参考下
    2024-01-01
  • React获取Java后台文件流并下载Excel文件流程解析

    React获取Java后台文件流并下载Excel文件流程解析

    这篇文章主要介绍了React获取Java后台文件流下载Excel文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • react中如何对自己的组件使用setFieldsValue

    react中如何对自己的组件使用setFieldsValue

    react中如何对自己的组件使用setFieldsValue问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • React实现骨架屏的示例代码

    React实现骨架屏的示例代码

    这篇文章主要为大家详细介绍了如何通过React自动化实现骨架屏,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-11-11
  • React中的useState和setState的执行机制详解

    React中的useState和setState的执行机制详解

    这篇文章主要介绍了React中的useState和setState的执行机制,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • react之组件通信详解

    react之组件通信详解

    本篇文章主要介绍了React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2021-10-10

最新评论