React 极简入门：变量与状态管理
想学 React，总得从最基础的地方上手。这里整理了几个核心概念：从怎么在页面上显示一个变量，到怎么用状态管理让页面动起来。没有废话，直接看代码。
1. 基础渲染：大括号插值
React 用 JSX 语法写界面。要在 HTML 标签里塞个变量进去，直接套上大括号{}就行。不管是用在标签内容上，还是属性上，写法都一样。
function App() { const divContent = '标签内容'; const divTitle = '标签标题'; return ( <div title={divTitle}>{divContent}</div> ); } export default App;2. 条件渲染
遇到需要根据不同情况显示不同内容的场景，不用找特殊的 React 语法。直接在组件里写原生 JS 的if/else判断即可。
function App() { const divTitle = '标签标题'; const flag = true; let divContent = null; if (flag) { divContent = <span>flag为true</span>; } else { divContent = <p>flag为false</p>; } return ( <div title={divTitle}> {divContent} </div> ); } export default App;3. 列表渲染：用 map 遍历
渲染列表，React 的常规操作是原生的map循环。为了不弄乱 DOM 结构生成多余的<div>，一般用Fragment当作一个隐形的包裹层。
import { Fragment } from "react"; function App() { const list = [ { id: 1, name: '小吴' }, { id: 2, name: '小李' }, { id: 3, name: '小花' } ]; const listContent = list.map(item => ( <Fragment key={item.id}> <li>{item.name}</li> <li>------------------</li> </Fragment> )); return ( <ul>{listContent}</ul> ); } export default App;别忘了给每个列表最外层元素加上独一无二的
key，这能省掉后续 React 更新 DOM 时的很多麻烦。
4. 绑定事件
React 里的事件名全是大驼峰（比如onClick），后面直接跟上处理函数。
function App() { function handleClick(e) { console.log('点击了按钮', e); } return ( <button onClick={handleClick}>按钮</button> ); } export default App;5. 初识 useState
先看个反例。很多人刚上手会这么写：
function App() { let divContent = '默认内容'; function handleClick() { divContent = '新内容'; // 变量变了，页面不动 } return ( <> <div>{divContent}</div> <button onClick={handleClick}>按钮</button> </> ); }普通变量改了就改了，React 根本不会去重新渲染页面。想要画面跟着数据动，得用useState。
import { useState } from "react"; function App() { const [content, setContent] = useState('标签的默认内容'); function handleClick() { setContent('新内容'); // 这样写，页面才会更新 } return ( <> <div>{content}</div> <button onClick={handleClick}>按钮</button> </> ); } export default App;6. 更新对象状态
状态数据是对象时，不能直接改原对象里的属性。稳妥的做法是新建个对象塞给setData。这里最常用的就是展开运算符...。
import { useState } from "react"; function App() { const [data, setData] = useState({ title: '默认标题', content: '默认内容' }); function handleClick() { setData({ ...data, // 把原属性平铺过来 title: '新标题' // 覆盖掉要修改的项 }); } return ( <> <div title={data.title}>{data.content}</div> <button onClick={handleClick}>按钮</button> </> ); } export default App;7. 更新数组状态
跟对象一样，别去用push之类直接修改原数组的方法。老老实实地生成一个新数组。
追加元素（展开运算符）：
import { useState } from "react"; let nextId = 4; // 注意：把 id 变量提到组件外面，防止组件重新渲染时被重置 function App() { const [data, setData] = useState([ { id: 1, name: '小吴' }, { id: 2, name: '小李' }, { id: 3, name: '小花' } ]); const listData = data.map(item => ( <li key={item.id}>{item.name}</li> )); function handleClick() { // 老元素展开，新元素接在后面 setData([ ...data, { id: nextId++, name: '小花猫' } ]); } return ( <> <ul>{listData}</ul> <button onClick={handleClick}>按钮</button> </> ); } export default App;删除元素（filter 方法）：
import { useState } from "react"; function App() { const [data, setData] = useState([ { id: 1, name: '小吴' }, { id: 2, name: '小李' }, { id: 3, name: '小花' } ]); const listData = data.map(item => ( <li key={item.id}>{item.name}</li> )); function handleClick() { // 筛掉 id 是 2 的，留下其余的生成新数组 setData(data.filter(item => item.id !== 2)); } return ( <> <ul>{listData}</ul> <button onClick={handleClick}>按钮</button> </> ); } export default App;只要摸清了useState操作对象和数组的这套“不可变”逻辑，React 基础就算及格了。
