react18基础速成
1、项目搭建
npx create-react-app my-react-app（项目名）
cd 项目名进入项目目录
终端输入 npm start 启动项目
浏览器查看
项目搭建成功
2、JSX
JavaScript语法和HTML语法写在一起就是JSX语法
jsx只能返回一个根元素，即最外层的div，也可以换成空标签<></>
3、数据渲染
3.1插值
插值可以使用的位置：1、标签内容2、标签属性
function App() {const divContent = "标签内容";const divTtitle = "标签标题";return <div title={divTtitle}>{divContent}</div>;
}export default App;
3.2条件渲染
function App() {const divTtitle = "标签标题";let divContent = null;const flag = false;if (flag) {divContent = <span>flag为true</span>;} else {divContent = <span>flag为false</span>;}return <div title={divTtitle}>{divContent}</div>;
}export default App;
3.3列表渲染
列表种的key唯一值是必要的，并且不推荐使用下标为key
function App() {const list = [{ id: 1, name: "小吴" },{ id: 2, name: "小李" },{ id: 3, name: "小花" },];const listContent = list.map((item) => <li key={item.id}>{item.name}</li>);return <ul>{listContent}</ul>;
}export default App;
我们给每个列表数据之后加一条虚线，并且还要符合jsx中只有一个根元素的原则，我们可以使用空标签，但是空标签不能写属性，并且遍历是存在多个根元素，这种情况类似一个documentFragment的情况，我们就可以使用Fragment组件来完成
import { Fragment } from "react";function App() {const list = [{ id: 1, name: "小吴" },{ id: 2, name: "小李" },{ id: 3, name: "小花" },];const listContent = list.map((item) => (<Fragment><li key={item.id}>{item.name}</li><li>-------------------------</li></Fragment>));return <ul>{listContent}</ul>;
}export default App;
4、事件处理
例如点击事件，react的事件大多数是驼峰命名的
function App() {function handleClick(e) {console.log("点击了按钮", e);}return <button onClick={handleClick}>按钮</button>;
}export default App;
5、useState状态处理
类似于vue的响应式状态机制
import { useState } from "react";function App() {const [content, setContent] = useState("标签的默认内容");function handleClick() {setContent("新内容");}return (<><div>{content}<button onClick={handleClick}>按钮</button></div></>);
}export default App;
5.1 对象形式的状态
import { useState } from "react";function App() {const [data, setData] = useState({title: "默认标题",content: "默认内容",});function handleClick() {setData({...data,content: "新标题",});}return (<><div><div title={data.title}>{data.content}</div><button onClick={handleClick}>按钮</button></div></>);
}export default App;
5.2数组形式的状态
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>);let id = 3;function handleClick() {setData([...data, { id: ++id, name: "小明" }]);}return (<><div><ul>{listData}</ul><button onClick={handleClick}>按钮</button></div></>);
}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() {setData(data.filter((item) => item.id !== 2));}return (<><div><ul>{listData}</ul><button onClick={handleClick}>按钮</button></div></>);
}export default App;
