From 12f4eebf47d9a89e77281eff32bdd309ad47022b Mon Sep 17 00:00:00 2001 From: floatingblocks Date: Fri, 8 Nov 2024 00:12:37 +0800 Subject: [PATCH] docs: use effect hints (#337) * docs: fix another typo * docs: use effect hints, hw hints and git conventional commit intro --- ...47\216\257\345\242\203\351\205\215\347\275\256.md" | 6 ++++-- ...01DOM API \345\222\214\345\274\202\346\255\245.md" | 2 +- .../4.2.3.1 Git \344\270\216 Github.md" | 2 ++ ...6\266\344\270\216\345\272\223\357\274\232React.md" | 4 +++- ...46\225\260\346\215\256\347\256\241\347\220\206.md" | 2 ++ ...46\250\241\345\235\227\344\275\234\344\270\232.md" | 11 ++++++----- 6 files changed, 18 insertions(+), 9 deletions(-) diff --git "a/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.1 \345\257\274\350\257\273\346\250\241\345\235\227/4.2.1.2 \345\274\200\345\217\221\347\216\257\345\242\203\351\205\215\347\275\256.md" "b/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.1 \345\257\274\350\257\273\346\250\241\345\235\227/4.2.1.2 \345\274\200\345\217\221\347\216\257\345\242\203\351\205\215\347\275\256.md" index b2fed503..c4dd3c7d 100644 --- "a/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.1 \345\257\274\350\257\273\346\250\241\345\235\227/4.2.1.2 \345\274\200\345\217\221\347\216\257\345\242\203\351\205\215\347\275\256.md" +++ "b/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.1 \345\257\274\350\257\273\346\250\241\345\235\227/4.2.1.2 \345\274\200\345\217\221\347\216\257\345\242\203\351\205\215\347\275\256.md" @@ -4,9 +4,11 @@ ## HTML+CSS 基础模块环境 -你需要安装 [VSCode](https://code.visualstudio.com/)来编辑 HTML 文件。 +你需要**安装 [VSCode](https://code.visualstudio.com/)**来编辑 HTML 文件。 -虽然 VSCode 有可以连接浏览器的 Debugger 插件，但是我们不需要这么复杂。安装一个 [Live server 插件](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)，开个最简单的本地开发服务端就行，因为很多高级特性我们初学者暂时用不到，而且初学者很难处理这里带来的环境问题。**不要直接用浏览器打开 HTML, 这是一个非常不好的习惯**，一定要通过类似 `http://` 的链接而不是类似 `file://` 的链接，否则会导致浏览器为了维护你的安全牺牲很多正常功能。 +然后我们**安装 [Live server 插件](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)**，这样你就可以通过在 VSCode 的右下角点开 `Go Live`，开个最简单的本地开发服务端。 + +虽然 VSCode 有可以连接浏览器的 Debugger 插件，但是我们不需要这么复杂。，因为很多高级特性我们初学者暂时用不到，而且初学者很难处理这里带来的环境问题。**不要直接用浏览器打开 HTML, 这是一个非常不好的习惯**，一定要通过类似 `http://` 的链接而不是类似 `file://` 的链接，否则会导致浏览器为了维护你的安全牺牲很多正常功能。这里我们可以用 Live Server。 在电脑里面找个你喜欢的位置，新建一个文件夹，名字随便起一个(推荐英文)，这就是我们的练习文件夹了。推荐每一个练习都在里面建立一个**独立的文件夹**，这样可以避免把文件弄得很乱，也可以让 VSCode 分别打开这些文件夹，实现项目级的配置。 diff --git "a/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.2 \345\211\215\347\253\257\344\270\211\344\273\266\345\245\227\345\237\272\347\241\200/4.2.2.5 JS \351\200\237\346\210\220\357\274\232\347\273\247\346\211\277\343\200\201DOM API \345\222\214\345\274\202\346\255\245.md" "b/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.2 \345\211\215\347\253\257\344\270\211\344\273\266\345\245\227\345\237\272\347\241\200/4.2.2.5 JS \351\200\237\346\210\220\357\274\232\347\273\247\346\211\277\343\200\201DOM API \345\222\214\345\274\202\346\255\245.md" index d5320203..fb7753fc 100644 --- "a/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.2 \345\211\215\347\253\257\344\270\211\344\273\266\345\245\227\345\237\272\347\241\200/4.2.2.5 JS \351\200\237\346\210\220\357\274\232\347\273\247\346\211\277\343\200\201DOM API \345\222\214\345\274\202\346\255\245.md" +++ "b/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.2 \345\211\215\347\253\257\344\270\211\344\273\266\345\245\227\345\237\272\347\241\200/4.2.2.5 JS \351\200\237\346\210\220\357\274\232\347\273\247\346\211\277\343\200\201DOM API \345\222\214\345\274\202\346\255\245.md" @@ -331,7 +331,7 @@ myAPP.button.addEventListener('click', () => { ### 输入 -我们可能还需要从一些输入框(表单当中的 `` 不见)当中获取输入。现在我们有另一个 HTML，我们将会在每次点击按钮的时候把输入框里面的数据写到列表里面。这个 HTML 的 css 部分和原来的相同，就不再重复列出了。 +我们可能还需要从一些输入框(表单当中的 `` 部件)当中获取输入。现在我们有另一个 HTML，我们将会在每次点击按钮的时候把输入框里面的数据写到列表里面。这个 HTML 的 css 部分和原来的相同，就不再重复列出了。 这里仅仅使用了表单当中的 `input` 和 `label` 部件。 diff --git "a/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.1 Git \344\270\216 Github.md" "b/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.1 Git \344\270\216 Github.md" index 31f03e25..1092193a 100644 --- "a/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.1 Git \344\270\216 Github.md" +++ "b/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.1 Git \344\270\216 Github.md" @@ -4,4 +4,6 @@ 如果你发现自己不会，赶紧看我们的前文提到的内容，这里有 Git 的简介 [2.1.1 Book: 3.Unix 与 C](../../../2.编程模块/2.1%20CStart/2.1.1%20Book/3.Unix与C.md)，这里是不会赘述的。 +对于 commit message，我觉得很有必要看看 [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary)，最起码写成 `fix: xxx bug` 和 `feat: xxx feature` 的形式，方便几天后或者几星期后自己能看懂这个 commit 干了啥。 + 如果没有问题，下一节。 diff --git "a/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.4 \346\241\206\346\236\266\344\270\216\345\272\223\357\274\232React.md" "b/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.4 \346\241\206\346\236\266\344\270\216\345\272\223\357\274\232React.md" index 2a68cf2b..92736c94 100644 --- "a/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.4 \346\241\206\346\236\266\344\270\216\345\272\223\357\274\232React.md" +++ "b/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.4 \346\241\206\346\236\266\344\270\216\345\272\223\357\274\232React.md" @@ -89,7 +89,7 @@ function DataFetcher() { const [data, setData] = useState(null); useEffect(() => { - // 模拟数据获取 + // 模拟数据获取，很多人会这么写，但是非常不推荐这样用：（想一想，为什么？提示：fetch 两次, 再提示：加上加载显示？错误处理？） fetch('https://api.example.com/data') .then(response => response.json()) .then(result => setData(result)); @@ -108,6 +108,8 @@ function DataFetcher() { } ``` +对于示例中提到的获取数据，我们更推荐使用 React Query 中的 `useQuery` 钩子，因为这样能更好地实现 query 逻辑的解耦，也因为它不会 fetch 两次。 + ### `useRef` `useRef` 允许你访问 DOM 元素或存储任意可变值，而无需重新渲染组件。它通常用于访问 DOM 元素或保持某些跨渲染周期不变的值。一般来说以下用法完全够用。 diff --git "a/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.6 \346\241\206\346\236\266\344\270\216\345\272\223\357\274\232\347\212\266\346\200\201\343\200\201\350\267\257\347\224\261\344\270\216\346\225\260\346\215\256\347\256\241\347\220\206.md" "b/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.6 \346\241\206\346\236\266\344\270\216\345\272\223\357\274\232\347\212\266\346\200\201\343\200\201\350\267\257\347\224\261\344\270\216\346\225\260\346\215\256\347\256\241\347\220\206.md" index c16140e0..ece1b055 100644 --- "a/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.6 \346\241\206\346\236\266\344\270\216\345\272\223\357\274\232\347\212\266\346\200\201\343\200\201\350\267\257\347\224\261\344\270\216\346\225\260\346\215\256\347\256\241\347\220\206.md" +++ "b/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.6 \346\241\206\346\236\266\344\270\216\345\272\223\357\274\232\347\212\266\346\200\201\343\200\201\350\267\257\347\224\261\344\270\216\346\225\260\346\215\256\347\256\241\347\220\206.md" @@ -30,6 +30,8 @@ React 提供的工具很强大，但是面对复杂的需求我们可能还需 ### 数据获取和缓存: React Query +非常推荐在大作业里面用，而不是在 `useEffect` 里面写 `fetch`。如果你执意要写 Effect, 我建议你把两者的代码对比一下。 + - 网站: - 构成: 一个用于管理服务器状态的库，专注于数据获取、缓存和同步。 - 原理: 它处理数据获取的复杂性，包括缓存、数据无效化、背景更新等，同时避免手动管理请求的繁琐工作。 diff --git "a/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.8 \346\250\241\345\235\227\344\275\234\344\270\232.md" "b/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.8 \346\250\241\345\235\227\344\275\234\344\270\232.md" index 87d7c480..337b4ac6 100644 --- "a/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.8 \346\250\241\345\235\227\344\275\234\344\270\232.md" +++ "b/4.WEB\346\250\241\345\235\227/4.2 Float\347\232\204\345\211\215\347\253\257\351\200\237\351\200\232/4.2.3 \347\216\260\344\273\243\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210/4.2.3.8 \346\250\241\345\235\227\344\275\234\344\270\232.md" @@ -8,27 +8,28 @@ **要求**： 1. **多页面**： + - 使用 **React Router** 管理多页面。当然你要单页面也行，不强求。 - 首页：展示电子书列表和推荐书籍。 - 书籍详情页：展示电子书的详细信息。 - 购物车页面：展示用户选择的书籍和总价，支持删除书籍。 - 结算页面：填写用户信息并确认购买。 2. **全局状态管理**： - - 使用 Zustand 管理购物车中的书籍状态，计算总价和处理添加/删除操作。 + - 使用 **Zustand** 管理购物车中的书籍状态，计算总价和处理添加/删除操作。 - 管理用户登录状态（可选，自行拓展 json-server）。 3. **服务端请求**： - - 从后端 API 获取电子书列表、书籍详情（可以使用 Mock 数据或 JSON 服务器）。 + - 使用 **React Query** 从后端 API 获取电子书列表、书籍详情（可以使用 Mock 数据或 JSON 服务器）。（想一想，为什么不推荐 `useEffect`） - 提交用户购买信息到服务器，并模拟返回购买结果。 -4. **资源**： - - 书籍的封面图片资源，使用公共 API 或本地图片。 +4. **资源（可选要求）**： - 支持资源缓存和优化，确保在多次访问时减少加载时间。 **可选功能**： - 用户登录/注册功能。需要自行拓展 json-server。 - 用户书籍购买历史查看。需要自行拓展 json-server。 - +- 书籍的封面图片资源，使用公共 API 或本地图片。 + ## 后端部署 为了提供一个尽量简单的标准的后端环境，我们会使用 `json-server` 来 host 需要的电子书数据，生成 API。这个库可以将 JSON 文件包装成一个 API Server，方便前端在后端没写完的时候使用假数据开发并调试。