# 学习资料

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" />
```

children 传参，这里 type

```tsx
import React from 'react'

type CardProps = React.PropsWithChildren<{}>

const Card = ({ children }: CardProps) => {
  return (
    <div
      style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}
    >
      {children}
    </div>
  )
}

export default Card
```

关于 `{ children }: CardProps` 是组件接收一个 props 然后从里边结构出来 children

类型声明：

```tsx
type UserProps = {
  name: string
  age: number
  isVerified: boolean
  hobbies?: string[]
}

export const User = (user: UserProps) => {
  const { name, age, isVerified, hobbies } = user

  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>校验: {isVerified ? '已验证' : '未验证'}</p>
      {hobbies && hobbies.length > 0 && <p>爱好: {hobbies.join(', ')}</p>}
    </div>
  )
}

```

# CSS

顶级作用域

```
:root {
```

媒体查询

```
@media (prefers-color-scheme: light) {

}
```

ID 选择器

```
#root
```