Docker7530
193 lines
4.7 KiB
Markdown
193 lines
4.7 KiB
Markdown
# 学习资料
|
||
|
||
https://u19tul1sz9g.feishu.cn/docx/WEWJdSzF5oTnwvxHGGAc0Vojnxe?from=from_copylink
|
||
|
||
密码：M6923&65
|
||
|
||
# 关于 Node 的理解
|
||
|
||
| Node.js | Java |
|
||
| --------------- | ----------- |
|
||
| Node.js version | JDK version |
|
||
| V8 Engine | JVM |
|
||
| Npm | Maven |
|
||
| N-API | JNI |
|
||
|
||
```
|
||
┌───────────────┐
|
||
│ JS APP │
|
||
└───────▲───────┘
|
||
│
|
||
┌───────┴───────┐
|
||
│ NPM │ ← 包管理 & 生态
|
||
└───────▲───────┘
|
||
│
|
||
┌───────┴───────┐
|
||
│ Node.js │ ← Runtime（API / EventLoop / Libuv）
|
||
└───────▲───────┘
|
||
│
|
||
┌───────┴───────┐
|
||
│ V8 │ ← JS 引擎
|
||
└───────▲───────┘
|
||
│
|
||
操作系统
|
||
```
|
||
|
||
## Node.js 版本
|
||
|
||
[Node.js](https://nodejs.org/zh-cn/about/previous-releases) 采用固定节奏发布 + LTS 生命周期，每 6 个月发布一个，相当于每年会覆盖一个 LTS。
|
||
|
||
# 第一章 开发环境与核心概念
|
||
|
||
初始化环境
|
||
|
||
```bash
|
||
pnpm create vite@latest basic2 --template react-ts
|
||
```
|
||
|
||
所谓的优雅公式：`UI = f(State)`，用户界面仅仅是应用程序状态的一个函数。
|
||
|
||
JSX 不是 HTML 而是 JavaScript 的一种特殊语法。我们编写的每一行 JSX 代码最后都会被转换为一个函数：`React.createElement()`
|
||
|
||
> 例如：
|
||
> `<h1 className="title">Hello React</h1>`
|
||
> 对应：
|
||
> `React.createElement('h1', { className: 'title' }, 'Hello React')`
|
||
|
||
可以使用 `{ }` 在 JSX 中嵌入任何 JavaScript 表达式（变量、数学、函数）。
|
||
|
||
关于声明：
|
||
|
||
| 关键字 | 作用域 | 重复声明 | 是否可以修改引用 | 推荐场景 |
|
||
| ----------- | ---------------- | ---- | -------- | -------------------------- |
|
||
| **`const`** | 块级作用域 (Block) | 不允许 | 不允许 | **默认使用**，除非变量需要重新赋值 |
|
||
| **`let`** | 块级作用域 (Block) | 不允许 | 允许 | 用于循环变量或需要修改引用的场景 |
|
||
| **`var`** | 函数作用域 (Function) | 允许 | 允许 | **严禁使用** (旧时代的产物，存在变量提升问题) |
|
||
|
||
一个组件的返回必须有一个**单一的根元素**，如果返回并列的多个元素，可以嵌套一个 `<div>`，但更好的做法是使用 `Fragment`，语法糖是 `<>`。因 JSX 最终是会被编译为 JavaScript，所以要注意不要产生关键字的冲突。这也是为什么 `class` 在 React 中要写成 `className`，同时时间名要遵循驼峰命名法，例如 `onClick`。
|
||
|
||
**导入方式**
|
||
|
||
具名导入：
|
||
|
||
```
|
||
import { ... } from 'react'
|
||
```
|
||
|
||
默认导入：
|
||
|
||
```
|
||
import ... from 'react'
|
||
```
|
||
|
||
副作用导入：
|
||
|
||
```
|
||
import './index.css'
|
||
```
|
||
|
||
React 历史写法：
|
||
|
||
这里我还是不是很理解 `(prevState) => ({ count: prevState.count + 1 })` 这个的原理，目前的理解是，他可以拿到自己作用域的 count。
|
||
|
||
```tsx
|
||
import React from 'react'
|
||
|
||
interface CounterState {
|
||
count: number
|
||
}
|
||
|
||
class ClassCounter extends React.Component<unknown, CounterState> {
|
||
state = { count: 0 }
|
||
handleClick = () => {
|
||
// this.setState({ count: this.state.count + 1 })
|
||
this.setState((prevState) => ({ count: prevState.count + 1 }))
|
||
}
|
||
render() {
|
||
return (
|
||
<div>
|
||
<h1>Class Counter</h1>
|
||
<button onClick={this.handleClick}>数字是 {this.state.count}</button>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default ClassCounter
|
||
```
|
||
|
||
useState
|
||
|
||
我理解就是有了一个动态更新值的作用。
|
||
|
||
```tsx
|
||
import { useState } from 'react'
|
||
|
||
const FunctionalCounter = () => {
|
||
const [count, setCount] = useState(0)
|
||
const handleClick = () => {
|
||
setCount((prevCount) => prevCount + 1)
|
||
setCount((prevCount) => prevCount + 1)
|
||
}
|
||
console.log(count)
|
||
return (
|
||
<div>
|
||
<h1>Functional Counter</h1>
|
||
<button onClick={handleClick}>数字1是 {count}</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default FunctionalCounter
|
||
|
||
```
|
||
|
||
# 第二章 组件化开发核心
|
||
|
||
Props 通信
|
||
|
||
```tsx
|
||
type Props = {
|
||
name: string
|
||
}
|
||
|
||
const PrintNmae = (name: Props) => {
|
||
return (
|
||
<div>
|
||
<h1>Welcome {name.name}</h1>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default PrintNmae
|
||
|
||
```
|
||
|
||
传参
|
||
|
||
```tsx
|
||
<PrintNmae name="John" />
|
||
```
|
||
|
||
# CSS
|
||
|
||
顶级作用域
|
||
|
||
```
|
||
:root {
|
||
```
|
||
|
||
媒体查询
|
||
|
||
```
|
||
@media (prefers-color-scheme: light) {
|
||
|
||
}
|
||
```
|
||
|
||
ID 选择器
|
||
|
||
```
|
||
#root
|
||
```
|