我读了一本名为《从现在开始的React实践入门》的书籍

2 年 ago

清, 宇

1 minute

开始时

我参加了WINGS项目的评论计划，并收到了《这就是React实践入门》一书的赠书。虽然简短，但我将在此写下阅读感受。

顺带一提，接下来要描述的内容与我所属的公司毫无关系。

关于著者的”山田先生”

据说山田先生已经写了许多技术书，累计销量超过一百万册。
因为在技术书中成为百万销量作家的人很少，所以如果对山田先生感兴趣的话，希望您能看看这篇文章。

关于这本书

这本书的好处在于，它不仅介绍了React的语法，还以系统的方式解释了React，包括基础技术和相关的库。
例如，在解释React事件时，引入了JavaScript事件的概念，同时介绍了在React中如何处理注册表单，并介绍了一个实用的输入验证库。此外，还包含了关于React单元测试的介绍，包括了Jest。
总之，我认为很少有像这本书一样详尽地介绍React，包括前提技术和扩展部分。

关于音量

有649页。非常厚的书。好久没有用写经止书了，这次拿出来用，但是因为太厚了，一开始无法夹住它(流汗)。

关于推荐的读者群体

我认为这本书适合初中级以上的技术人员，他们想要在React上进行深入开发。相反，如果你是想要了解React作为UI设计师的人，或者完全是编程初学者的人，我认为你最好从一本更简单的书开始阅读（这本书的第3页就开始解释Ajax，第9页出现了IoC[Inversion of Control]）。虽然它介绍了React的出现背景和框架定位等术语，但对于经验较浅的人来说可能会感到挫败。如果你觉得这本书很难，我认为与能够回答你问题的人一起阅读，比如参加读书会，可能会更顺利地理解。

以下是对书籍内容的简单感想（部分记述）。

第一章：引言

以下是React技术的后端JavaScript库、框架的历史和主要语法总结。

两个商人：第一次使用React

这是React的开始。
在create react app生成的代码基础上，我们介绍了React的基本知识。

関数コンポーネントvsクラスコンポーネント：最近は関数構文はおすすめ

顺便说一句，我之前不知道有一个叫做npm run eject的命令，现在我正在参考它。

第三章：组件开发（基础）

这一章是关于React中重要概念“组件”的最重要阐述。
它介绍了两个概念，即“Props”和“State”，它们对应着UI组件。

在这本书中，它通过从组件间协作的总体目标入手，并解释了支撑协作的基本技术——JavaScript事件，这一点非常清晰易懂，而如果尝试从语法上理解”useState是什么”的话，很容易迷失方向。

理解这两个概念并不容易，但是在P83的图表中有清晰易懂的解释。

道具

「親コンポーネント」から「子コンポーネント」へ、情報を受け渡す窓口
例えるなら、関数の仮引数
コンポーネント関数の引数で宣言

宣言側：function Hello(props)

利用時：こんにちは、{props.myName}

呼び出し側：

慣例的にpropsという変数名がわかりやすい

PropTypesライブラリで型情報を追加

myName: PropTypes.string.isRequired
文字列かつ必須の引数であることを示している例

国家

const [count, setCount] = useState(0);
setCount(c => c + stemp);

情報の受け渡しはイベントを使用。
ReactJSXでのイベント宣言はHTMLのonclickと異なりonClickのように大文字が入る

「子コンポーネント」から「親コンポーネント」へ、情報伝達が可能

在一开始我误解了一点，以为P131的onUpdate是P132的标准事件或者像React的保留字一样，但它似乎是对自定义函数的调用。

第四章：组件开发（表单）

本文介绍了基于输入表单中的值来输出文本和日志的方法。
我们使用第三章的State来管理表单元素。
作为可用于输入表单的字段，介绍了文本、文本区域、列表框、单选框、复选框等等。通过查看示例代码中UI的变化可以更容易理解。

另外，对于不保持state的组件，即“非控制组件”，可以使用useRef直接从HTML元素获取值。

const age = useRef(null);
<input id="age" name="age" type="number" ref={age} defaultValue="18" />

由于在掌握表单的一般书写方法方面不够熟练，一开始出现了 useRef 这个概念，导致有些难以理解。

可以在React中使用的库。

另外，我还参考了Immer库的状态管理以及React Hook Form库的输入验证（还包括Yup/Zod/Jol/Vest/Ajv等验证库）。

第五章：组件开发（应用）

这一章介绍了在第三章和第四章中未涉及的React元素。例如，主要介绍了用于检测渲染等待并显示替代内容的组件。同时也介绍了用于测量渲染时间的组件。像这样与屏幕渲染相关的处理，与第四章类似，通过实际操作来加深理解。

第六章：使用React库

本章是在介绍在React中使用的以下几个有用的库。

コンポーネントのカタログ化Storybook

外部サービスからデータを取得するReactQuery

特别是在介绍ReactQuery（现在称为TanStack Query）时，我们在代码级别上比较了它与fetch函数的区别。
通过这种比较，我们可以明确理解使用ReactQuery的好处（加载状态、错误控制、简化重新处理）。

第七章：运用”钓鱼技巧”

这一章是在React Hook机制的基础上整理和介绍类似useState和useRef等之前已经出现过的“use〜”系列函数。P340页上有“use〜”函数的总览。

useEffect函数是一个副作用钩子，用于在Prop或State发生变化时执行。在这个用例中，参考了与React外部（例如网络）进行协作的情况。

因為這一節內容豐富，所以我想花更多時間來閱讀。

第八章：路由

这是关于使用SPA（单页应用）中的页面切换机制React Router的介绍。图表P413的解释非常易懂。

第九章：考试

介绍了单元测试、JavaScript 测试框架 Jest 和 Testing Library，并整理了 React 中的测试方法。
虽然我不了解 Testing Library，但通过查看 P497 上的表格，我感到组件测试变得更容易了。

第10章：发挥TypeScript的作用

我详细解释了TypeScript的基础知识以及如何将其整合到React中。
因为我从未使用过React+TypeScript，所以我对其优势不太了解，但我认为这篇文章很详细地解释了实际整合时遇到的细节问题。

第11章：利用Next.js

这段话概述了Next.js是什么，以及其与React的区别。书中介绍了App Router、服务器组件、以及如何将应用部署到Vercel平台，并根据读者对这些内容的理解，指导读者进一步探索下一步的内容。

阅读了《从现在开始的React实践入门》后，我对此有以下感想。

关于示例代码

您可以从https://wings.msn.to/index.php/-/A-03/978-4-8156-1948-0/下载示例代码。
我建议您阅读本书前言的iv-vi部分，其中有关于示例代码的说明。
（在src/index.js中，取消对root.render的注释，然后在my-react文件夹中运行npm start即可查看其运行效果。）

最后

这本书很好，由于它内容丰富，阅读需要花费一些时间，但正因为如此，我能够理解更多未知的事情。此外，虽然我没有仔细数过，但示例代码的数量估计有200多个。如果内容难以理解，我认为在阅读的同时实际运行代码并观察其行为，能够更容易理解。React并不容易，所以我希望通过这本书和示例代码，继续加深我的理解。