React

语法

语法糖

React 的 JSX 是 JavaScript 对象的语法糖，以大写字母开头的名称（如 <Login />）会被认为是 React 组件，而小写字母（如 <div>、<span>）则被认为是原生 HTML 标签，都是JSX，React 会把它转换成真实DOM元素。

 

组件/模块

作用：可以将导入的变成自定义组件/库中的组件，相当于组件函数。例如<Login />等价于React.createElement(Login)，多编译了一步。

函数组件

function App() {}

作用：相当于一个普通的JS函数，返回JSX或React元素，React会把会根据返回值渲染页面。

受控组件

value={form.username}

作用：值完全由React状态控制，初始渲染，再配合事件处理函数实现更新。

 

关键字

import/export

作用：导入/导出模块

import App from './App'：导入，命名新的组件的名字。

import { apiFetch } from './api'：命名的导入。

export default App：默认导出，每个模块只能有一个default export。

export async function apiFetch(url, options = {}) { ... }：命名导出，

 

async/await

作用：async标记函数是异步函数，返回一个 Promise；await 只能在 async 函数内使用，等待一个Promise对象完成，然后返回结果。

能够让异步代码写的和同步代码顺序一样，避免回调地狱。

 

...obj

对象扩展运算符

作用：拷贝属性到新对象，合并对象，更新对象的字段。

属性相同的会被后面的属性所替换。

 

className

作用：绑定TailwindCSS的关键字。

 

库/包

react-router-dom

作用：路由系统库，它负责根据浏览器URL的变化，动态渲染不同的组件页面，Route控制路径对应哪个组件。

标签：

<Router>

作用：整个应用的路由容器，它负责监听浏览器地址栏的变化，并根据路径决定显示哪个组件。

<Routes>/<Route>

作用：前者包括所有的<Route>，后者定义了“路径 → 对应组件”的映射关系。

属性：

• path：匹配的路径
• element：渲染的组件。

<Navigate>

作用：跳转浏览器地址到指定路径。

属性：to：跳转的地址。

 

react

Hook：

Hook 是一种特殊函数，允许你在函数组件中“钩入”React的特性，比如状态管理、生命周期、上下文等。

useState

作用：管理状态，返回一个长度为2的数组，[当前状态值，更新函数]。

useNavigate

作用：编程式导航，返回一个函数，可以用来更改路径，例如const navigate = useNavigate();，调用navigate("/login")等。

 

函数

json()

可以将Response的HTTP响应体（通常JSON）转化成JS对象。

 

事件处理函数

const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
};

定义的e是事件对象。

/可以作为<form onSubmit>的函数引用，引用时不要加()，否则会立刻执行。

属性：

• e.target：当前触发事件的元素，例如<input>。
• e.target.name：input的name属性…其他属性同理。
• e.preventDefault()：阻止表单的默认提交，因为React只渲染一次，提交后React状态会丢失，应该阻止提交，表单交给JS来完全控制。

 

接口

Fetch API

fetch(url, config)

作用：浏览器原生API，前端到后端的HTTP请求，返回Response对象。

参数：

• url：后端Controller的路径。

• config：属性有method、body、credentials、headers等，也可以用...options来对象拓展，传入的options会合并进fetch。

Response对象属性：ok表示HTTP响应是否成功；message：响应信息。