简介
本文档概述了使用一组精选的工具和最佳实践来构建和管理 react 应用程序的综合方法。通过遵守这些准则，您可以创建可扩展、可维护且高效的应用程序。
状态管理
祖斯坦：
- 目的：提供一种简单且高性能的方法来管理全局应用程序状态。
-
好处：
- 清晰简洁的api。
- 高效的更新和性能优化。
- 与应用程序的其他部分轻松集成。
- 示例：
import create from 'zustand';
const usestore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
反应查询：
- 用途：管理异步数据获取和缓存。
-
好处：
- 自动数据获取和缓存。
- 轻松处理加载、错误和成功状态。
- 内置查询失效和重新获取。
- 示例：
import { usequery } from 'react-query';
const fetchusers = async () => {
const response = await fetch('https://api.example.com/users');
return response.json();
};
const userslist = () => {
const { isloading, iserror, data, error } = usequery('users', fetchusers);
if (isloading) return <div>loading...</div>;
if (iserror) return <div>error: {error.message}</div>;
return (
<ul>
{data.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
};
数据操作
突变：
- 用途：处理由用户操作或api调用触发的状态突变。
-
好处：
- 集中变异逻辑。
- 与 react query 轻松集成以实现乐观更新。
- 示例：
import { usemutation } from 'react-query';
const createuser = async (userdata) => {
const response = await fetch('https://api.example.com/users', {
method: 'post',
headers: { 'content-type': 'application/json' },
body: json.stringify(userdata),
});
return response.json();
};
const createuserform = () => {
const [createusermutation] = usemutation(createuser);
const handlesubmit = (userdata) => {
createusermutation(userdata)
.then(() => {
// handle success
})
.catch((error) => {
// handle error
});
};
return (
<form onsubmit={handlesubmit}>
{/* form fields */}
<button type="submit">create user</button>
</form>
);
};
餐桌管理
tanstack 表：
- 用途：提供灵活且高性能的表格组件。
-
好处：
- 可定制和可扩展。
- 支持大型数据集和复杂的交互。
- 与 react query 很好地集成以获取数据。
- 示例：
import { usetable } from 'tanstack/react-table';
const columns = [
{ header: 'name', accessor: 'name' },
{ header: 'email', accessor: 'email' },
];
const data = [
{ name: 'john doe', email: 'john@example.com' },
// ...
];
const tablecomponent = () => {
const { gettableprops, gettablebodyprops, headergroups, rows } = usetable({
columns,
data,
});
return (
<table {...gettableprops()}>
<thead>
{headergroups.map((headergroup) => (
<tr {...headergroup.getheadergroupprops()}>
{headergroup.headers.map((column) => (
<th {...column.getheaderprops()}>{column.render('header')}</th>
))}
</tr>
))}
</thead>
<tbody {...gettablebodyprops()}>
{rows.map((row) => (
<tr {...row.getrowprops()}>
{row.cells.map((cell) => (
<td {...cell.getcellprops()}>{cell.render('cell')}</td>
))}
</tr>
))}
</tbody>
</table>
);
};
组件库
基数用户界面：
- 用途：提供无头 ui 组件的集合。
-
好处：
- 可定制且灵活。
- 专注于核心功能，无需样式化。
- 与无障碍标准完美集成。
- 示例：
import { menu } from '@radix-ui/react-menu';
const menucomponent = () => {
return (
<menu>
<menu.button>open menu</menu.button>
<menu.items>
<menu.item>item 1</menu.item>
<menu.item>item 2</menu.item>
</menu.items>
</menu>
);
};
顺风css：
- 目的：实用优先的 css 框架。
-
好处：
- 快速开发和造型。
- 一致且可预测的造型。
- 轻松定制。
- 示例：
<div class="bg-blue-500 text-white p-4"> hello, world! </div>
表单管理
福米克与是的：
- 用途：处理表单状态、验证和提交。
-
好处：
- 简化的表单管理。
- 声明性验证规则。
- 与其他库轻松集成。
- 示例：
import { useFormik } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object({
email: Yup.string().required('Email is required').email('Invalid email'),
password: Yup.string().required('Password is required'),
});
const LoginForm = () => {
const { handleSubmit, handleChange, values, errors, touched } = useFormik({
initialValues: { email: '', password: '' },
validationSchema,
onSubmit: (values) => {
// Handle form submission
console.log(values);
},
});
return (
<form onSubmit={handleSubmit}>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="email"
value={values.email}
onChange={handleChange}
/>
{errors.email && touched.email && <div>{errors.email}</div>}
<label htmlFor="password">Password:</label>
<input
type="password"
id="password"
name="password"
value={values.password}
onChange={handleChange}
/>
{errors.password && touched.password && <div>{errors.password}</div>}
<button type="submit">Submit</button>
</form>
);
};
打字稿
- 用途： javascript 的静态类型超集。
-
好处：
- 提高了代码质量和可维护性。
- 及早发现错误。
- 更好的类型安全性和代码完成。
项目结构
src/
├── 组件/
│ ├── button.jsx
│ ├── 输入.jsx
│ └── ...
├── 页数/
│ ├── home.jsx
│ │ 组件/
│ │ ├── hero.jsx
│ │ └── ...
│ ├── about.jsx
│ └── ...
├── lib/
│ ├── utils.js
│ └── ...
├── 行动/
│ ├── api.js
│ └── ...
├── 商店/
│ ├── counterstore.js
│ └── ...
结论
通过遵循这些指南并利用推荐的工具，您可以构建健壮、可扩展且可维护的 react 应用程序。这种方法可以促进代码组织、可重用性和高效的状态管理，从而带来更好的开发体验和更高质量的软件。
