第 49 本《React Hooks 开发实战》

简介

这是一本完全从企业实践角度出发，为初学者和进阶者撰写的 React Hooks 开发指导手册。来自多家大厂的业界专家给予高度评价，他们均认为这本书是入门并精通 React Hooks 的好书

本书结合一线项目代码对 React Hooks 核心 API 及相关技术点进行了深入解读，并配有大量图例，让读者的学习过程更轻松，更有趣。为了帮助读者解决实际落地问题，书中不仅通过真实案例尽量还原实际开发场景，还专门总结了实际开发过程中经常出现的典型问题。为了帮助读者把所学知识轻松运用到实际工作中，本书还给出一个完整的企业级开发项目，从 0 到 1 完整展现项目开发过程

本书共 7 章：

第 1 章对当前前端市场进行简单分析，首先对 React Hooks 在当前前端市场中的定位及其与其他相关技术的异同进行深入解读，然后对 React Hooks 整个生命周期体系进行全面讲解

第 2 章重点介绍开发技术选型方法、基础工具安装方法及基础项目搭建流程，帮助读者从 0 到 1 搭建真实的开发环境

第 3 章基于真实的场景案例，对 React Hooks 核心 API 进行详细讲解，并且对API使用优化进行了具体说明。这是本书的重点，也是读者真正把 React Hooks 用好的基础

第 4 章着重对 React Redux 在 React Hooks 中的使用以及相关注意事项进行详细说明，并重点介绍了企业开发过程中常用的配套插件，这是提升开发效率的基础

第 5 章重点介绍了实际 React Hooks 开发场景中经常遇到的典型问题及其解决方法和相关注意事项

第 6 章基于作者的多年实践经验，分享了 10 个可以提升开发效率的企业级开发库，这里不仅对各个库的基本使用方法进行了介绍，还对其高级使用技巧、工作原理进行了分析

第 7 章分享了一个真实电商订单系统开发和上线的完整流程。从项目创建，到 eslintrc、Webpack 等基础工具的配置，再到对常用业务组件的封装（HTTP、菜单、权限、路由配置），本章都进行了详细介绍。此外，本章使用新的 TypeScript 语言进行示例说明与分析

阅读笔记

《React Hooks开发实战》 鬼哥 48个笔记

◆ 点评

2024/5/2 认为好看 对新手入门，对进阶者友好的 React Hooks 书籍，可以学习到很多东西，但更适合入门者。最好要先阅读官方文档再来看的话，会有更深入的理解学习吧

对于一个新人来说，直接学习最新的 React Hooks 会有点难度的，主要也是在项目应用上，因为项目都是基于 React Hooks 开发的，所以需要先了解 React Hooks 的核心原理。虽然官方文档的讲解很清晰，而且代码示例很详细，可以快速理解，但还是需要多阅读几遍官方文档，才能更好的理解。这个时候有个更偏向实战项目讲解的书籍，可以辅助帮助我们更好的理解 React Hooks 的原理和应用

本书从基础、环境搭建、React Hooks 核心 API、React Redux 的核心原理、企业级 Hooks 库、项目架构实战等，结合开发案例详细讲解开发学习的整个生命周期过程，让我对 React Hooks 有更清晰的认识，更轻松的掌握 React Hooks 的使用。有点遗憾的是，我觉得案例还是不够深入吧，源码讲的也比较少，总体来说的内容还是挺详细和不错的，很适合入门者学习

◆ 前言

2024/4/9 发表想法 擅长学习的人👍🏻

笔者虽然经历过很多实战项目，但是从来没有放弃对好代码的收集，并经常“偷偷”阅读同事的代码和项目架构，“偷偷”把同事的项目代码、项目架构和自己的做对比，然后取其精华，去其糟粕。

笔者虽然经历过很多实战项目，但是从来没有放弃对好代码的收集，并经常“偷偷”阅读同事的代码和项目架构，“偷偷”把同事的项目代码、项目架构和自己的做对比，然后取其精华，去其糟粕。

◆ 第1章 初识React Hooks

React是Facebook在2013年推出的一个用来构建用户界面的开源JavaScript库

本章将重点解答这几个问题：什么是React Hooks？React Hooks有哪些优势？React Hooks到底解决了什么问题？

高阶组件(HOC)

简化业务。充分利用组件化的思想把业务拆分成多个组件，采用函数式编程风格、函数式组件，状态保存在运行环境中，每个功能都包裹在函数中，整体风格更清爽、更优雅

函数式渲染具有以下显著特点。 □当给定相同输入（函数的参数）的时候，总是有相同的输出（返回值）。 □没有副作用。 □不依赖于函数外部状态。 □告别繁杂的this和难以记忆的生命周期。 □支持包装自己的Hooks（自定义Hooks），是纯命令式的API。 □可更好地完成状态之间的共享，解决了原来Class组件内部封装的问题，以及高阶组件和函数组件嵌套过深的问题。每个组件都有一个自己的状态，这个状态在该组件内可以共用。

◆ 第3章 核心API原理解读与实践

注意事项一：与Class组件中的setState方法不同，useState不会自动合并更新对象，所以需要使用展开运算符（或者Object.assign）来达到合并更新对象的效果。

注意事项二：useState更新值后经常会出现值更新不及时的bug。

(4)使用函数改变数据时，若数据和之前的数据完全相等（使用Object.is），则不会重新渲染。由于Object.is是浅比较，所以当状态是一个对象的时候，一定要小心操作

5)使用函数改变数据时，传入的值不会和原来的数据合并而是直接将其替换（与setState完全不一样），所以在修改对象的时候，我们要先将之前的对象保存下来

(6)要实现强制刷新组件的情况：如果是类组件，那么我们都会使用forceUpdate强制刷新；如果是函数组件，我们可以用useState来实现，只需要重新给当前state赋一次值即可。（因为每次传入的对象的地址不一样，所以一定会使得组件刷新。）

useRef是来解决如下问题的：□获取子组件或者DOM节点的实例对象；□存储渲染周期之间的共享数据。

注意事项一：组件的每次渲染，useRef返回值都不变

注意事项二：ref.current发生变化并不会造成重新渲染。

注意事项三：不可以在render里更新ref.current值

注意事项四：如果给一个组件设定了ref属性，但是对应的值却不是由useRef创建的，那么实际运行中会收到React的报错，无法正常渲染。

注意事项五：ref.current不可作为其他Hooks的依赖项，因为ref是可变的，不会使界面再次渲染。

ref.current的值发生变更并不会造成重新渲染，React也不会跟踪ref.current的变化

React.forwardRef会创建一个React组件，这个组件能够将其接收的ref属性转发到自己的组件树

注意事项二：forwardRef可以应用到高阶组件中

我们应该严格控制ref的暴露颗粒度，控制它能调用到的方法，只暴露外部要使用的主要功能函数，其他功能函数不暴露。React官方提供useImperativeHandle，目的就是让你在使用ref时可以自定义暴露给外部组件哪些功能函数或者属性。

useEffect就是我们常说的React中的副作用。执行setState会产生新的更新，而每次更新都会触发useEffect的依赖监听。useEffect接收一个方法作为第一个参数，该方法会在每次渲染完成之后被调用。它还会接收一个数组作为第二个参数，这个数组里的每一项内容都会被用来进行渲染前后的对比，如果没有变化，则不会调用该副作用。

注意事项一：useEffect的第二个参数不能为引用类型，因为引用类型比较不出来数据的变化，会造成死循环。

页面出现了死循环，这是因为在JavaScript中{}==={}的结果是false，{a:1}==={a:1}也是这样，这会造成React以为两个值不同，就会一直渲染。其实在正常的开发过程中，我们不推荐在useEffect中更改监听变量的值，即使它不是引用类型。

注意事项二：多个副作用能写在一起，需要多个useEffect

注意事项四：useEffect的清除函数在每次重新渲染时都会执行，而不是只在卸载组件的时候执行

useLayoutEffect。下面先看看它们的不同之处。 □useEffect是异步执行的，而useLayoutEffect是同步执行的。 □useEffect的执行时机是浏览器完成渲染之后，而useLayoutEffect的执行时机是浏览器将内容渲染到界面之前。

useEffect中的操作需要处理DOM，并且处理DOM的过程中会改变页面的样式时，就需要用useLayoutEffect了，否则可能会出现闪屏问题。useLayoutEffect里的callback函数会在DOM更新完成后立即执行，并且会在浏览器进行任何绘制之前运行完成，否则就会阻塞浏览器的绘制。



对于useReducer的使用有如下事项需要提醒大家特别注意。□useReducer与useState的作用类似，都用于声明和管理状态。在某些场景下，例如状态逻辑较复杂且包含多个子值，或者下一个状态依赖于之前的状态时，useReducer会比useState更适用。使用useReducer还能给那些会触发更新的组件做性能优化，因为可以向子组件传递dispatch而不是回调函数。□如果state的类型为Number、String、Boolean，建议使用useState；如果state的类型为Object或Array，则建议使用useReducer。□如果state变化非常多，则建议使用useReducer，因为这样可以集中管理state变化且便于维护。□如果state关联变化，则建议使用useReducer。□如果业务逻辑很复杂，则建议使用useReducer。□如果state只想用在组件内部，则建议使用useState；如果想维护全局state，则建议使用useReducer。

React由于虚拟DOM的关系，当父组件（函数）重新调用的时候，子组件就会被重新调用。这样就多出了无意义的性能开销，实际上状态没有变化的子组件，是不需要重新渲染的

在实际工作中使用useMemo时，需要注意以下两点。□useMemo应该用于缓存函数组件中计算资源消耗较大的场景，因为useMemo本身就占用一定的缓存，在非必要的场景下使用反而不利于性能的优化。□在处理量很小的情况下使用useMemo，可能会有额外的使用开销

只要是组件内部状态的改变，都会触发React Hooks组件的重新渲染

两者在语法方面的相同点如下。□useCallback和useMemo的参数相同，第一个参数是函数，第二个参数是依赖项的数组。□useMemo、useCallback都是使用的参数（函数），且都不会因为其他不相关的参数变化而重新渲染。□与useMemo中的useEffect类似，[]内可以放入改变数值就重新渲染参数（函数）的对象。如果[]为空就只渲染一次，之后都不会渲染。两者的主要区别：React.useMemo会调用fn函数并返回其结果，而React.useCallback仅返回fn函数而不调用它

注意事项二：useCallback需要配合React.memo使用。这是因为React.memo这个方法会对props做一个浅层比较，如果props没有发生改变，则不会重新渲染此组件

◆ 第4章 React Redux原理解读与实践

Redux的功能很简单，主要是3个功能： □获取当前状态； □更新状态； □监听状态变化。

使用Redux的三大原则如下。 □单一数据源的所有应用的状态被统一管理在唯一的store对象数据中。 □状态是只读的，状态的变化只能通过触发action改变。 □使用纯函数来执行修改，使用纯函数来描述action，这里的纯函数被称为reducer。

redux-logger是一个React Redux操作日志记录工具，会在dispatch改变仓库状态的时候打印出旧的仓库状态、当前触发的行为及新的仓库状态

redux-persist支持使用localStorage、sessionstorage、cookie来完成数据持久化操作

◆ 第5章 React Hooks常见问题解析

业务中复用该组件的时候，往往会遇到各种问题，比如： □组件现有的功能不能满足需求； □为了满足多个业务的复用需求，不得不把组件修改到很别扭的程度； □参数失控； □版本无法管理。

在React中，每个状态更改都会强制对该组件及其子组件进行重新渲染

在React Hooks中，性能问题主要体现在对组件重复渲染的处理、组件渲染时机的把控等方面

如果函数与组件内的state和props无相关性，那么可以在组件外部声明该函数，这样可以避免在每次渲染的时候都重新声明该无关函数，从而提高组件的性能。

◆ 第6章 常见的企业级Hooks解读

React Use是一个在GitHub上拥有将近4万颗星的Hooks工具包，是一个必不可少的React Hooks集合。它的功能非常强大，包含传感器、UI、动画、副作用、生命周期、状态六大类Hooks，几乎涵盖了所有的前端业务需求。React Use也是市面上最成熟的Hooks库之一。

◆ 第7章 企业级React Hooks项目架构与实战

SVG具有如下优势：□和传统的图像比起来，尺寸更小，且可压缩性更好；□SVG中的图像是可以编辑的，可以直接修改其颜色等属性；□SVG不会失帧，这保证了图标具有高清晰度和UI高保真度。

当前主流的部署方案如下：□GitLab+Jenkins+Nginx；□GitLab+Jenkins+Docker+Kubernetes+Nginx；□GitLab+Walle+Nginx；□宝塔+Nginx；□Xshell手动部署+Nginx；□阿里云部署；□腾讯云部署。