慕雨 Blog https://www.axin.work/ 这是一个由NotionNext生成的站点 Mon, 10 Feb 2025 06:10:48 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed zh-CN All rights reserved 2025, 慕雨 <![CDATA[React笔记-核心概念]]> https://www.axin.work/article/5cc20137-2f93-45e5-a9d5-27389e197ece https://www.axin.work/article/5cc20137-2f93-45e5-a9d5-27389e197ece Sat, 28 May 2022 00:00:00 GMT

核心概念

JSX简介

什么是JSX？

以类似模板语法的方式描述UI的一种语法。它是JS的语法糖，本质上也是JS。可以在其中使用变量或表达式、函数等。

为什么使用JSX？

将标记与逻辑 共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离 (opens new window)。
React不强制使用JSX，但在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。

在 JSX 中嵌入表达式

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式 (opens new window)。

JSX 也是一个表达式

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象
可以把JSX当初一个对象来对待，可以使用它赋值给变量、当参数输入函数、返回JSX等。

JSX 特定属性

通过使用引号，来将属性值指定为字符串字面量：
JSX中的属性名使用camelCase(小驼峰)命名。如上面例子中的tabIndex
使用大括号，来在属性值中插入一个 JavaScript 表达式：

使用 JSX 指定子元素

JSX 标签里能够包含很多子元素:

JSX 防止注入攻击

React DOM 在渲染所有输入内容之前，默认会进行转义 (opens new window)。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本） (opens new window)攻击。

JSX 表示对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
以下两种示例代码完全等效：

元素渲染

元素是构成 React 应用的最小砖块，描述了你在屏幕上想看到的内容。
与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

将一个元素渲染为 DOM

假设你的 HTML 文件某处有一个 <div>：
根节点，React应用一般只有单一根DOM节点
但一个html页面可以有多个React应用，每个应用对应一个独立根节点。

更新已渲染的元素

React 元素是不可变对象 (opens new window)。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。
根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 root.render()。
考虑一个计时器的例子：
注意：在实践中，大多数 React 应用只会调用一次 root.render()。在下一个章节，我们将学习如何将这些代码封装到有状态组件 (opens new window)中。

React 只更新它需要更新的部分

上个例子中，尽管每一秒我们都会新建一个描述整个 UI 树的元素，但React DOM 只会更新实际改变了的内容。
注意：react 18版本 已移除原 ReactDOM.render 方法，以 createRoot 代替。

组件&Props

函数组件与 class 组件

1.函数组件

该函数是一个有效的React组件。接收唯一带有数据的props参数，并返回一个React元素。

2.class组件

使用ES6的class来定义：
以上两个组件是等效的。

函数组件与Class组件在事件处理上的一些区别

  • 使用class组件时的事件处理： onClick={() => this.props.onClick()}
  • 使用函数组件时的事件处理： onClick={props.onClick}（注意两侧都没有括号）。
class组件特点：
  • 有组件实例
  • 有生命周期
  • 有 state 和 setState
函数组件特点：
  • 没有组件实例
  • 没有生命周期
  • 没有 state 和 setState，只能接收 props
  • 函数组件是一个纯函数，执行完即销毁，无法存储 state
class 组件存在的问题：
  • 大型组件很难拆分和重构，变得难以测试
  • 相同业务逻辑分散到各个方法中，可能会变得混乱
  • 复用逻辑可能变得复杂，如 HOC 、Render Props
所以 react 中更提倡函数式编程，因为函数更灵活，更易拆分，但函数组件太简单，所以出现了hook，hook就是用来增强函数组件功能的。
类组件功能最为完备和强大，某些特殊用途(如错误边界)组件只能写成类式组件。函数组件没有this困扰且代码简洁，大部分的普通组件都可以写成函数组件。

属性展开运算符

如果你已经有了一个 props 对象，你可以使用展开运算符 ...来在 JSX 中传递整个 props 对象。以下两个组件是等价的：
还可以选择只保留当前组件需要接收的 props，并使用展开运算符将其他 props 传递下去。

渲染组件（父子组件传值）

React 元素也可以是用户自定义的组件：
通过属性（attributes）来传递值给子组件：
注意： 组件名称必须以大写字母开头。
React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。

组合组件（复用组件）

通常来说，每个新的 React 应用程序的顶层组件都是 App 组件

提取组件（拆分组件）

参考如下 Comment 组件：
该组件由于嵌套的关系，变得难以维护，且很难复用它的各个部分。因此，让我们从中提取一些组件出来。
首先，提取 Avatar 组件：

props命名原则

Avatar 不需知道它在 Comment 组件内部是如何渲染的。因此，我们给它的 props 起了一个更通用的名字：user，而不是 author。
我们建议从组件自身的角度命名 props，而不是依赖于调用组件的上下文命名。
接下来，我们将提取 UserInfo 组件，该组件在用户名旁渲染 Avatar 组件：
最终的 Comment 组件：
最初看上去，提取组件可能是一件繁重的工作，但是，在大型应用中，构建可复用组件库是完全值得的。

提取原则

  • UI中多次被使用的部分
  • 一个足够复杂的组件（页面）

Props 的只读性（不能修改Props）

组件无论是使用函数声明还是通过 class 声明 (opens new window)，都决不能修改自身的 props。
当然，应用程序的 UI 是动态的，并会伴随着时间的推移而变化。在下一章节 (opens new window)中，我们将介绍一种新的概念，称之为 “state”。在不违反上述规则的情况下，state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容

State&生命周期

State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件.
State类似于vue中的data选项

生命周期

React16 自上而下地对生命周期做了另一种维度的解读：
  • Render阶段：计算一些必要的状态信息。
  • Pre-commit阶段：这里指的是“更新真正的 DOM 节点”这个动作。该阶段并没有去更新真实的 DOM，不过 DOM 信息已经是可以读取(包括 ref)。
  • Commit 阶段：React 会完成真实 DOM 的更新工作。
与此同时，新的生命周期在流程方面，仍然遵循“挂载”、“更新”、“卸载”这三个广义的划分方式。它们分别对应到：
挂载过程：
  • constructor
  • getDerivedStateFromProps
  • render
  • componentDidMount
更新过程：
  • getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • getSnapshotBeforeUpdate
  • componentDidUpdate
卸载过程：
  • componentWillUnmount
新
notion image
旧
notion image
 

将函数组件转换成 class 组件

在没有useState钩子函数之前，是通过class组件管理State ？
每次组件更新时 render 方法都会被调用，但只要在相同的 DOM 节点中渲染 <Clock /> ，就仅有一个 Clock 组件的 class 实例被创建使用。这就使得我们可以使用如 state 或生命周期方法等很多其他特性。
单例模式？

向 class 组件中添加局部的 state

将生命周期方法添加到 Class 中

在具有许多组件的应用程序中，当组件被销毁时释放所占用的资源是非常重要的。
当 Clock 组件第一次被渲染到 DOM 中的时候，就为其设置一个计时器 (opens new window)。这在 React 中被称为“挂载（mount）”。
同时，当 DOM 中 Clock 组件被删除的时候，应该清除计时器 (opens new window)。这在 React 中被称为“卸载（unmount）”。

正确地使用 State

关于 setState() 你应该了解三件事：

不要直接修改 State

构造函数是唯一可以给 this.state 直接赋值的地方
setState是React内部方法，使state更新具有响应式？
这是框架设计之初刻意为之，react通过迫使你调用setState去更新视图是为了让你意识到你正在改变组件的状态。
这样可以让开发者在潜意识中认为改变state是一件严肃的事情，一定程度上规范开发行为。
以上是setState为什么存在，下面我们来看它的意义。
1.任务驱动的更新
react实现更新的原理并不是vue那样的双向绑定，（vue用的是gettet和setter（3.0用的Proxy），在你赋值时它就知道哪个字段变了，于是也就知道该更新哪个组件）而是在你设置state之后，随之产生一个更新任务，任务的出现触发更新调度。setState的作用正是去创建任务，标记哪个fiber节点产生了更新，并触发任务调度。如果直接修改，对象变了，但还是同一个对象，react并不知道数据已经变了。
2.任务优先级
setState创建更新时要从scheduler中拿到触发本次更新的优先级，将优先级加入到任务中。
setState作为更新的入口，它是任务下发的起点。也不是说直接改变state就完全不能实现上述两点，但直接改变state想必是要有依赖收集的过程，但react中并不存在依赖收集，直接改了就是改了，并没有触发任何更新相关的流程。

State 的更新可能是异步的

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。
因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。
要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：

State 的更新会被合并

当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state。
这里的合并是浅合并，所以 this.setState({comments}) 完整保留了 this.state.posts， 但是完全替换了 this.state.comments。

数据是向下流动的（单向数据流）

不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的，并且它们也并不关心它是函数组件还是 class 组件。
这就是为什么称 state 为局部的或是封装的的原因。除了拥有并设置了它的组件，其他组件都无法访问。
组件可以选择把它的 state 作为 props 向下传递到它的子组件中：
FormattedDate 组件会在其 props 中接收参数 date，但是组件本身无法知道它是来自于 Clock 的 state，或是 Clock 的 props，还是手动输入的。
这通常会被叫做“自上而下”或是“单向”的数据流。任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。
如果你把一个以组件构成的树想象成一个 props 的数据瀑布的话，那么每一个组件的 state 就像是在任意一点上给瀑布增加额外的水源，但是它只能向下流动。

每个组件都是真正独立的。

事件处理

与传统HTML绑定事件的区别

传统的 HTML：
在 React 中略微不同：
  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

阻止默认事件 (合成事件对象)

在 React 中，你需要这样阻止默认事件：
在这里，e 是一个合成事件。React 根据 W3C 规范 (opens new window)来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。React 事件与原生事件不完全相同。如果想了解更多，请查看 SyntheticEvent (opens new window)参考指南。

绑定事件的方式

使用 React 时，你一般不需要使用 addEventListener 为已创建的 DOM 元素添加监听器。事实上，你只需要在该元素初始渲染的时候添加监听器即可。
当你使用 ES6 class (opens new window)语法定义一个组件的时候，通常的做法是将事件处理函数声明为 class 中的方法。例如，下面的 Toggle 组件会渲染一个让用户切换开关状态的按钮：
你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 (opens new window)this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。
这并不是 React 特有的行为；这其实与 JavaScript 函数工作原理 (opens new window)有关。通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。
如果觉得使用 bind 很麻烦，这里有两种方式可以解决。如果你正在使用实验性的 public class fields 语法 (opens new window)，你可以使用 class fields 正确的绑定回调函数：
Create React App (opens new window)默认启用此语法。
如果你没有使用 class fields 语法，你可以在回调中使用箭头函数 (opens new window)：
此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。

事件命名规范

在 React 中，有一个命名规范，通常会将代表事件的监听 prop 命名为 on[Event]，将处理事件的监听方法命名为 handle[Event] 这样的格式。

向事件处理程序传递参数

在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：
上述两种方式是等价的，分别通过箭头函数 (opens new window)和 Function.prototype.bind (opens new window)来实现。
在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

条件渲染

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if (opens new window)或者条件运算符 (opens new window)去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。
观察这两个组件:
再创建一个 Greeting 组件，它会根据用户是否登录来决定显示上面的哪一个组件。

元素变量

你可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。
在 CodePen 上尝试(opens new window)
此方式有些复杂~

与运算符 &&

通过花括号包裹代码，你可以在 JSX 中嵌入表达式 (opens new window)。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染：
如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。
请注意，返回 false 的表达式会使 && 后面的元素被跳过，但会返回 false 表达式。在下面示例中，render 方法的返回值是 <div>0</div>。

三目运算符

可通过三目运算符来条件渲染相应组件。

阻止组件渲染

通过让 render 方法直接返回 null阻止渲染：
在组件的 render 方法中返回 null 并不会影响组件的生命周期。例如，上面这个示例中，componentDidUpdate 依然会被调用。

列表&Key

如下代码，我们使用 map() (opens new window)函数让数组中的每一项变双倍，然后我们得到了一个新的列表 doubled 并打印出来：
在 React 中，把数组转化为元素 (opens new window)列表的过程是相似的。

渲染多个组件

基础列表组件

将列表组合成一个组件：

key

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用数据中的 id 来作为元素的 key
当元素没有确定 id 的时候，万不得已你可以使用元素索引 index 作为 key：
如果列表项目的顺序可能会变化，我们不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。
如果你选择不指定显式的 key 值，那么 React 将默认使用索引用作为列表项目的 key 值

用 key 提取组件 (在map方法内设置key)

元素的 key 只有放在就近的数组上下文中才有意义。
例子：不正确的使用 key 的方式
一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性。

key 只是在兄弟节点之间必须唯一

数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key 值。

不能用key当props名传给子组件

key 会传递信息给 React ，但不会传递给你的组件。如果你的组件中需要使用 key 属性的值，请用其他属性名显式传递这个值：
上面例子中，Post 组件可以读出 props.id，但是不能读出 props.key。

在 JSX 中嵌入 map()

JSX 允许在大括号中嵌入任何表达式 (opens new window)，所以我们可以内联 map() 返回的结果：
这么做有时可以使你的代码更清晰，但有时这种风格也会被滥用。
就像在 JavaScript 中一样，何时需要为了可读性提取出一个变量，这完全取决于你。但请记住，如果一个 map() 嵌套了太多层级，那可能就是你提取组件 (opens new window)的一个好时机。

表单

受控组件（双向数据绑定）

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState() (opens new window)来更新。
我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
例如，如果我们想让前一个示例在提交时打印出名称，我们可以将表单写为受控组件：
类似于vue中的双向绑定，v-model

textarea 标签（使用value定义值）

在 HTML 中, <textarea> 元素通过其子元素定义其文本:
在 React 中，<textarea> 使用 value 属性赋值。这样，可以使得使用 <textarea> 的表单和使用单行 input 的表单非常类似：
注意，this.state.value 初始化于构造函数中，因此文本区域默认有初值

select 标签 （value代替选中属性）

React 在根 select 标签上使用 value 属性代替option元素上的selected 属性（选中属性）
在 HTML 中，<select> 创建下拉列表标签。例如，如下 HTML 创建了水果相关的下拉列表：
请注意，由于 selected 属性的缘故，椰子选项默认被选中。React 并不会使用 selected 属性，而是在根 select 标签上使用 value 属性。这在受控组件中更便捷，因为您只需要在根标签中更新它。例如：

select多选

你可以将数组传递到 value 属性中，以支持在 select 标签中选择多个选项：

小总结

总的来说，这使得 <input type="text">, <textarea> 和 <select> 之类的标签都非常相似—它们都接受一个 value 属性，你可以使用它来实现受控组件。

文件 input 标签 （非受控组件）

在 HTML 中，<input type="file"> 允许用户从存储设备中选择一个或多个文件，将其上传到服务器，或通过使用 JavaScript 的 File API (opens new window)进行控制。
因为它的 value 只读，所以它是 React 中的一个非受控组件。将与其他非受控组件在后续文档中 (opens new window)一起讨论。

处理多个输入

当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作。

受控输入空值

在受控组件 (opens new window)上指定 value 的 prop 会阻止用户更改输入。如果你指定了 value，但输入仍可编辑，则可能是你意外地将value 设置为 undefined 或 null。
下面的代码演示了这一点。（输入最初被锁定，但在短时间延迟后变为可编辑。）

受控组件的替代品 (非受控组件)

有时使用受控组件会很麻烦，因为你需要为数据变化的每种方式都编写事件处理函数，并通过一个 React 组件传递所有的输入 state。当你将之前的代码库转换为 React 或将 React 应用程序与非 React 库集成时，这可能会令人厌烦。在这些情况下，你可能希望使用非受控组件 (opens new window), 这是实现输入表单的另一种方式。

成熟的解决方案

如果你想寻找包含验证、追踪访问字段以及处理表单提交的完整解决方案，使用 Formik (opens new window)是不错的选择。然而，它也是建立在受控组件和管理 state 的基础之上 —— 所以不要忽视学习它们。

状态提升 (共享状态)

通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去。
在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”
两个输入框共享数据的例子：
在 CodePen 上尝试(opens new window)
笔记
  1. 父组件给所有子组件传入state的值
  1. 子组件修改值时调用父组件的方法并把值传出
  1. 父组件接收到值之后修改state
  1. state被修改之后重新执行render函数，并回到第1步

小结

  • 任何可变数据应当只有一个相对应的唯一“数据源”
    • 通常，state 都是首先添加到需要渲染数据的组件中去
    • 然后，如果其他组件也需要这个 state，那么你可以将它提升至这些组件的最近共同父组件中
    • 你应当依靠自上而下的数据流 (opens new window)，而不是尝试在不同组件间同步 state。
  • “存在”于组件中的任何 state，仅有组件自己能够修改它
  • 如果某些数据可以由 props 或 state 推导得出，那么它就不应该存在于 state 中。（如上例中，经过tryConvert方法转换的后的值。）

React开发者工具（debug）

当你在 UI 中发现错误时，可以使用 React 开发者工具 (opens new window)来检查问题组件的 props，并且按照组件树结构逐级向上搜寻，直到定位到负责更新 state 的那个组件。

组合vs继承

React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用。

包含关系 (组件组合)

有些组件无法提前知晓它们子组件的具体内容。在 Sidebar（侧边栏）和 Dialog（对话框）等展现通用容器（box）的组件中特别容易遇到这种情况。

props的children属性（类似vue的插槽）

我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中：
笔记
类似于vue中的插槽

props传入组件（类似vue命名插槽）

少数情况下，你可能需要在一个组件中预留出几个“洞”。这种情况下，我们可以不使用 children，而是自行约定：将所需内容传入 props，并使用相应的 prop。
<Contacts /> 和 <Chat /> 之类的 React 元素本质就是对象（object），所以你可以把它们当作 props，像其他数据一样传递。你可以将任何格式的数据作为 props 进行传递。
笔记
类似于vue中的命名插槽

特例关系（字符串与组件组合）

有些时候，我们会把一些组件看作是其他组件的特殊实例，比如 WelcomeDialog 可以说是 Dialog 的特殊实例。
在 React 中，我们也可以通过组合来实现这一点。“特殊”组件可以通过 props 定制并渲染“一般”组件：

class方式的组件组合

组合也同样适用于以 class 形式定义的组件。

那么继承呢？（不推荐）

在 Facebook，我们在成百上千个组件中使用 React。我们并没有发现需要使用继承来构建组件层次的情况。
Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式。注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。
如果你想要在组件间复用非 UI 的功能，我们建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需通过 extend 继承它们。

React哲学

React 最棒的部分之一是引导我们思考如何构建一个应用。在这篇文档中，我们将会通过 React 构建一个可搜索的产品数据表格来更深刻地领会 React 哲学。

从设计稿开始

notion image

第一步：将设计好的 UI 划分为组件层级

首先，你需要在设计稿上用方框圈出每一个组件（包括它们的子组件）
你会看到我们的应用中包含五个组件。我们已经将每个组件展示的数据标注为了斜体。
  1. FilterableProductTable (橙色): 是整个示例应用的整体
  1. SearchBar (蓝色): 接受所有的用户输入
  1. ProductTable (绿色): 展示数据内容并根据用户输入筛选结果
  1. ProductCategoryRow (天蓝色): 为每一个产品类别展示标题
  1. ProductRow (红色): 每一行展示一个产品
你可能注意到，ProductTable 的表头（包含 “Name” 和 “Price” 的那一部分）并未单独成为一个组件。这仅仅是一种偏好选择，如何处理这一问题也一直存在争论。（简单的可以不用单独分一个组件，复杂的作为一个独立的组件就有必要了）
组件层级：
  • FilterableProductTable
    • SearchBar
    • ProductTable
      • ProductCategoryRow
      • ProductRow

第二步：用 React 创建一个静态版本

先用已有的数据模型渲染一个不包含交互功能的 UI。最好将渲染 UI 和添加交互这两个过程分开。
这是因为，编写一个应用的静态版本时，往往要编写大量代码，而不需要考虑太多交互细节；添加交互功能时则要考虑大量细节，而不需要编写太多代码。
在构建应用的静态版本时，我们需要创建一些会重用其他组件的组件，然后通过 props 传入所需的数据。props 是父组件向子组件传递数据的方式。即使你已经熟悉了 state 的概念，也完全不应该使用 state 构建静态版本。state 代表了随时间会产生变化的数据。
你可以自上而下或者自下而上构建应用：自上而下意味着首先编写层级较高的组件（比如 FilterableProductTable），自下而上意味着从最基本的组件开始编写（比如 ProductRow）。当你的应用比较简单时，使用自上而下的方式更方便；对于较为大型的项目来说，自下而上地构建，并同时为低层组件编写测试是更加简单的方式。
React 单向数据流（也叫单向绑定）的思想使得组件模块化，易于快速开发。
在 React 中，有两类“模型”数据：props 和 state。清楚地理解两者的区别是十分重要的

第三步：确定 UI state 的最小（且完整）表示

只保留应用所需的可变 state 的最小集合，其他数据均由它们计算产生。
可以由state计算产生的数据就没必要另外保存一个state！
对于使用props还是state，通过问自己以下三个问题，你可以逐个检查相应数据是否属于 state：
  1. 该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。
  1. 该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。
  1. 你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。
非state的数据：
  1. 由父组件传来的
  1. 不会随时间推移而改变的
  1. 能根据其他stete或props计算而来的

第四步：确定 state 放置的位置

我们需要确定哪个组件能够改变这些 state，或者说拥有这些 state。
注意：React 中的数据流是单向的，并顺着组件层级从上往下传递。
对于应用中的每一个 state：
  • 找到根据这个 state 进行渲染的所有组件。
  • 找到他们的共同所有者（common owner）组件（在组件层级上高于所有需要该 state 的组件）。
  • 该共同所有者组件或者比它层级更高的组件应该拥有该 state。
  • 如果你找不到一个合适的位置来存放该 state，就可以直接创建一个新的组件来存放该 state，并将这一新组件置于高于共同所有者组件层级的位置

第五步：添加反向数据流

让数据反向传递：处于较低层级的表单组件更新较高层级组件的state
实现方式：
  1. 父组件有一个能够修改state改变的回调函数，并传递给子组件
  1. 子组件的input修改值，使用onChange事件监听，并执行父组件传入的回调函数。
]]> <![CDATA[Websocket]]> https://www.axin.work/article/98c6e968-f31b-4ae4-a8b2-3b58775c97d1 https://www.axin.work/article/98c6e968-f31b-4ae4-a8b2-3b58775c97d1 Mon, 29 Jul 2024 00:00:00 GMT
node服务器端代码
页面相关代码
详细代码
]]> <![CDATA[TypeScript笔记]]> https://www.axin.work/article/3b99189e-fd83-4c80-abc4-76932e4e55da https://www.axin.work/article/3b99189e-fd83-4c80-abc4-76932e4e55da Mon, 24 Jun 2024 00:00:00 GMT
开发项目中我们经常会遇到的一些ts报错处理笔记。
开发项目中我们经常会遇到的一些ts报错处理笔记。
 
 

📝 TypeScript笔记

]]> <![CDATA[vue3笔记]]> https://www.axin.work/article/c621bbd5-f444-4472-8b8d-c967ee9c7406 https://www.axin.work/article/c621bbd5-f444-4472-8b8d-c967ee9c7406 Sat, 30 Apr 2022 00:00:00 GMT

Vue3学习笔记

Vue3简介

1.性能提升

  • 打包大小减少41%；
  • 初次渲染快55%，更新渲染快133%；
  • 内存减少54%；

2.源码的升级

  • 使用Proxy代替defineProperty实现响应式。

3.拥抱TypeScript

  • Vue3可以更好的支持TypeScript

4.新的特性

  • Composition API（组合API）：
      1. setup
      1. ref与reactive
      1. computed与watch
  • 新的内置组件：
      1. Fragment
      1. Teleport
      1. Suspense
  • 其他改变：
      1. 新的生命周期钩子
      1. data 选项应始终被声明为一个函数
      1. 移除keyCode支持作为v-on 的修饰符

创建Vue3工程

1.基于 vue-cli 创建

运行命令
接着选择版本 x3

2.基于 vite 创建 (推荐)

  • vite 是新一代前端构建工具，官网地址：[https://vitejs.cn]
      • vite的优势如下：
      1. 轻量快速的热重载（HMR），能实现极速的服务启动。
      1. 对 TypeScript、JSX、CSS 等支持开箱即用。
      1. 真正的按需编译，不再等待整个应用编译完成。
  • 具体操作
    • 编写一个App组件
        • 总结：
        1. Vite 项目中，index.html 是项目的入口文件，在项目最外层。
        1. 加载index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。
        1. Vue3中是通过 createApp 函数创建一个应用实例。
        1. Vue3向下兼容Vue2语法，且Vue3中的模板中可以没有根标签
    • 一个简单的效果

      Vue3核心语法

      1.OptionsAPI 与 CompositionAPI

      • Vue2的API设计是Options（配置）风格的。
      • Vue3的API设计是Composition（组合）风格的。

      Options API 的弊端

      Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

      Composition API 的优势

      可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

      2.拉开序幕的setup

      setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。
      • 传统选项式
        • vue3组合式
            • 特点如下：
          • setup函数返回的对象中的内容，可直接在模板中使用。 - setup中访问this是undefined。 - setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。
            • （Vue3中弱化了this）

        2.1 setup的返回值

        • 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用（重点关注）。
        • 若返回一个函数：则可以自定义渲染内容，代码如下：

          2.2 setup与Options API的关系

          • Vue2 的配置（data、methods）中可以访问到setup中的属性、方法。（因为setup处于beforecreate之前）
          • 但在setup中不能访问到Vue2的配置（data、methods）。
          • 如果与Vue2冲突，则setup优先。
          （setup没有this。里面不能写this）

          3.setup语法糖

          代码：
          扩展：上述代码，还需要编写一个不写setup的script标签，去指定组件名字，比较麻烦，我们可以借助vite中的插件简化
          1. 第一步：在终端中npm i vite-plugin-vue-setup-extend -D
          1. 第二步：打开vite.config.ts文件，改为：
            1. 第三步：<script setup lang="ts" name="Person">

            4.【ref 创建：基本类型的响应式数据】

            （该ref与vue2中的ref不同。该ref是可以使数据变为响应式的，哪个是响应式，就给哪个加）
            • 作用：定义响应式变量。
            • 语法：let xxx = ref(初始值)。
            • 返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
            • 注意点：
              • JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。
              • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。（JS中操作ref对象时候需要.value）

            5.【reactive 创建：对象类型的响应式数据】

            • 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）
            • 语法：let 响应式对象= reactive(源对象)。
            • 返回值：一个Proxy的实例对象，简称：响应式对象。
            • 注意点：reactive定义的响应式数据是“深层次”的。
            （Shift + Alt + 上/下箭头 选中代码往上/下面复制）

            6.【ref 创建：对象类型的响应式数据】

            • 其实ref接收的数据可以是：基本类型、对象类型。
            • 若ref接收的是对象类型，内部其实也是调用了reactive函数。
            （reactive只能定义对象类型的响应式数据）

            7.【ref 对比 reactive】

            宏观角度看：
            ref用来定义：基本类型数据、对象类型数据；reactive用来定义：对象类型数据。
            区别：
            ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
            使用原则：
            若需要一个基本类型的响应式数据，必须使用ref。若需要一个响应式对象，层级不深，ref、reactive都可以。若需要一个响应式对象，且层级较深，推荐使用reactive。做表单相关的数据，推荐使用reactive。

            8.【toRefs 与 toRef】

            • 作用：将一个响应式对象中的每一个属性，转换为ref对象。
            • 备注：toRefs与toRef功能一致，但toRefs可以批量转换。
            • toRefs是把整个reactive所定义的对象的每一组key-value都拿出来形成一个新的对象并且还具备响应式的能力
            • 语法如下：

              9.【computed计算属性】

              作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。
              底层借助了object.defineproperty方法提供的getter和setter

              10.【watch监听】

              • 作用：监视数据的变化（和Vue2中的watch作用一致）
              • 特点：Vue3中的watch只能监视以下四种数据：
              ref定义的数据。reactive定义的数据。函数返回一个值（getter函数）。一个包含上述内容的数组。
              (官方文档
              watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。
              第一个参数是侦听器的源。这个来源可以是以下几种：
              一个函数，返回一个值 一个 ref 一个响应式对象 ...或是由以上类型的值组成的数组 )
              我们在Vue3中使用watch的时候，通常会遇到以下几种情况：

              情况一

              监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

              情况二

              监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。
              注意：
              若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。 若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。
              监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，只有整个对象被改变的时候才会被监视到。

              情况三

              监视reactive定义的【对象类型】数据，且默认开启了深度监视。
              （reactive隐式创建深层监听，并且该深度监视没法关闭）
              对比ref与reactive修改整个对象的方法
              代码：

              情况四

              监视ref或reactive定义的【对象类型】数据中的某个属性，（遇到该情况，反手就用函数）注意点如下：
              1. 若该属性值不是【对象类型】，需要写成函数形式。
              1. 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。
              结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
              代码：

              情况五

              监视上述的多个数据

              11.【watchEffect】

              官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。
              watch对比watchEffect
              都能监听响应式数据的变化，不同的是监听数据变化的方式不同watch：要明确指出监视的数据，watch是惰性的，你让他监视谁才监视谁watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

              12.【标签的 ref 属性】

              作用：用于注册模板引用。
              用在普通DOM标签上，获取的是DOM节点。用在组件标签上，获取的是组件实例对象。
              用在普通DOM标签上：
              用在组件标签上：

              13.【props】

              路径别名报错注意：
              如果在引入"@"符号以下报错的时候，出现
              notion image
              这个错误通常是由于找不到所需的模块或类型声明文件引起的。在 Vue 3 项目中，使用@引入根目录是一个常见的路径别名设置。
              要解决这个问题，你需要在你的项目中进行一些配置：
              1. 在项目的根目录下找到 tsconfig.json 文件（如果没有，请创建一个）。这是 TypeScript 的配置文件。
              1. 在 tsconfig.json 文件中，添加一个 "baseUrl" 属性，指定你的根目录的路径
              1. 如果你使用了路径别名，比如 "@"，你还需要添加一个 "paths" 属性来映射路径别名到实际的文件路径。
              1. tsconfig.json 文件代码如下：
                index.ts代码：
                App.vue代码：
                Person.vue代码：

                14.【生命周期】

                概念：Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子
                • 规律：
                    • 生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。
                • Vue2的生命周期
                    • 创建阶段：beforeCreate、created 挂载阶段：beforeMount、mounted 更新阶段：beforeUpdate、updated 销毁阶段：beforeDestroy、destroyed
                • Vue3的生命周期
                    • 创建阶段：setup 挂载阶段：onBeforeMount、onMounted 更新阶段：onBeforeUpdate、onUpdated 卸载阶段：onBeforeUnmount、onUnmounted
                • 常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)
                （注意：在组件中，需要先把子组件挂载完毕，最后再挂载父组件App，因为父组件的最上面就是引用的一些子组件，必须先把所有的子组件挂载完毕以后。才会挂载父组件。有点像深度优先遍历）
                代码：

                15.【自定义hook】

                • 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。
                • 自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。
                useSum.ts中内容如下：
                useDog.ts中内容如下：
                组件中具体使用：

                路由

                1.【对路由的理解】

                notion image

                2.【基本切换效果】

                • Vue3中要使用vue-router的最新版本，目前是4版本。
                npm i vue-router
                • 路由配置文件代码如下：
                Index.ts代码：
                main.ts代码:
                App.vue代码如下
                注意：需要在App组件中引入RouterLink，RouterLink是标签，把a标签改成RouterLink，里面的href也改成to。激活高亮是active-class

                3.【两个注意点】

                路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。
                notion image

                4.【路由器工作模式】

                1. history模式
                    2. > 优点：URL更加美观，不带有#，更接近传统的网站URL。 > 缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。
                1. hash模式
                    2. > 优点：兼容性更好，因为不需要服务器端处理路径。 > 缺点：URL带有#不太美观，且在SEO优化方面相对较差。

                5.【to的两种写法】

                6.【命名路由】

                给路由规则命名：
                跳转路由：

                7.【嵌套路由】

                1. 编写News的子路由：Detail.vue
                1. 配置路由规则，使用children配置项：
                  1. 跳转路由（记得要加完整路径）：
                    1. 记得去Home组件中预留一个<router-view>

                      8.【路由传参(URL参数)】

                      query参数（查询参数） query参数必须是key=value的形式，多种keyvalue之间还需要一个&做衔接
                      1.传递参数：
                      2.接收参数：
                      params参数（路径参数） 可以直接写/，但是必须在index.ts规则中占好位，在最后加上？就是配置参数的必要性。可传参可不传 传参时路径不能用path了，只能用name
                      1.传递参数：
                      2.接收参数：
                      > 备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。 > 备注2：传递params参数时，需要提前在规则中占位。

                      9.【路由的props配置】

                      作用：让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

                      10.【 replace属性】

                      1. 作用：控制路由跳转时操作浏览器历史记录的模式。（在历史记录中返回不去）
                      1. 浏览器的历史记录有两种写入方式：分别为push和replace：
                          • push是追加历史记录（默认值）。
                          • replace是替换当前记录。
                      1. 开启replace模式： <RouterLink replace .......>News</RouterLink>

                      11.【编程式导航】

                      脱离RouterLink实现路由跳转 使用场景：
                      1. 只有符合某些条件再跳转，不是用户一点就跳转，到了时间自动跳，只有登陆成功，跳转到个人中心等
                      1. 鼠标滑过一个东西再跳转
                      路由组件的两个重要的属性：$route和$router变成了两个hooks

                      12.【重定向】

                      1. 作用：将特定的路径，重新定向到已有路由。
                      1. 代码（在规则里直接加）：

                        pinia

                        1.【准备一个效果】

                        vue2中用的是vuex，vue3用的是pinia。就是集中式状态管理
                        hooks 只是把代码集中在一起，pinia是各个组件之间共享数据

                        2.【搭建 pinia 环境】

                        第一步：npm i pinia
                        第二步：操作src/main.ts
                        此时开发者工具中已经有了pinia选项

                        3.【存储+读取数据】

                        1. Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。
                        1. 它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。
                        1. 具体编码：src/store/count.ts
                          1. 具体编码：src/store/talk.ts
                            1. 组件中使用state中的数据

                              4.【修改数据】(三种方式)

                              1. 第一种修改方式，直接修改（与vue2不同，pinia可以直接修改）
                                1. 第二种修改方式：批量修改
                                  1. 第三种修改方式：借助action修改（action中可以编写一些业务逻辑）
                                    1. 组件中调用action即可

                                      5.【storeToRefs】

                                      • 借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。 - 注意：pinia提供的storeToRefs只会将数据做转换，而不关注’store’里的方法。而Vue的toRefs会转换store中的所有数据包括方法。
                                      直接解构赋值的话会丢失响应式。
                                      用torefs包裹的话，会把store中所有的数据和方法都转化为ref
                                      pinia提供的`storeToRefs只会将数据做转换，而不关注store里的方法
                                      示例代码：

                                      6.【getters】

                                      1. 概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。
                                      1. 追加getters配置。
                                        1. 组件中读取数据：

                                          7.【$subscribe】

                                          通过 store 的 $subscribe() 方法侦听 state 及其变化

                                          8.【store组合式写法】

                                          组件通信

                                          Vue3组件通信和Vue2的区别：
                                          • 移出事件总线，使用mitt代替。
                                          • vuex换成了pinia。
                                          • 把.sync优化到了v-model里面了。
                                          • 把$listeners所有的东西，合并到$attrs中了。
                                          • $children被砍掉了。

                                          1.【props】

                                          概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。
                                          • 若 父传子：属性值是非函数。
                                          • 若 子传父：属性值是函数。
                                          父组件：
                                          子组件：

                                          2.【自定义事件】

                                          1. 概述：自定义事件常用于：子 => 父。
                                          1. 注意区分好：原生事件、自定义事件。
                                              • 原生事件：
                                                • 事件名是特定的（click、mosueenter等等）
                                                • 事件对象$event: 是包含事件相关信息的对象（pageX、pageY、target、keyCode）
                                              • 自定义事件：
                                                • 事件名是任意名称
                                                • 事件对象$event: 是调用emit时所提供的数据，可以是任意类型！！！
                                          1. 示例：

                                            3.【mitt】

                                            概述：与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信。
                                            notion image
                                            安装mitt
                                            1. 新建文件：src\utils\emitter.ts
                                              1. 接收数据的组件中：绑定事件、同时在销毁前解绑事件：
                                                1. 提供数据的组件，在合适的时候触发事件

                                                  4.【v-model】

                                                  1. 概述：实现 父↔子 之间相互通信。
                                                  1. 前序知识 —— v-model的本质
                                                    1. 组件标签上的v-model的本质：:moldeValue ＋ update:modelValue事件。
                                                        2. AtguiguInput组件中：
                                                    1. 也可以更换value，例如改成abc
                                                      1. 如果value可以更换，那么就可以在组件标签上多次使用v-model
                                                          2. notion image

                                                      5.【$attrs 】

                                                      1. 概述：$attrs用于实现当前组件的父组件（相当于一个中间人），向当前组件的子组件通信（祖→孙）。
                                                      1. 具体说明：$attrs是一个对象，包含所有父组件传入的标签属性。
                                                          2. 注意：$attrs会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己“消费”了)
                                                      父组件：
                                                      子组件：
                                                      孙组件：

                                                      6.【$refs、$parent】

                                                      1. 概述：
                                                          • $refs用于 ：父→子。
                                                          • $parent用于：子→父。
                                                      1. 原理如下：
                                                          • $refs ：值为对象，包含所有被ref属性标识的DOM元素或组件实例。
                                                          • $parent：值为对象，当前组件的父组件实例对象。

                                                      7.【provide、inject】

                                                      1. 概述：实现祖孙组件直接通信
                                                      1. 具体使用：
                                                          • 在祖先组件中通过provide配置向后代组件提供数据
                                                          • 在后代组件中通过inject配置来声明接收数据
                                                      1. 具体编码：
                                                          2. 【第一步】父组件中，使用provide提供数据
                                                          注意：子组件中不用编写任何东西，是不受到任何打扰的
                                                          【第二步】孙组件中使用inject配置项接受数据。

                                                      8.【pinia】

                                                      9.【slot】

                                                      1.默认插槽

                                                      就是在父组件中的子组件的双标签中写入标签，在子组件中需要的地方插入slot，子组件就会接收到父组件中传输过来的数据。
                                                      子组件的插槽相当于一个“坑”，父组件的数据相当于“土”。如果在子组件中的插槽有几对，就会显示几次数据。
                                                      默认插槽的name是name:dafault

                                                      2.具名插槽

                                                      在子组件中的插槽中给name，父组件中的name与子组件中插槽的name相同，会把数据插入到相同name的插槽中。简单来说，就是把数据插入到指定的位置
                                                      在父组件中的组件标签中写入template标签，把要插入子组件的数据放入到template标签中，给template标签name
                                                      父组件中：
                                                      子组件中：

                                                      3.作用域插槽

                                                      1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（新闻数据在News组件中，但使用数据所遍历出来的结构由App组件决定）
                                                      1. 作用于插槽也有name
                                                      1. 具体编码：
                                                          2. 父组件中：
                                                          子组件中：

                                                      其它 API

                                                      1.【shallowRef 与 shallowReactive 】

                                                      shallowRef

                                                      1. 作用：创建一个响应式数据，但只对顶层属性进行响应式处理。只能处理第一层的数据。如person.value.name,这就属于二层数据。
                                                      1. 用法：
                                                        1. 特点：只跟踪引用值的变化，不关心值内部的属性变化。

                                                        shallowReactive

                                                        1. 作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的
                                                        1. 用法：
                                                          1. 特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。
                                                          总结：
                                                          通过使用shallowRef()和shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。

                                                          2.【readonly 与 shallowReadonly】

                                                          readonly

                                                          1. 作用：用于创建一个对象的深只读副本。对数据进行保护，限制只有某人能修改等
                                                          1. 用法：
                                                            1. 特点：
                                                                • 对象的所有嵌套属性都将变为只读。
                                                                • 任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。
                                                            1. 应用场景：
                                                                • 创建不可变的状态快照。
                                                                • 保护全局状态或配置不被修改。

                                                            shallowReadonly

                                                            1. 作用：与 readonly 类似，但只作用于对象的顶层属性。
                                                            1. 用法：
                                                              1. 特点：
                                                                  • 只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。只限制第一层数据，内层数据不限制
                                                                  • 适用于只需保护对象顶层属性的场景。

                                                              3.【toRaw 与 markRaw】

                                                              toRaw

                                                              1. 作用：用于获取一个响应式对象的原始对象， toRaw 返回的对象不再是响应式的，不会触发视图更新。
                                                                  2. notion image
                                                              1. 具体编码：

                                                                markRaw

                                                                1. 作用：标记一个对象，使其永远不会变成响应式的。
                                                                    2. 例如使用mockjs时，为了防止误把mockjs变为响应式对象，可以使用 markRaw 去标记mockjs
                                                                1. 编码：

                                                                  4.【customRef】

                                                                  作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行逻辑控制。
                                                                  实现防抖效果（useSumRef.ts）：
                                                                  组件中：
                                                                  注意：customRef中最核心的就是track和trigger，track是持续跟踪，trigger是通知你完成了。

                                                                  Vue3新组件

                                                                  1.【Teleport】

                                                                  • 什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

                                                                  2.【Suspense】

                                                                  • 等待异步组件时渲染一些额外内容，让应用有更好的用户体验 - 使用步骤： - 异步引入组件 - 使用Suspense包裹组件，并配置好default 与 fallback

                                                                  3.【全局API转移到应用对象】

                                                                  • app.component - app.config - app.directive - app.mount - app.unmount - app.use
                                                                  就是将vue2中原来是Vue.xxx的改成app.xxx

                                                                  4.【其他】

                                                                  （干开发的最好去官网看看vue3中的非兼容性改变，面试问）
                                                                  • 过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from。
                                                                  • keyCode 作为 v-on 修饰符的支持。
                                                                  • v-model 指令在组件上的使用已经被重新设计，替换掉了 v-bind.sync。
                                                                  • v-if 和 v-for 在同一个元素身上使用时的优先级发生了变化。
                                                                  • 移除了$on、$off 和 $once 实例方法。
                                                                  • 移除了过滤器 filter。
                                                                  • 移除了$children 实例 propert。
                                                                  ]]>                                                                                                                                     <![CDATA[React笔记-Router]]> https://www.axin.work/article/da005316-1867-4005-97f7-79a0df30cdf3 https://www.axin.work/article/da005316-1867-4005-97f7-79a0df30cdf3 Fri, 31 May 2024 00:00:00 GMT

                                                                  Router

                                                                  详细使用示例

                                                                  注意：这里使用的时最新的 v6 版本，已完全弃用了原先的 react-router 库，较 v5 版本有很大的改动。

                                                                  一、基本使用

                                                                  1. 首先安装依赖
                                                                  1. 引入实现路由所需的组件，以及页面组件
                                                                  • path：路径
                                                                  • element：要渲染的组件
                                                                  注意：BrowserRouter组件最好放在最顶层所有组件之外，这样能确保内部组件使用 Link 做路由跳转时不出错

                                                                  二、路由跳转

                                                                  在跳转路由时，如果路径是/开头的则是绝对路由，否则为相对路由，即相对于当前 URL进行改变

                                                                  2.1 Link 组件

                                                                  Link组件只能在Router内部使用，因此使用到Link组件的组件一定要放在顶层的 Router 之内

                                                                  2.2 NavLink 组件

                                                                  • NavLink组件和Link组件的功能是一致的，区别在于可以判断其to属性是否是当前匹配到的路由
                                                                  • NavLink组件的style或className可以接收一个函数，函数接收一个含有isActive字段的对象为参数，可根据该参数调整样式

                                                                  2.3 编程式跳转

                                                                  使用useNavigate钩子函数生成navigate函数，可以通过 JS 代码完成路由跳转
                                                                  useNavigate`取代了原先版本中的`useHistory
                                                                  • 可以直接传入要跳转的目标路由（可以使用相对路径，语法和 JS 相同）
                                                                  • 传入1表示后退

                                                                  四、动态路由参数(URL参数)

                                                                  4.1 路径参数

                                                                  • 在Route组件中的path属性中定义路径参数
                                                                  • 在组件内通过useParams hook 访问路径参数

                                                                  路径匹配规则

                                                                  当URL同时匹配到含有路径参数的路径和无参数路径时，有限匹配没有参数的”具体的“（specific）路径。
                                                                  如上的两个路径，将会匹配 teams/new 。
                                                                  路径的正则匹配已被移除。

                                                                  兼容类组件

                                                                  在以前版本中，组件的props会包含一个match对象，在其中可以取到路径参数。
                                                                  但在最新的 6.x 版本中，无法从 props 获取参数。
                                                                  并且，针对类组件的 withRouter 高阶组件已被移除。因此对于类组件来说，使用参数有两种兼容方法：
                                                                  1. 将类组件改写为函数组件
                                                                  1. 自己写一个 HOC 来包裹类组件，用 useParams 获取参数后通过 props 传入原本的类组件

                                                                  4.2 search 参数

                                                                  • 查询参数不需要在路由中定义
                                                                  • 使用 useSearchParams hook 来访问和修改查询参数。其用法和 useState 类似，会返回当前对象和更改它的方法
                                                                  • 使用 setSearchParams 时，必须传入所有的查询参数，否则会覆盖已有参数

                                                                  五、嵌套路由

                                                                  5.1 路由定义

                                                                  通过嵌套的书写Route组件实现对嵌套路由的定义。
                                                                  path 开头为 / 的为绝对路径，反之为相对路径。

                                                                  5.2 在父组件中展示

                                                                  在父组件中使用Outlet来显示匹配到的子组件

                                                                  5.3 在组件中定义

                                                                  可以在任何组件中使用 Routes 组件，且组件内的Routes中，路径默认带上当前组件的路径作为前缀。
                                                                  注意：此时定义父组件的路由时，要在后面加上 /* ，否则父组件将无法渲染。

                                                                  六、默认路由

                                                                  定义： 在嵌套路由中，如果 URL 仅匹配了父级 URL，则Outlet中会显示带有index属性的子路由。可以使用在路由的任何层级
                                                                  • 当 url 为/foo时：Foo 中的 Outlet 会显示 Default 组件
                                                                  • 当 url 为/foo/bar时：Foo 中的 Outlet 会显示为 Bar 组件

                                                                  七、全匹配路由

                                                                  定义： path属性取值为*时，可以匹配任何（非空）路径，该匹配拥有最低的优先级。可以用于设置 404 页面。

                                                                  八、多组路由

                                                                  通常，一个应用中只有一个Routes组件。
                                                                  但根据实际需要也可以定义多个路由出口（如：侧边栏和主页面都要随 URL 而变化）

                                                                  九、路由重定向

                                                                  当在某个路径/a下，要重定向到路径/b时，可以通过Navigate组件进行重定向到其他路径
                                                                  等价于以前版本中的Redirect组件

                                                                  十、布局路由

                                                                  当多个路由有共同的父级组件时，可以将父组件提取为一个没有 path 和 index 属性的Route组件（Layout Route）
                                                                  这种写法等价于：

                                                                  十一、订阅和操作 history stack的原理

                                                                  浏览器会记录导航堆栈，以实现浏览器中的前进后退功能。在传统的前端项目中，URL的改变意味着向服务器重新请求数据。
                                                                  在现在的客户端路由（ client side routing ）中，可以做到编程控制URL改变后的反应。如在点击a标签的回调函数中使用 event.preventDefault() 阻止默认事件，此时URL的改变不会带来任何UI上的更新。

                                                                  11.1 History对象

                                                                  浏览器没有直接提供监听URL改变（push、pop、replace）的接口，因此 react-router 对原生的 history 对线进行了包装，提供了监听URL改变的API。
                                                                  使用 react-router 时不需操作History对象（Routes 组件会进行操作）

                                                                  11.2 Location对象

                                                                  react-router 对 window.location 进行包装后，提供了一个形式简洁的Location对象，形如：

                                                                  state

                                                                  不显示在页面上，不会引起刷新，只由开发人员操作。
                                                                  可用于记录用户的跳转详情（从哪跳到当前页面）或在跳转时携带信息。
                                                                  可以用在 Link 组件或 navigate 方法中
                                                                  在目标的组件中，可以用 useLocation 方法获取该对象
                                                                  state中的信息会进行序列化，因此如日期对象等信息会变为string

                                                                  key

                                                                  每个Location对象拥有一个唯一的key，可以据此来实现基于Location的滚动管理，或是数据缓存。
                                                                  如：将 location.key 和 URL 作为键，每次请求数据前，先查找缓存是否存在来判断是否实际发送请求，来实现客户端数据缓存。

                                                                  十二、 各类Router组件

                                                                  12.1 HashRouter和BrowserRouter的区别

                                                                  • HashRouter 只会修改URL中的哈希值部分；而 BrowserRouter 修改的是URL本身
                                                                  • HashRouter 是纯前端路由，可以通过输入URL直接访问；使用时 BrowserRouter 直接输入URL会显示404，除非配置Nginx将请求指向对应的HTML文件。初次进入 / 路径时或点击 Link 组件跳转时不会发送请求

                                                                  12.2 unstable_HistoryRouter

                                                                  使用 unstable_HistoryRouter 需要传入一个 history 库的实例，这将允许在非react作用于下操作history对象。
                                                                  由于项目使用的history和react-router中使用的history版本可能不一样，该API目前标为unstable状态

                                                                  12.3 MemoryRouter

                                                                  HashRouter 和 BrowserRouter 都是依据外部对象（history）进行导航，而 MemoryRouter 则是自己存储和管理状态堆栈，多用于测试场景。

                                                                  12.4 NativeRouter

                                                                  推荐的用于 React Native的Router组件

                                                                  12.5 StaticRouter

                                                                  在nodejs端使用，渲染react应用。

                                                                  十三、使用JS对象定义路由（路由表）

                                                                  使用 useRoutes hook，可以使用一个JS对象而不是Routes组件与Route组件来定义路由。其功能类似于react-router-config(opens new window)
                                                                  useRoutes 的返回是 React Element，或是 null。
                                                                  此功能用来管理路由表，相比v5，可能需要借助一些第三方库来实现路由config管理，现在v6版本自带

                                                                  (一) 创建路由表

                                                                  对于传入的配置对象， 其类型定义如下：
                                                                  提示
                                                                  也可以单独创建 routes 文件夹管理路由表，然后在组件内使用 useRoutes

                                                                  (二) 组件结构内使用函数返回值作为占位符

                                                                  (三) 嵌套路由

                                                                  在一级路由下面创建二级子路由
                                                                  1. 引入路由路由占位符OutLet到组件中
                                                                  1. 引入NavLink到组件中改变路径，子路由路径可以不需要加/
                                                                  注意
                                                                  不要忘记使用Outlet作为占位符

                                                                  (四) 路由懒加载

                                                                  十四、其他hooks函数

                                                                  直接在组件中调用即可
                                                                  useRouterContext
                                                                  作用：判断组件是否被路由包裹
                                                                  useNavigationType
                                                                  作用：判断路由跳转方式
                                                                  返回值：push pop replace
                                                                  pop是在浏览器中直接打开了这个路由的组件
                                                                  useOutlet
                                                                  作用：查看组件下级路由信息
                                                                  组件若未被挂载则返回null，若以被挂载，则返回该子组件信息
                                                                  useResolvePath
                                                                  作用：解析路径

                                                                  动态路由

                                                                  router/index.ts 默认路由

                                                                  redux login/action.ts

                                                                  注意带 //import! 的标识 每次导航列表更新时，再触发路由更新action handelFilterRouter 就是根据导航菜单列表 和权限列表 得出路由表的

                                                                  utils 工具函数处理

                                                                  说一说我这里为什么要映射element 成对应组件这部操作，原因是我使用了redux-persist（redux持久化。
                                                                  若是直接转换后存入本地再取出来渲染是会有问题的，所以需要先将element保存成映射路径，然后渲染前再进行一次路径映射出对应组件。
                                                                  每个后台的数据返回格式都不一样，需要自己去转换，我这里的转换仅供参考。 ps:defaulyRoutes和默认router/index.ts导出是一样的，可以做个小优化，复用起来。

                                                                  App.tsx

                                                                  路由传参

                                                                  1. params传参

                                                                  优点：刷新页面，参数不丢失
                                                                  缺点：1.只能传字符串，传值过多url会变得很长 2. 参数必须在路由上配置

                                                                  路由配置

                                                                  路由跳转与获取路由参数

                                                                  2. search传参

                                                                  优点：刷新页面，参数不丢失
                                                                  缺点：只能传字符串，传值过多url会变得很长，获取参数需要自定义hooks

                                                                  路由配置

                                                                  路由跳转与获取路由参数

                                                                  3. state传参🙌

                                                                  优点：可以传对象
                                                                  缺点： <HashRouter>刷新页面，参数丢失

                                                                  路由配置

                                                                  路由跳转与获取路由参数

                                                                  笔记
                                                                  <HashRouter> 不支持 location.key 与 location.state，<HashRouter>通过state传递参数，刷新页面后参数丢失，官方建议使用<BrowserRouter>，<BrowserRouter>页面刷新参数也不会丢失。

                                                                  Router

                                                                  详细使用示例

                                                                  注意：这里使用的时最新的 v6 版本，已完全弃用了原先的 react-router 库，较 v5 版本有很大的改动。

                                                                  一、基本使用

                                                                  1. 首先安装依赖
                                                                  1. 引入实现路由所需的组件，以及页面组件
                                                                  • path：路径
                                                                  • element：要渲染的组件
                                                                  注意：BrowserRouter组件最好放在最顶层所有组件之外，这样能确保内部组件使用 Link 做路由跳转时不出错

                                                                  二、路由跳转

                                                                  在跳转路由时，如果路径是/开头的则是绝对路由，否则为相对路由，即相对于当前 URL进行改变

                                                                  2.1 Link 组件

                                                                  Link组件只能在Router内部使用，因此使用到Link组件的组件一定要放在顶层的 Router 之内

                                                                  2.2 NavLink 组件

                                                                  • NavLink组件和Link组件的功能是一致的，区别在于可以判断其to属性是否是当前匹配到的路由
                                                                  • NavLink组件的style或className可以接收一个函数，函数接收一个含有isActive字段的对象为参数，可根据该参数调整样式

                                                                  2.3 编程式跳转

                                                                  使用useNavigate钩子函数生成navigate函数，可以通过 JS 代码完成路由跳转
                                                                  useNavigate`取代了原先版本中的`useHistory
                                                                  • 可以直接传入要跳转的目标路由（可以使用相对路径，语法和 JS 相同）
                                                                  • 传入1表示后退

                                                                  四、动态路由参数

                                                                  4.1 路径参数

                                                                  • 在Route组件中的path属性中定义路径参数
                                                                  • 在组件内通过useParams hook 访问路径参数

                                                                  路径匹配规则

                                                                  当URL同时匹配到含有路径参数的路径和无参数路径时，有限匹配没有参数的”具体的“（specific）路径。
                                                                  如上的两个路径，将会匹配 teams/new 。
                                                                  路径的正则匹配已被移除。

                                                                  兼容类组件

                                                                  在以前版本中，组件的props会包含一个match对象，在其中可以取到路径参数。
                                                                  但在最新的 6.x 版本中，无法从 props 获取参数。
                                                                  并且，针对类组件的 withRouter 高阶组件已被移除。因此对于类组件来说，使用参数有两种兼容方法：
                                                                  1. 将类组件改写为函数组件
                                                                  1. 自己写一个 HOC 来包裹类组件，用 useParams 获取参数后通过 props 传入原本的类组件

                                                                  4.2 search 参数

                                                                  • 查询参数不需要在路由中定义
                                                                  • 使用 useSearchParams hook 来访问和修改查询参数。其用法和 useState 类似，会返回当前对象和更改它的方法
                                                                  • 使用 setSearchParams 时，必须传入所有的查询参数，否则会覆盖已有参数

                                                                  五、嵌套路由

                                                                  5.1 路由定义

                                                                  通过嵌套的书写Route组件实现对嵌套路由的定义。
                                                                  path 开头为 / 的为绝对路径，反之为相对路径。

                                                                  5.2 在父组件中展示

                                                                  在父组件中使用Outlet来显示匹配到的子组件

                                                                  5.3 在组件中定义

                                                                  可以在任何组件中使用 Routes 组件，且组件内的Routes中，路径默认带上当前组件的路径作为前缀。
                                                                  注意：此时定义父组件的路由时，要在后面加上 /* ，否则父组件将无法渲染。

                                                                  六、默认路由

                                                                  定义： 在嵌套路由中，如果 URL 仅匹配了父级 URL，则Outlet中会显示带有index属性的子路由。可以使用在路由的任何层级
                                                                  • 当 url 为/foo时：Foo 中的 Outlet 会显示 Default 组件
                                                                  • 当 url 为/foo/bar时：Foo 中的 Outlet 会显示为 Bar 组件

                                                                  七、全匹配路由

                                                                  定义： path属性取值为*时，可以匹配任何（非空）路径，该匹配拥有最低的优先级。可以用于设置 404 页面。

                                                                  八、多组路由

                                                                  通常，一个应用中只有一个Routes组件。
                                                                  但根据实际需要也可以定义多个路由出口（如：侧边栏和主页面都要随 URL 而变化）

                                                                  九、路由重定向

                                                                  当在某个路径/a下，要重定向到路径/b时，可以通过Navigate组件进行重定向到其他路径
                                                                  等价于以前版本中的Redirect组件

                                                                  十、布局路由

                                                                  当多个路由有共同的父级组件时，可以将父组件提取为一个没有 path 和 index 属性的Route组件（Layout Route）
                                                                  这种写法等价于：

                                                                  十一、订阅和操作 history stack的原理

                                                                  浏览器会记录导航堆栈，以实现浏览器中的前进后退功能。在传统的前端项目中，URL的改变意味着向服务器重新请求数据。
                                                                  在现在的客户端路由（ client side routing ）中，可以做到编程控制URL改变后的反应。如在点击a标签的回调函数中使用 event.preventDefault() 阻止默认事件，此时URL的改变不会带来任何UI上的更新。

                                                                  11.1 History对象

                                                                  浏览器没有直接提供监听URL改变（push、pop、replace）的接口，因此 react-router 对原生的 history 对线进行了包装，提供了监听URL改变的API。
                                                                  使用 react-router 时不需操作History对象（Routes 组件会进行操作）

                                                                  11.2 Location对象

                                                                  react-router 对 window.location 进行包装后，提供了一个形式简洁的Location对象，形如：

                                                                  state

                                                                  不显示在页面上，不会引起刷新，只由开发人员操作。
                                                                  可用于记录用户的跳转详情（从哪跳到当前页面）或在跳转时携带信息。
                                                                  可以用在 Link 组件或 navigate 方法中
                                                                  在目标的组件中，可以用 useLocation 方法获取该对象
                                                                  state中的信息会进行序列化，因此如日期对象等信息会变为string

                                                                  key

                                                                  每个Location对象拥有一个唯一的key，可以据此来实现基于Location的滚动管理，或是数据缓存。
                                                                  如：将 location.key 和 URL 作为键，每次请求数据前，先查找缓存是否存在来判断是否实际发送请求，来实现客户端数据缓存。

                                                                  十二、 各类Router组件

                                                                  12.1 HashRouter和BrowserRouter的区别

                                                                  • HashRouter 只会修改URL中的哈希值部分；而 BrowserRouter 修改的是URL本身
                                                                  • HashRouter 是纯前端路由，可以通过输入URL直接访问；使用时 BrowserRouter 直接输入URL会显示404，除非配置Nginx将请求指向对应的HTML文件。初次进入 / 路径时或点击 Link 组件跳转时不会发送请求

                                                                  12.2 unstable_HistoryRouter

                                                                  使用 unstable_HistoryRouter 需要传入一个 history 库的实例，这将允许在非react作用于下操作history对象。
                                                                  由于项目使用的history和react-router中使用的history版本可能不一样，该API目前标为unstable状态

                                                                  12.3 MemoryRouter

                                                                  HashRouter 和 BrowserRouter 都是依据外部对象（history）进行导航，而 MemoryRouter 则是自己存储和管理状态堆栈，多用于测试场景。

                                                                  12.4 NativeRouter

                                                                  推荐的用于 React Native的Router组件

                                                                  12.5 StaticRouter

                                                                  在nodejs端使用，渲染react应用。

                                                                  十三、使用JS对象定义路由（路由表）

                                                                  使用 useRoutes hook，可以使用一个JS对象而不是Routes组件与Route组件来定义路由。其功能类似于react-router-config(opens new window)
                                                                  useRoutes 的返回是 React Element，或是 null。
                                                                  此功能用来管理路由表，相比v5，可能需要借助一些第三方库来实现路由config管理，现在v6版本自带

                                                                  (一) 创建路由表

                                                                  对于传入的配置对象， 其类型定义如下：
                                                                  提示
                                                                  也可以单独创建 routes 文件夹管理路由表，然后在组件内使用 useRoutes

                                                                  (二) 组件结构内使用函数返回值作为占位符

                                                                  (三) 嵌套路由

                                                                  在一级路由下面创建二级子路由
                                                                  1. 引入路由路由占位符OutLet到组件中
                                                                  1. 引入NavLink到组件中改变路径，子路由路径可以不需要加/
                                                                  注意
                                                                  不要忘记使用Outlet作为占位符

                                                                  (四) 路由懒加载

                                                                  十四、其他hooks函数

                                                                  直接在组件中调用即可
                                                                  useRouterContext
                                                                  作用：判断组件是否被路由包裹
                                                                  useNavigationType
                                                                  作用：判断路由跳转方式
                                                                  返回值：push pop replace
                                                                  pop是在浏览器中直接打开了这个路由的组件
                                                                  useOutlet
                                                                  作用：查看组件下级路由信息
                                                                  组件若未被挂载则返回null，若以被挂载，则返回该子组件信息
                                                                  useResolvePath
                                                                  作用：解析路径

                                                                  动态路由

                                                                  router/index.ts 默认路由

                                                                  redux login/action.ts

                                                                  注意带 //import! 的标识 每次导航列表更新时，再触发路由更新action handelFilterRouter 就是根据导航菜单列表 和权限列表 得出路由表的

                                                                  utils 工具函数处理

                                                                  说一说我这里为什么要映射element 成对应组件这部操作，原因是我使用了redux-persist（redux持久化。
                                                                  若是直接转换后存入本地再取出来渲染是会有问题的，所以需要先将element保存成映射路径，然后渲染前再进行一次路径映射出对应组件。
                                                                  每个后台的数据返回格式都不一样，需要自己去转换，我这里的转换仅供参考。 ps:defaulyRoutes和默认router/index.ts导出是一样的，可以做个小优化，复用起来。

                                                                  App.tsx

                                                                  路由传参

                                                                  1. params传参

                                                                  优点：刷新页面，参数不丢失
                                                                  缺点：1.只能传字符串，传值过多url会变得很长 2. 参数必须在路由上配置

                                                                  路由配置

                                                                  路由跳转与获取路由参数

                                                                  2. search传参

                                                                  优点：刷新页面，参数不丢失
                                                                  缺点：只能传字符串，传值过多url会变得很长，获取参数需要自定义hooks

                                                                  路由配置

                                                                  路由跳转与获取路由参数

                                                                  3. state传参🙌

                                                                  优点：可以传对象
                                                                  缺点： <HashRouter>刷新页面，参数丢失

                                                                  路由配置

                                                                  路由跳转与获取路由参数

                                                                  笔记
                                                                  <HashRouter> 不支持 location.key 与 location.state，<HashRouter>通过state传递参数，刷新页面后参数丢失，官方建议使用<BrowserRouter>，<BrowserRouter>页面刷新参数也不会丢失。
                                                                  ]]>                                                                                                                                     <![CDATA[Docker笔记]]> https://www.axin.work/article/cbb8505f-9daa-4474-b51b-6a11d96f3911 https://www.axin.work/article/cbb8505f-9daa-4474-b51b-6a11d96f3911 Fri, 31 May 2024 00:00:00 GMT
                                                                  ]]>