最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档
-
创建Context对象，定义一个浅色 vs 深色主题的样式，作用到Navbar和SongList组件上
-
取isLightTheme为标识，当值为true时，代表子组件选择使用浅色主题；
-
当值为false时，代表子组件选择使用深色主题
import React, { Component, createContext } from 'react';
// 创建context对象
export const ThemeContext = createContext();
// 数据定义
class ThemeContextProvider extends Component {
state = {
isLightTheme:true,
light:{
ui:'#ddd',
font:'#555',
bg:'#eee'
},
dark:{
ui:'#333',
font:'#ddd',
bg:'#555'
}
}
render(){
// 返回一个 Provider React 组件，它允许消费组件订阅 context 的变化
// 将数据传递给子组件
return (
<ThemeContext.Provider value={{...this.state}}>
{this.props.children}
</ThemeContext.Provider>
)
}
}
export default ThemeContextProvider;
在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获取
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;
效果：浅色主题的导航栏和主体部分
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，功能比较简单，就是打招呼，hello~
- 定义了一个布尔变量isAGirl，默认为true
常用的JavaScript设计模式
-
单体模式
-
工厂模式
-
例模式
函数
-
函数的定义
-
局部变量和全局变量
-
返回值
-
匿名函数
-
自运行函数
-
闭包
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
