学React治好了我的焦虑症，1小时速通React 前20分钟。

前言

我是某大学大二的学生，目前在面试阶段，说实话学完vue3，然后写完两个项目，我本人是越来越对自己保持怀疑，vue3这个东西吧，用它就像用一种半黑箱（如果你没看源码的话）b站上的教程教你怎么用，用完，我发现我js的能力还倒退了一些，顿时就汗流浃背。直到我在学习vue3源码和转react这路，我选了后者，接触了react，我感觉我焦虑症瞬间好了，学起来嘎嘎上头（可能是黑暗之魂，黑暗之魂3，法环玩多了，变成了小高的形状），总之学vue就很枯燥，感觉很简单，没啥好学的，毕竟东西都封装的那么好了，拿来当组件库用就对了。

下面是我20分钟的速通笔记

TIPS:如果使用了（）里面智能返回一个根组件，所以用<></>包裹，如果需要设置key则用<Fragment> <Fragment/>包裹，return后面有（）是应对换行自动加;的问题

React Hooks 入门：useState 实战示例

从 JSX 基础到状态管理，一文掌握 React 函数组件的核心用法

一、JSX 基础与条件渲染

1. 最简单的组件与插值

jsx

javascript 复制代码

function App() {
  const titleName = 'xixi'
  const content = '我爱林希，我就是林希'

  return (
    <div title={titleName}>
      <p>{content}</p>
    </div>
  )
}

export default App

在 JSX 中使用 {} 包裹 JavaScript 表达式
标签属性也可以使用 {} 传入变量

2. 条件渲染（if/else）

jsx

javascript 复制代码

function App() {
  const flag = true
  const titleName = "林希"
  let content = null

  if (flag) {
    content = <p>哈哈哈</p>
  } else {
    content = <div>这是什么</div>
  }

  return (
    <div title={titleName}>
      {content}
    </div>
  )
}

export default App

可以在 JSX 外部使用 if/else 决定渲染内容
将 JSX 元素赋值给变量，再通过 {} 嵌入

二、列表渲染与 Fragment

jsx

javascript 复制代码

import { Fragment } from "react"

function App() {
  const arr = [
    { name: "xixi", id: 1 },
    { name: "buxixi", id: 2 },
    { name: "xixihaha", id: 3 }
  ]

  const newArr = arr.map((item) => (
    <Fragment key={item.id}>
      <li>{item.name}</li>
      <li>_______</li>
    </Fragment>
  ))

  return <ul>{newArr}</ul>
}

export default App

使用 map() 遍历数组生成 JSX 元素列表
必须为每个列表项添加 key 属性（帮助 React 高效更新）
<Fragment> 可以包裹多个相邻元素而不增加额外 DOM 节点

三、useState 基础 ------ 管理不同数据类型

3.1 管理字符串

jsx

javascript 复制代码

import { useState } from "react"

function App() {
  const [data, setData] = useState("这是我的默认内容")

  function change() {
    setData("笑嘻嘻")
  }

  return (
    <>
      <div>{data}</div>
      <button onClick={change}>点我进行改变</button>
    </>
  )
}

export default App

useState 返回一个数组：[当前状态, 更新函数]
调用更新函数会触发组件重新渲染

3.2 管理对象（注意不可变数据）

jsx

javascript 复制代码

import { useState } from "react"

function App() {
  const [data, setData] = useState({ name: "Linxi", age: 18 })

  function change() {
    setData({ ...data, age: 17 })  // 扩展运算符创建新对象
  }

  return (
    <>
      <div>{data.name}____{data.age}</div>
      <button onClick={change}>点我进行改变</button>
    </>
  )
}

export default App

更新对象状态时，必须创建新对象，不能直接修改原对象
使用 ... 扩展运算符复制原有属性，再覆盖要修改的字段

3.3 管理数组 ------ 增删改

初始数据与列表展示

jsx

php 复制代码

import { useState } from "react"

function App() {
  const [data, setData] = useState([
    { name: "Linxi", age: 18 },
    { name: "Yue", age: 19 },
    { name: "R", age: 20 }
  ])

  const List = data.map(item => (
    <li key={item.name}>
      名字:{item.name} 年龄:{item.age}
    </li>
  ))

  // ... 更新函数
}

添加元素

jsx

php 复制代码

function change() {
  setData([...data, { name: "xixi", age: 19 }])
}

使用扩展运算符复制原数组，再追加新元素

过滤（删除）

jsx

scss 复制代码

function change() {
  setData(data.filter(item => item.age >= 19))
}

filter 返回新数组，年龄小于 19 的被移除

修改某个元素（更新指定对象）

jsx

javascript 复制代码

function change() {
  setData(data.map(item => {
    if (item.name === "Linxi") {
      return { ...item, age: 17 }   // 只修改 age
    }
    return item
  }))
}

使用 map 遍历，找到目标项返回修改后的新对象，其余项不变
同样遵循不可变原则

四、完整示例（最终代码）

jsx

javascript 复制代码

import { useState } from "react"

function App() {
  const [data, setData] = useState([
    { name: "Linxi", age: 18 },
    { name: "Yue", age: 19 },
    { name: "R", age: 20 }
  ])

  const List = data.map(item => (
    <li key={item.name}>
      名字:{item.name} 年龄:{item.age}
    </li>
  ))

  function change() {
    setData(data.map(item => {
      if (item.name === "Linxi") {
        return { name: "Linxi", age: 17 }
      }
      return item
    }))
  }

  return (
    <>
      <ul>{List}</ul>
      <button onClick={change}>点我进行改变</button>
    </>
  )
}

export default App

总结

数据类型	更新方式示例	关键原则
字符串	`setData("新值")`	直接替换
对象	`setData({...data, key: newValue})`	创建新对象，不可直接修改
数组	`setData([...data, newItem])`	创建新数组
数组	`setData(data.filter(...))`	返回新数组
数组	`setData(data.map(...))`	返回新数组，修改目标项