React 极简入门：变量与状态管理

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 spanflag为true/span; } else { divContent pflag为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 基础就算及格了。