docker/notes

Fork 0

Files

T

Docker7530 a85ad8447f 1773239962

2026-03-11 22:39:26 +08:00

5.6 KiB

Raw Blame History

学习资料

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 采用固定节奏发布 + LTS 生命周期，每 6 个月发布一个，相当于每年会覆盖一个 LTS。

第一章开发环境与核心概念

初始化环境

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。

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

我理解就是有了一个动态更新值的作用。

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 通信（只读的，子组件不可以进行修改，单向数据流。）

type Props = {
  name: string
}

const PrintNmae = (name: Props) => {
  return (
    <div>
      <h1>Welcome {name.name}</h1>
    </div>
  )
}

export default PrintNmae

普通传参

<PrintNmae name="John" />

children 传参，这里 type

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

类型声明：

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

5.6 KiB Raw Blame History Unescape Escape