docs: use effect hints (#337)

* docs: fix another typo

* docs: use effect hints, hw hints and git conventional commit intro

4.WEB模块/4.2 Float的前端速通/4.2.1 导读模块/4.2.1.2 开发环境配置.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 分别打开这些文件夹，实现项目级的配置。
 

4.WEB模块/4.2 Float的前端速通/4.2.2 前端三件套基础/4.2.2.5 JS 速成：继承、DOM API 和异步.md

@@ -331,7 +331,7 @@ myAPP.button.addEventListener('click', () => {
 
 ### 输入
 
-我们可能还需要从一些输入框(表单当中的 `<input>` 不见)当中获取输入。现在我们有另一个 HTML，我们将会在每次点击按钮的时候把输入框里面的数据写到列表里面。这个 HTML 的 css 部分和原来的相同，就不再重复列出了。
+我们可能还需要从一些输入框(表单当中的 `<input>` 部件)当中获取输入。现在我们有另一个 HTML，我们将会在每次点击按钮的时候把输入框里面的数据写到列表里面。这个 HTML 的 css 部分和原来的相同，就不再重复列出了。
 
 这里仅仅使用了表单当中的 `input` 和 `label` 部件。
 

4.WEB模块/4.2 Float的前端速通/4.2.3 现代前端技术栈/4.2.3.1 Git 与 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 干了啥。
+
 如果没有问题，下一节。

4.WEB模块/4.2 Float的前端速通/4.2.3 现代前端技术栈/4.2.3.4 框架与库：React.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 元素或保持某些跨渲染周期不变的值。一般来说以下用法完全够用。

4.WEB模块/4.2 Float的前端速通/4.2.3 现代前端技术栈/4.2.3.6 框架与库：状态、路由与数据管理.md

@@ -30,6 +30,8 @@ React 提供的工具很强大，但是面对复杂的需求我们可能还需
 
 ### 数据获取和缓存: React Query
 
+非常推荐在大作业里面用，而不是在 `useEffect` 里面写 `fetch`。如果你执意要写 Effect, 我建议你把两者的代码对比一下。
+
 - 网站: <https://tanstack.com/query/latest/docs/framework/react/overview>
 - 构成: 一个用于管理服务器状态的库，专注于数据获取、缓存和同步。
 - 原理: 它处理数据获取的复杂性，包括缓存、数据无效化、背景更新等，同时避免手动管理请求的繁琐工作。

4.WEB模块/4.2 Float的前端速通/4.2.3 现代前端技术栈/4.2.3.8 模块作业.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，方便前端在后端没写完的时候使用假数据开发并调试。