1773109225

2026-03-10 10:20:27 +08:00
parent c8c039eb85
commit cef89547a6
22 changed files with 364 additions and 308 deletions
@@ -1,72 +0,0 @@
-# 关于 Node
-
-| Node.js         | Java        |
-| --------------- | ----------- |
-| Node.js version | JDK version |
-| V8 Engine       | JVM         |
-| npm             | Maven       |
-| N-API           | JNI         |
-
-## Node.js 版本
-
-[Node.js — Node.js 版本](https://nodejs.org/zh-cn/about/previous-releases)
-
-# 学习资料
-
-https://u19tul1sz9g.feishu.cn/docx/WEWJdSzF5oTnwvxHGGAc0Vojnxe?from=from_copylink
-
-密码：M6923&65
-
-# 第一章 开发环境与核心概念
-
-UI = f(State)
-
-用户界面仅仅是应用程序状态的一个函数
-
-初始化环境
-
-```
-pnpm create vite@latest basic --template react-ts
-```
-
-导入方式：
-
-具名导入：
-
-```
-import { ... } from 'react'
-```
-
-默认导入：
-
-```
-import ... from 'react'
-```
-
-副作用导入：
-
-```
-import './index.css'
-```
-
-# CSS
-
-顶级作用域
-
-```
-:root {
-```
-
-媒体查询
-
-```
-@media (prefers-color-scheme: light) {
-
-}
-```
-
-ID 选择器
-
-```
-#root
-```
@@ -0,0 +1,192 @@
+# 学习资料
+
+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
+```