React & Sass 知识点汇总
📘 React 核心概念
什么是 React？
React 是一个用于构建用户界面的 JavaScript 库。可以把 React 想象成一个高效的UI建造工具，它帮助你用更少的时间和代码创建复杂的网页界面。
React 的核心特点是组件化：你将界面拆分成独立的小块（组件），每个组件管理自己的外观和行为，然后像搭积木一样组合它们。
JSX 语法
JSX 是 JavaScript 的语法扩展，让你可以在 JavaScript 代码中写类似 HTML 的结构：
大白话解释：JSX 就像是把 HTML 直接写在 JavaScript 文件中，这样写界面会更直观。浏览器不认识 JSX，所以 React 会把它转换成普通的 JavaScript。
组件（Components）
组件是 React 的核心构建块。有两种创建组件的方式：
函数组件（推荐）
return <h1>Hello, {props.name}</h1>;
}
类组件
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
组件复用：创建一个组件后，可以在多个地方重复使用它，只需像 HTML 标签一样：
<Welcome name=”Alice” />
Props（属性）
Props 是父组件传递给子组件的数据（类似于函数的参数）。
<Welcome name=“Alice” />
// 子组件接收数据
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
重要规则：Props 是只读的！子组件不能修改接收到的 props。
State（状态）
State 是组件内部管理的数据（类似于组件的私有变量）。
const [count, setCount] = React.useState(0); // 初始化状态
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
关键点：
- 使用 useState 创建状态
- 修改状态必须使用状态更新函数（如 setCount）
- 状态改变会使组件重新渲染
Hooks
Hooks 是 React 16.8 引入的新特性，让函数组件也能使用状态和其他 React 特性。
useEffect
用于执行副作用操作（如数据获取、订阅等）：
document.title = `Clicked ${count} times`;
}, [count]); // 依赖数组：count变化时运行
useContext
用于在组件树中传递数据，避免层层传递 props：
🎨 Sass 核心概念
什么是 Sass？
Sass (Syntactically Awesome Style Sheets) 是一个CSS 预处理器，可以理解为 CSS 的扩展升级版。它添加了许多强大的功能，让编写 CSS 更高效、更易维护。
Sass 需要编译成普通 CSS 才能在浏览器中使用（通常由构建工具自动完成）。
变量（Variables）
使用变量存储颜色、字体、尺寸等值，方便统一修改：
$primary-color: #4361ee;
$font-stack: Helvetica, sans-serif;
// 使用变量
body {
font: 100% $font-stack;
color: $primary-color;
}
好处：当需要修改主题色时，只需改变变量的值，所有使用该变量的地方都会自动更新。
嵌套（Nesting）
以嵌套结构编写 CSS，更符合 HTML 结构：
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
}
}
}
}
编译后会生成：
nav ul { … }
nav ul li { … }
nav ul li a { … }
混合（Mixins）
混合器可以定义可重用的样式片段：
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
// 使用混合
.box {
@include transform(rotate(30deg));
}
应用场景：处理浏览器前缀、创建复杂的动画、定义常用的样式模式等。
继承（Extend/Inheritance）
让一个选择器继承另一个选择器的样式：
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
// 继承基础样式
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
编译后，.message 和 .success 都会获得 %message-shared 的所有样式。
模块化（Modules）
将样式拆分到多个文件中，然后通过导入组合：
$primary-color: #4361ee;
$secondary-color: #3f37c9;
// styles.scss (主文件)
@use ‘variables’; // 导入变量文件
body {
color: variables.$primary-color;
}
好处：更好的组织样式，避免命名冲突。
条件与循环
Sass 支持类似编程语言的流程控制：
条件语句
background-color: #000;
} @else {
background-color: #fff;
}
循环语句
.item-#{$i} {
width: 20px * $i;
}
}