2024年React进阶（十三）：Context_themecontext，自学前端

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

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

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

  <ThemeContext.Consumer>
    {
      theme => <h1>ThemeContext的值为{theme}</h1>
    }
  </ThemeContext.Consumer>
)

}
}

class Middle extends React.Component {
render () {
return
}
}

export default App;

当出现多个`Context`的时候，应该如何使用呢？

import React, { createContext } from ‘react’;

// 创建Context的唯一方法
const ThemeContext = createContext()
const SizeContext = createContext()

class App extends React.Component {
state = {
theme: ‘red’,
size: ‘small’
}
render () {
const { theme, size } = this.state
return (
// 使用Context.Provider包裹后续组件，value指定值
<ThemeContext.Provider value={theme}>
{/* 当出现多个Context的时候，只需要将Context.Provider嵌套即可 */}
<SizeContext.Provider value={size}>
{/* 当Context的Provider值更改时，Consumer的值必须重新渲染 */}
<button onClick={() => {this.setState({ theme: ‘yellow’, size: ‘big’})}}>按钮

</SizeContext.Provider>
</ThemeContext.Provider>
)
}
}

class Bottom extends React.Component {
render () {
return (
// Context.Consumer Consumer消费者使用Context得值
// 但子组件不能是其他组件，必须渲染一个函数，函数的参数就是Context的值
// 当出现多个Consumer的时候，进行嵌套，每个Consumer的子组件必须是一个函数，即可
<ThemeContext.Consumer>
{
theme => (
<SizeContext.Consumer>
{
size => (

ThemeContext 的 值为 {theme}; SizeContext 的值为 {size}

)
}
</SizeContext.Consumer>
)
}
</ThemeContext.Consumer>
)
}
}

class Middle extends React.Component {
render () {
return
}
}

export default App;

当`Consumer` 向上找不到 `Provider` 的时候，怎么办？`react` 并不会报错，只不过取不到值而已。所以，创建 `Context` 的时候 `createContext` 可以传入默认值，当找不到 `Provider` 的时候，就会显示默认值。



> 
> 注意：`context` 类似于全局变量做法，会让组件失去独立性、复用起来更困难，不能滥用，但本身它一定有适合使用的场景，具体看情况使用。
> 
> 
> 


### contextType


`contextType` 可以简化 `context` 的使用，不使用 `consumer` 也可以共享变量。


具体看下面例子

import React, { createContext } from ‘react’;

// 创建Context的唯一方法
const ThemeContext = createContext()
const SizeContext = createContext()

class App extends React.Component {
  state = {
    theme: 'red',
    size: 'small'
  }
  render () {
    const { theme, size } = this.state
    return (
      // 使用Context.Provider包裹后续组件，value指定值 
      <ThemeContext.Provider value={theme}>
        {/\* 当出现多个Context的时候，只需要将Context.Provider嵌套即可 \*/}
        <SizeContext.Provider value={size}>
          {/\* 当Context的Provider值更改时，Consumer的值必须重新渲染 \*/}
          <button onClick={() => {this.setState({ theme: 'yellow', size: 'big'})}}>按钮</button>
          <Middle></Middle>
        </SizeContext.Provider>
      </ThemeContext.Provider>
    )
  }
}

class Bottom extends React.Component {
  // 声明静态变量，contextType 将 context 直接赋值于 contextType
  static contextType = ThemeContext
  
  render () {
    // 在render函数中可以直接访问this.context获取共享变量，这样就可以不使用consumer
    const theme = this.context
    return (
      // Context.Consumer Consumer消费者使用Context的值
      // 但子组件不能是其他组件，必须渲染一个函数，函数的参数就是Context的值
      // 当出现多个Consumer的时候，进行嵌套，每个Consumer的子组件必须是一个函数，即可
      <div>
        <h1>ThemeContext的值为{theme} </h1>
      </div>
    )
  }
}

class Middle extends React.Component {
  render () {
    return <Bottom></Bottom>
  }
}

export default App;

> 
> 注意：  
>  `contextType` 只能在类组件中使用， 一个组件如果有多个 `consumer` ， `contextType`只对其中一个有效，所以说，contextType 只能有一个！
> 
> 
> 


### 拓展阅读


* 《[React进阶（十二）：HOOK](https://bbs.csdn.net/topics/618166371)》


![在这里插入图片描述](https://img-blog.csdnimg.cn/c9285cc03fb64e8085e96ca845c54420.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_17,color_FFFFFF,t_70,g_se,x_16#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/886323d76c484a189c098c0cf2add3fb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/fdb9bdc3ad6c42f0b019a4e3feeb31b0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e339921403434a68b97d5adb2728e199.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/607bbb4a363f4c24ba1f38cb64e0027d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ed7e6fbefbdb4320aa6c9ba11d7af916.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)




#### 结束  

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)



端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)