结束
一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！
export default App;
当 `Provider` 提供的值更改时，`Consumer`必须重新渲染！
import React, { createContext } from 'react';
// 创建Context的唯一方法 const ThemeContext = createContext()
class App extends React.Component { state = { theme: 'red' } render () { const { theme } = this.state return ( // 使用 Context.Provider包裹后续组件，value指定值 <ThemeContext.Provider value={theme}> {/* 当Context的Provider值更改时，Consumer 的值必须重新渲染 */} <button onClick={() => {this.setState({ theme: 'yellow'})}}>按钮 </ThemeContext.Provider> ) } }
class Bottom extends React.Component { render () { return ( // Context.Consumer Consumer消费者使用Context的值 // 但子组件不能是其他组件，必须渲染一个函数，函数的参数就是Context的值 <ThemeContext.Consumer> { theme =>
ThemeContext的值为{theme}
} </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://docs.qq.com/doc/DSmRnRGxvUkxTREhO)》
## Vue 面试题
1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
