小羊茶话屋

什么是 Redux？

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。它将应用的所有状态存储在一个单一的 store 中，并且只允许通过纯函数来修改状态。

核心概念

Store：Redux store 是一个保存应用所有状态的对象
State：Redux store 的内容，就是应用的全部状态
Action：描述状态变化的对象，包含 type 属性和可选的 payload 属性
Reducer：接收当前 state 和 action，返回新 state 的纯函数
Dispatch：Redux store 提供的用于触发 action 的方法
Middleware：Redux 的扩展机制，用于处理异步操作、日志等

xiaoWu2025年3月20日大约 3 分钟

1. 页面骨架（结构类）

标签	语义 & 典型场景
`<header>`	页头、文章/区块头部（logo + 主导航）
`<nav>`	主要导航链接组（不是页脚那种辅助导航）
`<main>`	页面主体内容唯一区域（一个页面只能用一次）
`<section>`	主题性内容分组，通常带标题（章节、选项卡面板）
`<article>`	可独立分发的完整内容（帖子、商品卡片、评论）
`<aside>`	与主内容弱相关的侧边栏（广告、相关文章列表）
`<footer>`	页脚、文章/区块尾部（版权、备案号、作者信息）

xiaoWu2025年8月26日大约 2 分钟

Docker安装和使用(windows)

安装Docker Desktop
https://www.docker.com/
跟新安装或更新 wsl 以管理员权限运行cmd

wsl --update --web-download

xiaoWu2025年8月15日小于 1 分钟

CSS grid布局

Grid 布局基础概念

CSS Grid 布局是一个二维的布局系统，它可以同时处理行和列，是目前最强大的 CSS 布局方案之一。与传统的布局方式和 Flexbox（一维布局）相比，Grid 布局可以轻松创建复杂的网格结构。

基本术语

Grid 容器（Grid Container）：设置了 display: grid 的元素
Grid 项目（Grid Item）：Grid 容器的直接子元素
Grid 线（Grid Line）：构成网格结构的分界线
Grid 单元格（Grid Cell）：网格中的最小单位
Grid 区域（Grid Area）：由多个 Grid 单元格组成的矩形区域

xiaoWu2025年3月11日大约 6 分钟

JavaScript Array

Array() 构造函数

new Array();
new Array(element0);
new Array(element0, element1);
new Array(element0, element1, /* … ,*/ elementN);
new Array(arrayLength);

Array();
Array(element0);
Array(element0, element1);
Array(element0, element1, /* … ,*/ elementN);
Array(arrayLength);

xiaoWu2025年3月11日大约 40 分钟

JavaScript ES6+新增语法

ES6 (ECMAScript 2015)

// 1. 箭头函数
const add = (a, b) => a + b; 

// 2. 解构赋值
const [x, y] = [1, 2];
const {name, age} = {name: 'John', age: 30};

// 3. Promise
new Promise((resolve) => setTimeout(resolve, 1000));

// 4. 类语法
class Person {
  constructor(name) {
    this.name = name;
  }
}

// 5. 模板字符串
const greeting = `Hello ${name}!`;

xiaoWu2025年3月11日大约 2 分钟