react中的context，provider使用步骤

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

具体详见：context官方API

本篇文章只是详细的把我个人的学习日志给记录下来相当于又会了一个react相关的知识点，具体这些API可以参看官方API，已经写得很详细了；与context相关的API共有以下几个：

React.createContext
Context.Provider
Class.contextType
Context.Consumer
Context.displayName

如果想要在组件使用context，步骤具体如下：

1.首先设置context的初始值

// theme-context.ts中创建一个context，并设置初始值
import React from 'react'export const themes = {light: {foreground: '#000000',background: '#eeeeee',},dark: {foreground: '#ffffff',background: '#222222',},
}export const ThemeContext = React.createContext(themes.dark // 默认值
)

2.当点击button，切换theme，去动态改变context的value

//themed-button.tsx
import React from 'react'
import { ThemeContext } from './theme-context'class ThemedButton extends React.Component {render() {const { props } = thisconst theme = this.context //调用context中设置的themeconsole.log(theme)return (<button{...props}style={{ backgroundColor: theme.background, width: '200px', height: '100px', cursor: 'pointer' }}/>)}
}//把上文创建的context与此组件关联，这样就可以在ThemeButton这个组件中通过this.context去调用设置的值了，
//这只是其中一种方式，也可以在ThemedButton这个组件内部，通过 static contextType = ThemeContext;来与此组件关联
ThemedButton.contextType = ThemeContextexport default ThemedButton

3.在app.js中去动态切换context

// app.tsx 去动态切换context
import { ThemeContext, themes } from './theme-context'
import ThemedButton from './themed-button'function Page(props: any) {return props.children
}
function Section(props: any) {return props.children
}// 一个使用 ThemedButton 的中间组件
function Toolbar(props) {return (<ThemedButton onClick={props.changeTheme}>Change Theme</ThemedButton>)
}class App extends React.Component {constructor(props) {super(props)this.state = {theme: themes.light,}}toggleTheme = () => {this.setState(state => ({theme:state.theme === themes.dark? themes.light: themes.dark,}))}render() {// 在 ThemeProvider 内部的 ThemedButton 按钮组件使用 state 中的 theme 值，// 而外部的组件使用默认的 theme 值, 外部组件并不会发生变化，由此可见provider的作用了；return (<Page><ThemeContext.Provider value={this.state.theme}><Toolbar changeTheme={this.toggleTheme} /></ThemeContext.Provider><Section><ThemedButton /></Section></Page>)}
}//将此APP组件渲染到页面上
export default App

以上代码所实现的效果：

因为左边的按钮是被Provider所包裹的，右边的没有被包裹，看到这里是不是觉得很简单呢，以上就是应用context与Provider的实例了，小伙伴们若是有需要的话，可以照着做呀！
本次分享完毕！主要是参考了官方API，感谢官方所提供的例子！

react中的context，provider使用步骤相关推荐

react中context到底是如何传递的-源码分析
react中使用context 基本要求就是父组件中声明Parent.prototype.getChildContext 父组件中声明Parent.childContextType 子组件声明 Ch ...
React中Context API的应用
在之前react的工程项目中,关于数据流动以及父子组件中数据通信大都是通过react-redux.redux来完成,虽然可以解决问题,但是这种数据管理是较为复杂的,在最新的react16.3中推出了C ...
React中的组件通信——父传子、子传父、Context
0.认识组件间的通信在开发过程中,我们会经常遇到需要组件之间相互进行通信: 比如App可能使用了多个Header,每个地方的Header展示的内容不同,那么我们就需要使用者传递给Header一些数据 ...
React中Context的使用
一.概述 Context 提供了一种在组件之间共享值的方式,而不必显式地通过组件树的逐层传递 props.如果获取值和使用值的层级相隔很远,或者需要使用这个值的组件很多很分散,则可以使用Context ...
React 中 Context 和 contextType的使用
React 中 Context 的使用 context Context 提供了一种方式,能够让数据在组件树中传递时不必一级一级的手动传递一般情况下,数据在组件中,要一级一级的传递,单向数据流,比如P ...
this指向、数据双向流、传递参数、JSX中循环、React中样式、路由、引入资源的其它方式、create-react-app脚手架、事件处理、获取数据、UI框架推荐、pc桌面应用electronjs
改变this指向的几种方式: //1.使用箭头函数代替原始函数写法:getState=()=>{}//2.在函数调用时给函数名加bind(this)方法:(bind中第一个参数表示修改this指 ...
React 中同构（SSR）原理脉络梳理
随着越来越多新型前端框架的推出,SSR 这个概念在前端开发领域的流行度越来越高,也有越来越多的项目采用这种技术方案进行了实现.SSR 产生的背景是什么?适用的场景是什么?实现的原理又是什么?希望大家在 ...
[react] 怎么使用Context开发组件？
[react] 怎么使用Context开发组件? import React, {Component} from 'react'// 首先创建一个 context 对象这里命名为:ThemeContex ...
react hooks使用_如何使用React Hooks和Context API构建简单的PokémonWeb App
react hooks使用 After seven years of full stack development using Ruby, Python, and vanilla JavaScript ...

react中的context，provider使用步骤

1.首先设置context的初始值

2.当点击button，切换theme，去动态改变context的value

3.在app.js中去动态切换context

react中的context，provider使用步骤相关推荐

最新文章

热门文章