前言
我是某大学大二的学生，目前在面试阶段，说实话学完vue3，然后写完两个项目，我本人是越来越对自己保持怀疑，vue3这个东西吧，用它就像用一种半黑箱（如果你没看源码的话）b站上的教程教你怎么用，用完，我发现我js的能力还倒退了一些，顿时就汗流浃背。直到我在学习vue3源码和转react这路，我选了后者，接触了react，我感觉我焦虑症瞬间好了，学起来嘎嘎上头（可能是黑暗之魂，黑暗之魂3，法环玩多了，变成了小高的形状），总之学vue就很枯燥，感觉很简单，没啥好学的，毕竟东西都封装的那么好了，拿来当组件库用就对了。
下面是我20分钟的速通笔记
TIPS:如果使用了（）里面智能返回一个根组件，所以用<></>包裹，如果需要设置key则用<Fragment> <Fragment/>包裹，return后面有（）是应对换行自动加;的问题
React Hooks 入门：useState 实战示例
从 JSX 基础到状态管理，一文掌握 React 函数组件的核心用法
一、JSX 基础与条件渲染
1. 最简单的组件与插值
jsx
function App() {
const titleName = 'xixi'
const content = '我爱林希，我就是林希'
return (
<div title={titleName}>
<p>{content}</p>
</div>
)
}
export default App
- 在 JSX 中使用
{}包裹 JavaScript 表达式 - 标签属性也可以使用
{}传入变量
2. 条件渲染（if/else）
jsx
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
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
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
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
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
function change() {
setData([...data, { name: "xixi", age: 19 }])
}
- 使用扩展运算符复制原数组，再追加新元素
过滤（删除）
jsx
function change() {
setData(data.filter(item => item.age >= 19))
}
filter返回新数组，年龄小于 19 的被移除
修改某个元素（更新指定对象）
jsx
function change() {
setData(data.map(item => {
if (item.name === "Linxi") {
return { ...item, age: 17 } // 只修改 age
}
return item
}))
}
- 使用
map遍历，找到目标项返回修改后的新对象，其余项不变 - 同样遵循不可变原则
四、完整示例（最终代码）
jsx
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(...)) | 返回新数组，修改目标项 |
