王树贤

# vite issues ## vite 支持optional Chaining（可选链判断运算符 ?.）和 nullishCoalescingOperator (空值合并运算符 ??) >安装依赖 ```bash yarn add @babel/plugin-proposal-optional-chaining --dev yarn add @babel/plugin-proposal-nullish-coalescing-operator -dev ``` >`vite.config.ts` 添加配置 ```ts import { defineConfig } from...

# `` >使用 React Router 的必要接口 ```tsx import React from 'react'; import ReactDOM from "react-dom"; import { BrowserRouter as Router } from "react-router-dom"; import App from "./App"; const rootElement =...

# React在不断发展 >https://github.com/jrlarsen/react-hooks-in-action >React使得构建用户界面组件变得很容易，这些组件是可组合的、可重用的，并能对数据的变化和用户的互动做出反应。 >一个社交媒体网站的页面包括按钮、帖子、评论、图片和视频，以及其他许多界面组件。 >当用户向下滚动页面、打开帖子、添加评论或转换到其他视图时，React帮助更新界面。 >一些页面上的组件可能有重复的子组件，即具有相同结构但内容不同的页面元素。 >而这些子组件也可能是由组件组成的!这里有图片缩略图、重复的按钮、可点击的文本和大量的图标。 >从整体上看，这个页面有数百个这样的元素。但是，通过将这样丰富的界面分解成可重用的组件，开发团队可以更容易地专注于特定的功能领域，并将这些组件应用于多个页面。 >使得定义和重用组件变得容易，并将它们组成复杂但可理解和可用的界面是React的核心目的之一 ## 同步状态和用户界面 >React使应用程序的用户界面与它的数据保持同步。 >你的应用程序在任何时候持有的数据被称为应用程序的状态，可能包括，例如，当前的帖子，关于登录用户的细节，评论是显示还是隐藏，或者文本输入字段的内容。 >如果新的数据通过网络到达，或者用户通过按钮或文本输入更新了一个值，React就会计算出需要对显示进行哪些改变，并有效地更新它。 >React智能地安排更新的顺序和时间，以优化你的应用程序的感知性能并改善用户体验。 >React通过重新渲染用户界面来响应组件状态的变化。 >但更新状态和重新渲染并不是一次性的任务。 >访客在使用你的应用程序时可能会引起大量的状态变化，而React需要反复向你的组件询问代表这些最新状态值的最新用户界面。 >你的组件的工作是将它们的状态和props（传递给它们的属性）转换成它们的用户界面描述。 >然后React接受这些用户界面描述，并在必要时对浏览器的文档对象模型（DOM）进行排版更新。 >当一个组件的状态值发生变化时，React会重新渲染用户界面。  ### React调用和重新调用一个函数组件时的一些关键步骤 步骤 |会发生什么？ | 讨论 ---...

# 用useState Hooks管理组件状态 >下图是对React工作的一个非常基本的说明： >它应该使用当前的状态来渲染UI。 >如果状态发生变化，React应该重新渲染用户界面。 >图中显示了一个友好信息中的名字。当名字的值发生变化时，React会更新UI，在其消息中显示新的名字。 >我们通常希望状态和UI是同步的（尽管我们可能会选择在状态转换期间延迟同步--例如在获取最新数据时） >当你改变一个组件的值时，React应该更新UI。  >React提供了少量的函数，或者说Hooks，使它能够跟踪你的组件中的值，并保持状态和UI同步。 >对于单个值，React给我们提供了useState Hooks >我们将看看如何调用这个Hooks，它返回什么，以及如何使用它来更新状态，触发React更新UI。 >组件通常需要不止一个状态来完成它们的工作，所以我们将看到如何多次调用useState来处理多个值。 >这不仅仅是一个记录useState API的问题（你可以去看React的官方文档）。 ## 设置预订管理器应用程序 >当调用useStateHooks时，它同时返回最新的状态值和一个用于更新该值的函数。 >使用updater函数可以让React保持在循环中，并让它做它的syncy业务。 >你的有趣但专业的公司拥有众多可供员工预订的资源：会议室、视听设备、技术员时间、桌上足球，甚至还有派对用品。 >有一天，老板要求你为公司建立一个应用程序的骨架 网络，让工作人员预订资源。 >该应用程序应该有三个页面，分别是Book- ings、Bookables和Users。 >（从技术上讲，这是一个单页面的应用程序，页面实际上是组件，但我们将继续称它们为页面，因为从用户的角度来看，他们是在页面之间切换。 ```bash npx create-react-app...

# 用 useReducer Hooks 管理组件状态 ## 响应单一事件，更新多个状态值 >当组件开始变得更加复杂，多个事件引起多个状态变化时，跟踪这些变化并确保所有相关的状态值被一起更新变得越来越困难。 >当状态值以这种方式相关时，要么相互影响，要么经常一起改变，这有助于将状态更新逻辑移到一个地方，而不是将执行改变的代码分散到事件处理函数中，无论是内联还是单独定义。 >React给我们提供了useReducer Hooks来帮助我们管理这种状态更新逻辑的搭配 ### 不可预测的状态变化会分散用户的注意力 >我们不希望笨重的、不可预知的界面阻碍用户继续完成任务。 >如果用户界面不断地把他们的注意力从他们想要的焦点上拉开，或者让他们在没有反馈的情况下等待，或者把他们送进死胡同，他们的思维过程就会被打断，他们的工作就会变得更加困难，他们的一天就会被毁掉。 ### 用可预测的状态变化使用户保持注意力 ## 使用Reducer管理更复杂的状态 >当你有多块相互关联的状态时，使用一个还原器(reducer)可以使你更容易进行和理解状态变化。 >◾ 还原器(reducer)可以帮助你以集中的、定义明确的方式管理状态变化，并有明确的行动来作用于状态。 >◾ 还原器(reducer)使用动作从先前的状态生成一个新的状态，使其更容易指定更复杂的更新，可能涉及多个相互关联的状态。 >◾ React提供了useReducer Hooks，让你的组件指定初始状态，访问当前状态，并调度行动来更新状态和触发重新渲染。 >◾ Dispatching 明确定义的动作使得跟踪状态变化和理解你的组件如何与状态互动以响应不同的事件更加容易。...

# 处理副作用 useEffect >React将我们的数据转换为用户界面。 >每个组件都扮演着自己的角色，为整个用户界面做出自己的贡献。 >React构建元素树，将其与已经渲染的内容进行比较，并将任何必要的变化提交给DOM。 >当状态发生变化时，React会再次经历这个过程来更新用户界面。 >React真的很擅长有效地决定什么应该更新并安排任何变化。 >然而，有时我们需要我们的组件到达这个数据流过程之外，直接与其他API交互。 >一个以某种方式影响到外部世界的行为被称为副作用。 >常见的副作用包括以下几种。 >◾ 设置页面标题势在必行 >◾ 与定时器一起工作，如setInterval或setTimeout >◾ 测量DOM中元素的宽度、高度或位置 >◾ 将信息记录到控制台或其他服务 >◾ 设置或获取本地存储中的值 >◾ 获取数据或订阅和取消订阅服务 >无论我们的组件想要实现什么，如果它们简单地忽略React并试图盲目地执行它们的任务，那是很危险的。 >更好的做法是寻求React的帮助，有效地安排这些副作用，考虑它们应该在什么时候和多长时间运行一次，甚至在React完成渲染每个组件并将变化提交到屏幕上的工作时。 >React提供了useEffectHooks，这样我们就可以更好地控制副作用，并把它们整合到我们组件的生命周期中 ## useEffect API >如何以不会失控的方式设置副作用。...

#### React 最佳实践 ##### 在开发组件时，保持稳定的 DOM 结构会有助于性能的提升。 >例如，可以通过 CSS 隐藏或显示节点，而不是真的移除或添加 DOM 节点。 ##### 在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。 ##### 不建议在 getDefaultProps、getInitialState、shouldComponentUpdate、componentWillUpdate、render 和 componentWillUnmount 中调用 setState，特别注意：不能在 shouldComponentUpdate 和 componentWillUpdate中调用 setState，会导致循环调用。 *** ##### 组件接口设计的三个原则：...

#### react diff >from: https://zhuanlan.zhihu.com/p/20346379 >React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障 >React diff 会帮助我们计算出 Virtual DOM 中真正变化的部分，并只针对该部分进行实际 DOM 操作，而非重新渲染整个页面，从而保证了每次操作更新后页面的高效渲染 > - React 通过分层求异的策略，对 tree diff 进行算法优化； > -...

#### 生命周期 >React 的主要思想是通过构建可复用组件来构建用户界面。 >所谓组件其实就是 有限状态机，通过状态渲染对应的界面，且每个组件都有自己的生命周期，它规定了组件的状态和方法需要在哪个阶段进行改变和执行。 >有限状态机（FSM），表示有限个状态以及在这些状态之间的转移和动作等行为的模型。 >一般通过状态、事件、转换和动作来描述有限状态机，下面是描述组合锁状态机的模型图，包括5个状态、5个状态自转换、6个状态间转换和1个复位 RESET 转换到状态 S1。 >状态机，能够记住目前所处的状态，根据当前的状态可以做出相应的决策，并且在进入不同的状态时，可以做不同的操作。 >通过状态机将复杂的关系简单化，利用这种自然而直观的方式可以让代码更容易理解。  >React 正是利用这一概念，通过管理状态来实现对组件的管理。 >例如，某个组件有显示和隐藏两个状态，通常会设计两个方法 show() 和 hide() 来实现切换； >而 React 只需要设置状态 setState({ showed: true/false }) 即可实现。 >同时，React...

#### React 的设计思想 > - React 界面完全由数据驱动； > - React 中一切都是组件； > - props 是 React 组件之间通讯的基本方式。 ##### UI = f(data) >等号左边的 UI 代表最终画出来的界面；等号右边的 f 是一个函数，也就是我们写的 React 相关代码；data 就是数据，在 React...