React入门之Context-API的使用案例

在App.js中引入ThemeContextProveder组件;

包裹住需要设置主题的组件：Navbar和SongList

import Navbar from “./components/Navbar”;

import SongList from “./components/SongList”;

import ThemeContextProvider from “./contexts/ThemeContext”;

function App() {

return (

);

}

export default App;

这样我们就能在Navbar和SongList里使用共享的数据了

获取数据的方式有两种，一种是通过contextType获取，另一种是通过consumer获取

---

使用contextType获得数据

---

Navbar.js

import React, { Component } from ‘react’

import { ThemeContext } from ‘…/contexts/ThemeContext’;

class Navbar extends Component {

static contextType = ThemeContext; // 使用contextType获取共享的数据

render() {

const { isLightTheme, light, dark } = this.context; // 解构变量

const theme = isLightTheme ? light : dark; // 当isLightTheme为true时，用浅色主题

// 返回带有主题样式的JSX模板内容

return (

Context App

• Home
• About
• Contact

• )

  }

  }

  export default Navbar;

  效果：浅色主题的导航栏

  ---

  

  ---

  import React, {Component} from ‘react’

  import { ThemeContext } from ‘…/contexts/ThemeContext’;

  class SongList extends Component {

  static contextType = ThemeContext;

  render(){

  const { isLightTheme, light, dark } = this.context;

  const theme = isLightTheme ? light : dark;

  return (
• 大鱼
• 幽灵公主
• 望

• )

  }

  }

  export default SongList;

  效果：浅色主题的导航栏和主体部分

  ---

  

  ---

  使用consumer获取共享数据

  ---

  Navbar.js

  import React, { Component } from ‘react’

  import { ThemeContext } from ‘…/contexts/ThemeContext’;

  class Navbar extends Component {

  render() {

  // 调用Consumer方法，其child只能有一个，且为function

  return (

  <ThemeContext.Consumer>

  {

  (context) => {

  const { isLightTheme, light, dark } = context;

  const theme = isLightTheme ? light : dark;

  return (

  Context App
• Home
• About
• Contact

• )

  }

  }

  </ThemeContext.Consumer>

  )

  }

  }

  export default Navbar;

  SongList.js

  import React, { Component } from ‘react’

  import { ThemeContext } from ‘…/contexts/ThemeContext’;

  class SongList extends Component {

  render() {

  return (

  <ThemeContext.Consumer>

  {

  (context) => {

  const { isLightTheme, light, dark } = context;

  const theme = isLightTheme ? light : dark;

  return (

  )

  }

  }

  </ThemeContext.Consumer>

  )

  }

  }

  export default SongList;

  效果同上

  ---

  更新共享数据

  ---

  • 数据是存储在ThemeContext里的，props也可以传递函数，

  • 因此，我们可以在ThemeContext里定义更新数据的函数，并传递给消费组件，

  • 消费组件返回要更新的信号，ThemeContext就开始更新

  // 更换主题

  toggleTheme = () => {

  this.setState({

  isLightTheme: !this.state.isLightTheme

  })

  }

  // 在原来传递state数据的基础上，加上更换主题的函数

  render() {

  return (

  <ThemeContext.Provider value={{ …this.state, toggleTheme: this.toggleTheme }}>

  {this.props.children}

  </ThemeContext.Provider>

  )

  }

  SongList组件接收该函数并给出回应

  增加一个”切换主题“的按钮，点击一下就调用toggleTheme，切换主题样式

  <ThemeContext.Consumer>

  {

  (context) => {

  const { isLightTheme, light, dark, toggleTheme } = context; // 添加“切换主题”函数的解构

  const theme = isLightTheme ? light : dark;

  return (

  切换主题

  {/* 点击按钮时触发toggleTheme函数 */}

  )

  }

  }

  </ThemeContext.Consumer>

  效果：

  

  ---

  创建多个context

  ---

  首先是创建新的context，功能比较简单，就是打招呼，hello~

  • 定义了一个布尔变量isAGirl，默认为true

  • 定义一个问候语的切换函数toggleGreeting

  • 把state和函数都传递给消费组件

  import React, { Component, createContext } from ‘react’;

  export const GreetingContext = createContext();

  class GreetingContextProvider extends Component {

  state = {

  isAGirl: true

  }

  // 更换问候语

  toggleGreeting = () => {

  this.setState({

  isAGirl: !this.state.isAGirl

  })

  }

  render() {

  return (

  <GreetingContext.Provider value={{ …this.state, toggleGreeting: this.toggleGreeting }}>

  {this.props.children}

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  。**

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-DSNaKSnJ-1715585963785)]

  [外链图片转存中…(img-Q9rBrN4u-1715585963785)]

  [外链图片转存中…(img-AO8KXzvX-1715585963786)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！