Web前端最全React入门之Context-API的使用案例，哔哩哔哩技术类面试

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

---

---

使用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}

  </GreetingContext.Provider>

  )

  }

  }

  export default GreetingContextProvider;

  然后是在App.js中引入，用GreetingContextProvider包裹消费组件（其他库和包的引入省略）

  import GreetingContextProvider from “./contexts/GreetingContext”;

  function App() {

  return (

  );

  }

  最后是在Navbar组件中使用

  使用contextType和consumer的区别之一是：

  • contextType只能接收一个context的数据，且是距离该消费组件最近的context

  • consumer可以接收多个context的数据

  因此，创建多个context的案例，我们用consumer来获取多个context的数据

  render() {

  return (

  // 使用GreetingContext.Consumer再包裹一层，解构该context中的数据和函数

  // 当isAGirl为true时，显示’hello,girl_{’，否则显示’hello,boy}’

  // 点击该文本，切换问候语

  <GreetingContext.Consumer>

  {

  (greetingContext) => {

  const { isAGirl, toggleGreeting } = greetingContext;

  return (

  <ThemeContext.Consumer>

  {

  (themeContext) => {

  const { isLightTheme, light, dark } = themeContext;

  const theme = isLightTheme ? light : dark;

  return (

  Context App

  { isAGirl ? ‘hello,girl~’ : ‘hello,boy~’}
• Home
• About
• Contact

• )

  }

  }

  </ThemeContext.Consumer>

  )

  }

  }

  </GreetingContext.Consumer>

  )

  }

  总结

  技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  { isAGirl ? ‘hello,girl~’ : ‘hello,boy~’}
• Home
• About
• Contact

• )

  }

  }

  </ThemeContext.Consumer>

  )

  }

  }

  </GreetingContext.Consumer>

  )

  }

  总结

  技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-oo4N8VQ3-1715860822553)]