WangShuXian6
commented
3 years ago React在不断发展
https://github.com/jrlarsen/react-hooks-in-action React使得构建用户界面组件变得很容易，这些组件是可组合的、可重用的，并能对数据的变化和用户的互动做出反应。 一个社交媒体网站的页面包括按钮、帖子、评论、图片和视频，以及其他许多界面组件。 当用户向下滚动页面、打开帖子、添加评论或转换到其他视图时，React帮助更新界面。 一些页面上的组件可能有重复的子组件，即具有相同结构但内容不同的页面元素。 而这些子组件也可能是由组件组成的!这里有图片缩略图、重复的按钮、可点击的文本和大量的图标。 从整体上看，这个页面有数百个这样的元素。但是，通过将这样丰富的界面分解成可重用的组件，开发团队可以更容易地专注于特定的功能领域，并将这些组件应用于多个页面。 使得定义和重用组件变得容易，并将它们组成复杂但可理解和可用的界面是React的核心目的之一
同步状态和用户界面
React使应用程序的用户界面与它的数据保持同步。 你的应用程序在任何时候持有的数据被称为应用程序的状态，可能包括，例如，当前的帖子，关于登录用户的细节，评论是显示还是隐藏，或者文本输入字段的内容。 如果新的数据通过网络到达，或者用户通过按钮或文本输入更新了一个值，React就会计算出需要对显示进行哪些改变，并有效地更新它。
React智能地安排更新的顺序和时间，以优化你的应用程序的感知性能并改善用户体验。 React通过重新渲染用户界面来响应组件状态的变化。 但更新状态和重新渲染并不是一次性的任务。 访客在使用你的应用程序时可能会引起大量的状态变化，而React需要反复向你的组件询问代表这些最新状态值的最新用户界面。 你的组件的工作是将它们的状态和props（传递给它们的属性）转换成它们的用户界面描述。 然后React接受这些用户界面描述，并在必要时对浏览器的文档对象模型（DOM）进行排版更新。
当一个组件的状态值发生变化时，React会重新渲染用户界面。
React调用和重新调用一个函数组件时的一些关键步骤
| 步骤 | 会发生什么？ | 讨论 |
|---|---|---|
| 1 | React调用该组件。 | 为了生成页面的UI，React遍历了树状的组件，调用每一个组件。React会把每个组件在JSX中设置为属性的任何props。 |
| 2 | 该组件指定了一个 | 事件处理程序可以监听用户的点击、定时器的启动。事件处理程序。 或资源加载，例如。该处理程序将改变以后运行时的状态。React会把处理程序挂到当它在第4步更新DOM时，将DOM加入。 |
| 3 | 该组件返回其用户界面。 | 该组件使用当前的状态值来生成其用户界面并将其返回，完成其工作。 |
| 4 | React更新DOM。 | React比较了该组件的UI描述返回当前的应用程序用户界面的描述。它可以有效地巧妙地对DOM进行任何必要的修改，并设置在必要时增加或更新事件处理程序。 |
| 5 | 事件处理程序启动。 | 一个事件发生了，处理程序运行。该处理程序改变了的state。 |
| 6 | React调用该组件。 | React知道状态值已经改变，所以必须重新计算。迟来的用户界面。 |
| 7 | 该组件指定了一个 | 这是一个新版本的处理程序，可以使用新的事件处理程序。 更新的状态值。 |
| 8 | 该组件返回其用户界面。 | 该组件使用当前的状态值来生成其用户界面并将其返回，完成其工作。 |
| 9 | React更新DOM。 | React比较了该组件的UI描述这与之前对应用程序用户界面的描述相同。它有效地巧妙地对DOM进行任何必要的修改，并设置在必要时增加或更新事件处理程序。 |
状态应该放在哪里
一个组件是否应该管理自己的状态， 一些组件是否应该共享状态， 一些状态是否应该全局共享
React为所有这三种情况提供了机制，而且发布的软件包， 例如Redux、MobX、React Query和Apollo Client，都提供了通过组件外的数据存储来管理状态的方法
在过去，组件是否管理它自己的一些状态决定了组件创建方法； React提供了两种主要的方法：函数组件和类组件
理解组件类型
为了定义一个组件，React让你使用两种JavaScript结构：一个函数或一个类。
在React Hooks之前，当组件不需要任何本地状态时，你会使用一个函数（你会通过props传递它的所有数据）。
function MyComponent(props) {
// Maybe work with the props in some way.
// Return the UI incorporating prop values.
}当组件需要管理自己的状态、执行副作用（如加载数据或接触DOM）或直接响应事件时，你会使用一个类
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
// 在这里设置状态。
// 类组件在构造函数中设置了它们的状态。
};
}
componentDidMount() {
// 执行一个副作用，如加载数据。
// 类的组成部分可以包括在其生命周期的各个阶段的方法。
}
render() {
// 使用props值和状态返回UI。
// 类组件有一个渲染方法，用来返回其用户界面。
}
}React Hooks的加入意味着你现在可以使用函数组件来管理状态和副作用。
function MyComponent(props) {
// Use local state. // 使用本地状态。
// 使用hooks来管理状态。
const [value, setValue] = useState(initialValue);
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
// Perform side effect. //执行副作用
// 使用hooks来管理副作用
});
// 直接从函数中返回UI
return (
<p>
{value} and {state.message}
</p>
);
}React团队建议在新项目中使用函数作为组件
组件类型及其描述
| 组件类型 | 描述 |
|---|---|
| 无状态函数组件 | 一个被传递属性并返回UI的JavaScript函数 |
| 函数组件 | 一个被传递属性的JavaScript函数，使用hooks来管理状态和执行副作用，以及返回UI |
| 类组件 | 一个JavaScript类，包括一个返回用户界面的渲染方法。它也可以在其构造函数中设置状态，在其生命周期方法中管理状态和执行副作用。 |
函数组件只是返回其用户界面描述的JavaScript函数。 在编写组件时，开发人员通常使用JSX来指定用户界面。 UI可能取决于传递给函数的属性。有了无状态的函数组件，故事就结束了；它们把属性变成了用户界面。
更为普遍的是，函数组件现在可以包含状态并与副作用一起工作。
类组件是使用JavaScript类语法构建的，从React.Component或React.PureComponent基类扩展而来。 它们有一个构造函数，在那里可以初始化状态，以及React在组件生命周期中调用的方法； 例如，当DOM被更新为最新的组件UI或当传递给组件的属性发生变化时。 他们也有一个渲染方法，返回组件的用户界面描述。 类组件是创建有状态的组件的方法，它可以引起副作用。 带有hooks的函数组件提供一种比类更好的方式来创建有状态的组件和管理副作用
组件的副作用
React组件通常将状态转化为用户界面。 当组件代码在这个主要焦点之外执行动作时--也许是从网络上获取数据，如博客文章或股票价格，设置一个在线服务的订阅，或直接与DOM交互以聚焦表单字段或测量元素尺寸--我们将这些动作描述为组件的副作用。
我们希望我们的应用及其组件的行为是可预测的，所以应该确保任何必要的副作用是自由的和可见的。 React提供了useEffect Hooks来帮助我们在我们的功能组件中设置和管理副作用。
1.2 React有什么新东西？
React 16包括对核心功能的重写，这为新库功能和方法的稳定推出铺平了道路。
◾ 有状态的功能组件（useState、useReducer）。 ◾ 上下文API（useContext）。 ◾ 更清洁的副作用管理（useEffect）。 ◾ 简单但强大的代码重用模式（自定义Hooks）。 ◾ 代码拆分(lazy) ◾ 更快的初始加载和智能渲染（Concurrent Mode 并发模式-实验）。 ◾ 对加载状态有更好的反馈（Suspense、useTransition）。 ◾ 强大的调试、检查和分析功能（开发工具和分析器）。 ◾ 有针对性的错误处理（错误界限）。
以use开头的词-useState, useRedcer, useContext, useEffect, and useTransition-是React Hooks的例子。 它们是你可以从React功能组件中调用的函数，并且可以钩住React的关键功能：状态、生命周期和上下文。 React Hooks让你把状态添加到功能组件中，干净地封装副作用，并在你的项目中重用代码。 通过使用Hooks，你不再需要类，以一种优雅的方式减少和整合你的代码。
并发模式和Suspense提供了一种手段，可以更慎重地考虑何时加载代码、数据和资源，并以一种协调的方式处理加载状态和回退content，如旋转器。 其目的是在应用程序加载和状态变化时改善用户体验，并改善开发人员的体验，使其更容易钩住这些新行为。 React可以暂停昂贵但不紧急的组件的渲染，并切换到紧急任务，如对用户交互的反应，以保持你的应用程序的响应，并为用户的生产力平滑感知路径。
https://reactjs.org 上的React文档是一个很好的资源，它提供了清晰的、结构良好的关于该库的理念、API和推荐使用的解释，以及团队的博客文章和实时代码示例的链接、关于新功能的会议讲座和其他React相关资源。 特别是，看看关于React 17（https://reactjs.org/blog/2020/10/20/react-v17.html）的博文。React的下一个主要版本于2020年10月发布，但不包含面向开发者的新功能。 相反，它包括使React应用程序更容易逐步升级的变化，以及并发模式及其API的进一步实验性开发。
React Hooks 可以为函数组件添加状态
React的核心优势之一是它如何将应用和组件的状态与用户界面同步。 当状态发生变化时，基于用户的交互或来自系统或网络的数据更新，React智能而有效地计算出在浏览器中的DOM或在其他环境中的UI应该做哪些变化。
状态可以是一个组件的本地状态，也可以是树中更高一级的组件，并通过属性在兄弟姐妹之间共享，或者是全局的，并通过React的Context机制或高阶组件（将一个组件作为参数并返回一个新的组件的函数，该组件包裹了传入的组件，但有额外的功能）来访问。 为了让一个组件拥有状态，过去你需要使用一个由React.Component扩展的JavaScript类的组件。 现在，通过React Hooks，你可以将状态添加到功能组件中。
有状态的函数组件。更少的代码，更好的组织
与类相比，带有Hooks的函数组件鼓励更干净、更精简的代码，易于测试、维护和重复使用。 函数组件是一个JavaScript 函数，返回其用户界面的描述。 该用户界面取决于传入的属性和由该组件管理或访问的状态。
一个具有状态和封装代码的Quiz功能组件，用于加载数据和管理对服务的订阅
一个Quiz组件，它执行了几个副作用。
◾ 它加载自己的问题数据--包括初始数据和用户选择新问题集时的新问题。 ◾ 它订阅了一个用户服务--该服务提供当前在线的其他测验用户的最新信息，因此用户可以加入一个团队或挑战对手。
在JavaScript中，函数可以包含其他函数，所以组件可以包含事件处理程序，对用户与用户界面的交互作出反应， 例如，显示、隐藏或提交答案，或移动到下一个问题。
在该组件中，你可以 很容易地封装副作用，比如获取问题数据或订阅用户服务。 你也可以为这些副作用包括清理代码，以取消任何未完成的数据获取和取消对用户服务的订阅。
使用Hooks，这些功能甚至可以被提取到组件外的自己的函数中，以备重复使用或共享。
使用新的函数组件方法而不是旧的基于类的方法的一些原因。
◾ 减去代码 ◾ 更好的代码组织，相关的代码与任何清理的代码保存在一起 ◾ 将特征提取为可重复使用和共享的外部函数 ◾ 更容易测试的组件 ◾ 不需要在类的构造函数中调用super()。 ◾ 不需要用this和绑定的处理程序工作 ◾ 更简单的生命周期模型 ◾ 处理程序、副作用函数和返回的用户界面范围内的本地状态
这个列表中的所有项目都有利于编写更容易理解的代码，因此更容易工作和维护
在类组件中，状态被设置在构造函数中，事件处理程序被绑定到this，而副作用代码被分割到多个生命周期方法中（componentDidMount, componentWillUnmount, componentWillUpdate，等等）。 在一个生命周期方法中，与不同效果和功能有关的代码并排在一起是很常见的。
带有Hooks的函数组件不再需要所有的生命周期方法，因为效果可以被封装到Hooks中。 这种变化产生了更整洁、更有组织的代码
一个代码分散在生命周期方法中的类组件，和一个具有相同功能但代码较少、组织较好的函数组件。
图中的Quiz函数组件所示。代码的组织更加合理，两个副作用被分开，它们的代码被整合在每个效果的一个地方。 改进后的组织结构使我们更容易找到某个特定效果的代码，看到一个组件是如何工作的，并在将来维护它。 把一个功能或效果的代码放在一个地方，使得它更容易被提取到它自己的一个外部函数中，这就是我们接下来要讨论的
自定义Hooks 更加容易的代码重用
带Hooks的函数组件鼓励你把相关的副作用逻辑放在一个地方。 如果副作用是许多组件都需要的功能，你可以进一步组织，将代码提取到自己的外部函数中；你可以创建所谓的自定义Hooks。
下图显示如何将Quiz功能组件的问题加载和用户服务订阅任务转移到他们自己的自定义Hooks中。 任何仅用于这些任务的状态都可以被移到相应的Hooks中。 获取问题数据和订阅用户服务的代码可以被提取到自定义Hooks中。随之而来的状态也可以由Hooks管理。
一旦你有了一个自定义Hooks，你就不会被限制在你的原始组件中调用它。
你可以在许多组件中使用它，与你的团队分享它，或者发布它供其他人使用
你可以将代码提取到自定义Hooks中，以便重复使用和共享。 Quiz组件同时调用useUsers和useFetchHooks。 聊天组件调用useUsersHooks。
新的超轻量级功能组件使用 useUsers 自定义Hooks和useFetch自定义Hooks来执行用户服务子描述和问题获取的任务，以前它是自己执行的。 但现在第二个组件，聊天，也使用了useUsers自定义Hooks。 Hooks使这种功能共享在React中变得更加容易； 自定义Hooks可以被导入并在你的应用程序组合中需要的地方使用。
每个自定义Hooks都可以维护它自己的状态，不管它需要什么来履行它的职责。 因为Hooks只是函数，如果组件需要访问Hooks的任何状态，Hooks可以在其返回值中包含这些状态。 例如，一个获取指定ID的用户信息的自定义Hooks可以将获取的用户数据存储在本地，但将其返回给任何调用该Hooks的组件。 每个Hooks调用都封装了自己的状态，就像其他函数一样。
要想了解程序员将各种常见任务轻松抽象为自定义Hooks的情况，请看一下useHooks网站：https://usehooks.com
useHooks网站有许多自定义Hooks的例子。
◾ useRouter-封装React Router提供的新Hooks。 ◾ useAuth-使任何组件能够获得当前的认证状态，并在其发生变化时重新渲染。 ◾ useEventListener-抽象了向组件添加和删除事件监听器的过程。 ◾ useMedia-让你在组件逻辑中轻松使用媒体查询。
在推出自己的Hooks之前，值得在useHooks等网站或npm等软件包库中研究是否存在适合你使用情况的Hooks。 如果你已经使用库或框架来处理数据获取或状态管理等常见情况，请检查最新版本，看看它们是否引入了Hooks，以使其工作更容易。
第三方Hooks提供现成的、经过测试的功能
跨组件共享功能并不新鲜，它已经是React开发的一个重要部分了。 Hooks提供了一种更简洁的共享代码和钩住功能的方式，而不是老式的高阶组件和渲染props的方法，后者往往会导致高度嵌套的代码（"包装地狱"）和错误的代码层次结构。
三个例子。
◾ 用于页面导航的React Router ◾ Redux作为一个应用程序的数据存储 ◾ 用于动画的React Spring
呼叫中心
React Router提供了一些组件来帮助开发者管理他们应用中页面之间的导航。 它的自定义Hooks使得访问导航中涉及的常见对象变得容易：useHistory、useLocation、useParams和useRouteMatch。 例如，useParams可以访问页面的URL中匹配的任何参数。
URL: /quiz/:title/:qnum
代码： tsx const {title, qnum} = useParams()。
REDUX
对于一些应用程序，单独的状态存储可能是合适的。 Redux是一个流行的创建这种存储的库，它经常通过React Redux库与React结合。从7.1版开始，React Redux提供了一些使与存储的交互更容易的方法：useSelector、useDispatch和useStore。 例如，useDispatch可以让你调度一个动作来更新商店中的状态。 假设你有一个为测验建立问题集的应用程序，你想添加一个问题。
const dispatch = useDispatch()。 dispatch({type: "add question", payload: /* question data */})。新的自定义Hooks消除了一些与连接React应用程序和Redux store有关的模板代码。 React也有一个内置的Hooks，useReducer，它可能提供一个更简单的模型，用于调度更新状态的动作，并在某些情况下消除对Redux的感知需求。
REACT SPRING
React Spring是一个基于Spring的动画库，目前提供了四个Hooks来访问其功能：useSpring、useSprings、useTrail、useTransition和useChain。 例如，要在两个值之间制作动画，你可以选择useSpring。
const props = useSpring({opacity: 1, from: {opacity: 0}})。React Hooks使库作者更容易为开发者提供更简单的API，而不是用潜在的深度嵌套的虚假组件层次结构来扰乱他们的代码。 同样，其他一些新的React功能，如并发模式和暂停(Suspense)，使库作者和应用程序开发人员能够在他们的代码中更好地管理同步进程，并提供更顺畅、更灵敏的用户体验。
使用并发模式和Suspense构建更好的用户体验
应用程序可能需要加载大量的代码，获取大量的数据，并试图处理这些数据以提供用户所需的信息
为16和17版本重写React的很大一部分动机是建立架构，以应对用户界面的多种需求，因为它在用户继续与应用程序互动时加载和操作数据。 并发模式是这个新架构的核心部分，而Suspense组件自然适合新模式
长时间运行的操作会减慢屏幕的更新速度，导致用户的体验变差
假设你有一个应用程序，在一个长长的列表中显示产品，并有一个文本框，用户在其中键入以过滤该列表。 你的应用程序在用户输入时更新列表。每一次点击触发代码重新过滤列表，要求React将更新的列表组件绘制到屏幕上。 昂贵的过滤过程、重新计算和更新用户界面占用了处理时间，降低了文本框的响应速度。 用户的体验是一个滞后的、缓慢的文本框，在用户输入时不显示文本。
如果没有并发模式，像按键输入这样的互动就会被长期运行的更新所阻断
如果应用程序能够优先考虑文本框的更新，并保持用户体验的顺畅，暂停(Suspense)和重新启动围绕打字的过滤任务，那不是很好吗？向 "并发模式 "问好吧!
并发模式 Concurrent Mode
通过并发模式，React可以以更精细的方式安排任务，暂停(Suspense)其构建元素的工作，检查差异，并更新DOM的先前状态变化，以确保它响应用户的互动， 例如。在前面的过滤应用程序的例子中，React可以暂停(Suspense)渲染过滤后的列表，以确保用户输入的文本出现在文本框中。
那么，并发模式是如何实现这种魔力的呢？新的React架构将其任务分解成更小的工作单元，为浏览器或操作系统提供定期的点，以通知应用程序，用户正试图与它互动。 然后，React的调度器可以根据每个任务的优先级来决定要做什么工作。 对组件树的某一部分进行编辑和提交修改，可以暂停(Suspense)或取消。
在并发模式下，React可以暂停(Suspense)运行时间较长的更新，以便对用户的互动做出快速反应。
不仅仅是用户交互可以从这种智能调度中受益；对传入数据的响应、懒加载的组件或媒体，或其他异步进程也可以享受更顺畅的用户界面升级。 React可以继续显示一个完全交互式的现有用户界面（而不是一个加载器），同时它在内存中渲染更新状态的用户界面，当足够多时就切换到新的用户界面。 并发模式启用了几个新的Hooks，useTransition和useDeferredValue，以改善用户体验，使从一个视图到另一个视图或从一个状态到另一个状态的变化更加平滑。 它还与 "暂停(Suspense)"相辅相成，后者既是一个用于渲染回退内容的组件，也是一个用于指定组件正在等待某些东西的机制，比如加载数据。
Suspense
React应用程序是由分层树中的组件构建的。 为了在屏幕上显示你的应用程序的当前状态（例如使用DOM），React会遍历你的组件并在内存中创建元素树，即对预期UI的描述。 它将最新的树与之前的树进行比较，并智能地决定需要进行哪些DOM更新来实现预期的用户界面。 并发模式让React暂停(Suspense)处理元素树的部分内容，要么是为了处理更优先的任务，要么是因为当前组件还没有准备好被处理。
为与Suspense一起工作而构建的组件现在可以暂停(Suspense)，如果它们还没有准备好返回它们的用户界面（记住，组件要么是函数，要么有一个渲染方法，并将属性和状态转换成用户界面）。 它们可能在等待组件代码或资源或数据的加载，只是还没有完全描述它们的用户界面所需的信息。 React可以暂停(Suspense)对一个暂停(Suspense)的组件的处理，继续遍历元素树。 但这在屏幕上看起来如何呢？你的用户界面上会有一个洞吗？
除了指定组件暂停(Suspense)的机制外，React还提供了一个Suspense组件，你可以用它来填补暂停(Suspense)的组件在用户界面上留下的漏洞。 用Suspense组件包裹你的用户界面部分，并使用它们的回退属性，让React知道在一个或多个被包裹的组件暂停(Suspense)时要显示什么内容。
<Suspense fallback={<MySpinner />}> <MyFirstComponent /> <MySecondComponent /> </Suspense>;Suspense允许开发者有意管理多个组件的加载状态，可以显示单个组件、组件组或整个应用的回退。 它为库作者提供了一种机制，以更新他们的API，使之与Suspense组件协同工作，因此他们的异步功能可以充分利用Suspense提供的加载状态管理。
之前已经创建了一个reducer来帮助管理BookablesList组件的状态。
我们应该如何更新该reducer以应对新的功能?
React Hooks