React 核心概念速通（Vue 开发者视角）

// React: 一个函数组件 Counter.jsx
// 导入 React 核心 API（useState 是管理状态的 Hook）
import { useState } from 'react'

// 组件名必须大写开头（这是 React 识别自定义组件的规则）
function Counter() {
  // useState(0) = 创建状态，返回 [当前值, 修改函数]
  // 用数组解构赋值获取 count 和 setCount
  const [count, setCount] = useState(0)

  // 定义事件处理函数
  function handleClick() {
    // ❌ 不能直接 count++，必须用 setCount 修改
    // ✅ React 状态是不可变的：要传入新值，而不是修改旧值
    setCount(count + 1)
  }

  // 返回值是 JSX（JavaScript XML 语法）
  // 注意：不是字符串！经过编译后变成 JavaScript 对象
  return (
    <div className="counter">
      <p>Count: {count}</p>
      <button onClick={handleClick}>+1</button>
    </div>
  )
}

export default Counter

// JSX 本质：会被编译成 JavaScript 函数调用
// <div className="box">Hello</div>
// 编译后 ≈ React.createElement('div', { className: 'box' }, 'Hello')

function Greeting({ name, isAdmin }) {
  // 1. 插值：用 {} 包裹任意 JS 表达式
  // Vue: 
  // React: {name.toUpperCase()}
  const upperName = name.toUpperCase()

  // 2. class 要写成 className（因为 class 是 JS 保留字）
  // Vue: class="active"
  // React: className="active"

  // 3. 条件渲染：三目运算符 || 逻辑与
  // Vue: v-if="isAdmin" 或 v-show="isAdmin"
  // React: 直接用 JS 表达式
  return (
    <div className="greeting">
      {/* 条件渲染：三目运算符 */}
      {isAdmin ? <span>管理员</span> : <span>访客</span>}

      {/* 条件渲染：逻辑与（只有 true 才渲染后面） */}
      {isAdmin && <AdminPanel />}

      {/* 列表渲染：用 map 返回数组 */}
      {/* Vue: v-for="item in list" :key="item.id" */}
      {/* React: list.map(item => <li key={item.id}>...</li>) */}
      <ul>
        {[1, 2, 3].map(num => (
          <li key={num}>第 {num} 项</li>
        ))}
      </ul>

      <h1>Hello, {upperName}!</h1>
    </div>
  )
}

// React 没有 defineProps，props 就是函数的第一个参数对象
// 可以用解构直接取出需要的属性
function Child({ title, count = 0 }) {
  // ✅ props 是只读的！不能修改 title 或 count
  // 如果要改，应该通知父组件改（通过回调函数）

  return (
    <div>
      <h2>{title}</h2>
      <p>数量: {count}</p>
    </div>
  )
}

// 父组件中使用
function Parent() {
  return (
    <div>
      {/* 传值：和 Vue 类似，直接用属性名 */}
      <Child title="商品列表" count={5} />

      {/* 字符串值可以省略花括号，其他类型必须加 {} */}
      <Child title="纯字符串" />
    </div>
  )
}

import { useState } from 'react'

function Counter() {
  // useState(初始值) 返回数组：[当前值, 修改函数]
  // 用解构赋值取：count = 当前值，setCount = 修改函数
  const [count, setCount] = useState(0)

  function add() {
    // ❌ 错误：直接改不会触发重新渲染
    // count++

    // ✅ 正确：调用 setXxx 传入新值（不可变更新）
    setCount(count + 1)

    // ⚠️ 注意：setCount 是异步的，不会立即改变 count
    console.log(count) // 这里还是旧值！
  }

  // 基于旧值更新时，用回调函数更安全
  function addSafe() {
    // prevCount 一定是当前最新值
    setCount(prevCount => prevCount + 1)
  }

  // 对象状态也要遵循不可变原则：创建新对象，不要修改原对象
  const [user, setUser] = useState({ name: 'Tom', age: 20 })

  function grow() {
    // ❌ 错误：直接修改原对象
    // user.age++

    // ✅ 正确：展开运算符创建新对象
    setUser({ ...user, age: user.age + 1 })

    // 或者用回调
    // setUser(prev => ({ ...prev, age: prev.age + 1 }))
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={add}>+1</button>
      <p>{user.name} 今年 {user.age} 岁</p>
      <button onClick={grow}>长大一岁</button>
    </div>
  )
}

function FormDemo() {
  function handleSubmit(event) {
    // ❌ React 没有 .prevent 修饰符，要手动调用
    event.preventDefault()
    console.log('表单提交被阻止')
  }

  const [text, setText] = useState('')

  return (
    <form onSubmit={handleSubmit}>
      {/* onChange 在 React 里是受控组件的标准写法 */}
      {/* 每输入一个字符，就会触发 onChange，更新 state，再渲染 input */}
      <input
        type="text"
        value={text}
        onChange={e => setText(e.target.value)}
      />

      {/* 原生 DOM 事件对象 event 需要手动调用 stopPropagation */}
      <button onClick={e => {
        e.stopPropagation()
        doSomething()
      }}>
        点我
      </button>
    </form>
  )
}

import { useState, useEffect } from 'react'

function UserProfile({ userId }) {
  const [user, setUser] = useState(null)

  // useEffect(副作用函数, 依赖数组)
  // 依赖数组决定什么时候重新执行副作用
  useEffect(() => {
    // ============ 这部分 ≈ Vue onMounted ============
    console.log('副作用执行了')

    let isCancelled = false // 取消标志，防止竞态条件

    // 发请求
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (!isCancelled) setUser(data)
      })

    // 订阅示例（如 WebSocket）
    // const ws = new WebSocket('...')

    // ============ return 的函数 ≈ Vue onUnmounted ============
    // 组件卸载或依赖变化前，React 会先调用清理函数
    return () => {
      isCancelled = true
      console.log('清理副作用')
      // ws.close()
    }
  }, [userId])
  // ☝️ 依赖数组：
  // []        = 只执行一次（≈ onMounted）
  // [userId]  = userId 变化时重新执行（≈ watch + onMounted）
  // 不写      = 每次渲染都执行（一般不用）

  return <div>{user?.name || '加载中...'}</div>
}

import { useState, useMemo } from 'react'

function NameDisplay() {
  const [firstName, setFirstName] = useState('张')
  const [lastName, setLastName] = useState('三')
  const [age, setAge] = useState(20)

  // useMemo(计算函数, 依赖数组)
  // 只有依赖变化时才重新计算，避免不必要的重算
  const fullName = useMemo(() => {
    console.log('重新计算 fullName')
    return firstName + lastName
  }, [firstName, lastName])
  // ☝️ age 变了不会触发重新计算

  return (
    <div>
      <p>全名: {fullName}</p>
      <p>年龄: {age}</p>
      <button onClick={() => setAge(age + 1)}>长大一岁</button>
    </div>
  )
}

import { useRef, useEffect } from 'react'

function InputDemo() {
  // useRef(null) 创建一个可变的引用对象
  // inputRef.current 指向真实的 DOM 节点
  const inputRef = useRef(null)

  useEffect(() => {
    // DOM 操作放在 useEffect 里，确保组件已挂载
    inputRef.current?.focus()
  }, []) // [] = 只执行一次

  return (
    <div>
      {/* ref={inputRef} 把 DOM 节点绑定到这个引用 */}
      <input ref={inputRef} type="text" />
    </div>
  )
}

import { createContext, useContext, useState } from 'react'

// 1. 创建上下文对象（一般放在单独文件里）
const ThemeContext = createContext('light') // 默认值

// 2. Provider 组件：提供数据
function App() {
  const [theme, setTheme] = useState('dark')

  return (
    // value 里放要传递的数据
    <ThemeContext.Provider value=>
      <Toolbar />
    </ThemeContext.Provider>
  )
}

// 3. 后代组件消费数据（不用一层层传 props）
function Toolbar() {
  return <ThemeButton />
}

function ThemeButton() {
  // useContext(上下文对象) 取出 provider 传递的值
  const { theme, setTheme } = useContext(ThemeContext)

  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      当前主题: {theme}
    </button>
  )
}

// useCounter.js
import { useState, useCallback } from 'react'

// 自定义 Hook 命名规范：必须以 use 开头
// 这样 React 才能识别它并应用 Hooks 规则（如只能在顶层调用）
export function useCounter(initial = 0) {
  const [count, setCount] = useState(initial)

  // useCallback = 缓存函数引用，避免子组件不必要的重渲染
  const add = useCallback(() => setCount(c => c + 1), [])
  const sub = useCallback(() => setCount(c => c - 1), [])

  return { count, add, sub }
}

// 在组件中使用
function CounterA() {
  const { count, add } = useCounter(10)
  return <button onClick={add}>A: {count}</button>
}

function CounterB() {
  const { count, add } = useCounter(100)
  return <button onClick={add}>B: {count}</button>
}

function MyComponent() {
  // ✅ 正确：Hooks 只能在组件顶层调用
  const [count, setCount] = useState(0)
  const [name, setName] = useState('')

  if (count > 0) {
    // ❌ 错误：不能在 if/for/函数里调用 Hook
    // useEffect(() => {}, [])
  }

  // ✅ 正确：可以按条件执行副作用，但 useEffect 本身必须放在顶层
  useEffect(() => {
    if (count > 0) {
      console.log('count > 0')
    }
  }, [count])

  return <div>...</div>
}

const [items, setItems] = useState([1, 2, 3])

// ❌ 错误：直接修改原数组
items.push(4)
setItems(items)

// ✅ 正确：创建新数组
setItems([...items, 4])

// ✅ 正确：map/filter 等返回新数组的方法天然安全
setItems(items.filter(i => i !== 2))