:::tip{title="git的实用技巧"}
这篇文章主要介绍了Git的一些实用技巧，包括高级用法的git log命令、查找特定时间段的提交记录、显示单行的commit信息、使用git show查看详细更改信息、限制commit数量、按作者过滤commit历史记录、搜索包含特定关键字的提交，以及如何使用外部工具比较Git的diff代码。
:::



# 查看提交历史git log命令的所有高级用法

## 1. 显示全部 commit 信息

```jsx
git log --graph --decorate --all --pretty=format:"%C(auto,green)%h%Creset - %C(auto,blue)%ad%Creset - %C(auto,red)%<(10)%d%Creset | %s [%C(auto,magenta)%an%Creset]" --date=format:'%Y/%m/%d %H:%M:%S' 
```

下面是 **`git log`** 命令中各个参数的详细解释，以及它们的作用：

1. **`-graph`** 参数在日志信息中绘制了 Git 仓库的版本历史关系图。
2. **`-decorate`** 参数为 Git 仓库的版本历史信息增加分支、标签的展示。
3. **`-all`** 参数在查找日志时，检查所有分支（包括远程分支）。
4. **`-pretty=format:"%C(auto,green)%h%Creset - %C(auto,blue)%ad%Creset - %C(auto,red)%<(10)%d%Creset | %s [%C(auto,magenta)%an%Creset]"`** 这个参数定制了日志的输出格式。它将输出显示为提交哈希、提交日期、分支信息、提交消息以及提交作者的信息。
    - **`%C(auto,green)`** - 输出哈希值，带有自动颜色选择器。
    - **`%Creset`** - 重置颜色为默认值。
    - **`%h`** - 缩短后的提交哈希值。
    - **`%C(auto,blue)`** - 输出提交日期，带有自动颜色选择器。
    - **`%ad`** - 提交日期格式化。
    - **`%C(auto,red)`** - 输出提交分支信息，带有自动颜色选择器。
    - **`%<(10)%d`** - 将分支信息格式化为长度为 10 的左对齐字符串。
    - **`%s`** - 提交信息摘要。
    - **`%C(auto,magenta)`** - 输出提交作者的名字，带有自动颜色选择器。
    - **`%an`** - 提交作者的名字。
5. **`-date=format:'%Y/%m/%d %H:%M:%S'`** 参数定义日期的格式为 **`%Y/%m/%d %H:%M:%S`**。

总体而言，此命令可以让您以一种可视化和易读的形式查看 Git 仓库中的提交历史和分支关系，并为它们附加详细的格式化日志和日期信息。

此命令将会显示类似以下格式的信息：

![https://image.myxuechao.com/blog/git-one.png](https://image.myxuechao.com/blog/git-one.png)

## 2. 查找今天的commit 记录

要查找今天提交的 commit 记录，可以使用 Git 的 `git log` 命令中的时间限制选项进行过滤。以下是使用 `git log` 命令过滤出今天提交的 commit 记录的步骤：

1. 运行以下命令，将显示`今天`所提交的 commit：
   
    ```
    git log --graph --decorate --all --pretty=format:"%C(auto,green)%h%Creset - %C(auto,blue)%ad%Creset - %C(auto,red)%<(10)%d%Creset | %s [%C(auto,magenta)%an%Creset]" --date=format:'%Y/%m/%d %H:%M:%S' --since="today 00:00:00" --until="today 23:59:59"
    ```
    
    此命令将会显示类似以下格式的信息：
    
    ![https://image.myxuechao.com/blog/git-tow.png](https://image.myxuechao.com/blog/git-tow.png)
    
    其中，`-date` 选项用于指定日期格式，`-since` 选项用于指定时间的起点，`-until` 用于指定时间的结束点，此处设置为一天内提交的 commit。
    
    执行该命令后，您将会看到在今天提交的 commit 记录。如果今天没有提交过任何 commit，将没有任何输出。
    

希望这个命令可以帮助您查找到今天提交的 commit 记录。

## 3. 显示单行的 commit 信息

```jsx
git log --oneline
```

## 4. 显示某个commit 的详细更改信息

```jsx
git show <commit>
```

**`git show`** 命令中的 **`--pretty`** 选项用于指定要显示的输出格式。这对于 Git 版本库有许多好处，包括：

1. 显示更易读的信息：您可以使用 **`-pretty`** 选项将 Git 显示的输出格式化成更易读的文本，这样您就可以在终端上更清晰、更易于理解地查看信息。
2. 可以根据需要查看不同的数据：默认情况下，Git 显示的是所有与提交关联的信息，包括作者、提交日期、提交信息和更改的内容等。但是，当您只想查看其中的一部分时，**`-pretty`** 选项可以帮助您快速找到所需的信息。

下面是 **`--pretty`** 选项可用的不同参数：

- **`short`**：显示简短的提交信息（无需更改）
- **`medium`**：显示相对短的提交信息
- **`full`**：显示完整的提交信息（包括更改信息）
- **`fuller`**：以非常详细的方式显示提交信息

例如，使用 **`--pretty=short`** 选项，可以以更简洁的方式显示提交信息的摘要。示例命令如下：

```jsx
git show --pretty=short <commit>
```

## 5. 限制 commit 数量

```jsx
git log -n <number>
```

## 6. 按时间范围显示 commit 历史记录

```jsx
git log --since=<date1> --until=<date2>
```

## 7. 按作者过滤 commit 历史记录

```jsx
git log --author=<author>
```

## 8. 搜索commit 包含特定关键字的提交

- 也就是你git commit -m <fix:修改bug> 里面的内容

```jsx
git log --grep=<pattern>
```

以下是使用 **`--grep=<pattern>`** 选项的示例：

```jsx
git log --grep="fix"
```

上述命令将在所有提交的注释中搜索关键字 **`bug fix`**，并输出所有包含该关键字的提交。

除了使用字符串作为模式外，如果要查找特定时间范围内的提交记录，请使用 **`--since`** 和 **`--until`** 选项结合使用，例如：，例如：

```jsx
git log --grep="fix" --since="3 days ago"
```

上述命令将搜索最近 3 天内包含关键字 **`bug fix`** 的提交记录。

# 删除所有本地所有分支：

- 只保留`master` 其他的全部删除

```jsx
git branch | grep -v "master" | xargs git branch -D
```

该命令可以批量删除本地所有分支，但不会提示确认，也会无条件地删除所有不需要的分支。但是，`master`分支不会被删除。如果您想保留某些分支，请先使用`git branch`命令找到要保留的分支，然后使用`grep`命令进行筛选。请谨慎操作并备份要删除的分支。 💡

- 要删除本地存储库中除了 `master`、`test` 和 `dev` 之外的所有分支，请使用以下命令：👇

```jsx
git branch | grep -Ev "master|test|dev" | xargs git branch -D
```

使用此命令可以批量删除 Git 本地仓库中的分支。首先，使用 `git branch` 命令列出所有分支，然后在正则表达式模式中使用 `grep` 命令过滤掉不需要删除的分支，例如 `master`、`test` 和 `dev`。接下来，将过滤后的分支名称作为参数传递给 `xargs` 命令。最后，`xargs` 命令将这些分支名称作为参数传递给 `git branch -D` 命令，以便一次性地删除所有过滤后的分支。 🔍

# 比较 Git 的 diff 代码

🛠️ 工具链接：[BeyondCompare](https://www.scootersoftware.com/) 和 [SourceTree](https://www.sourcetreeapp.com/) 

👉 使用外部工具 BeyondCompare 比较 Git 的 diff 代码，可以方便地查看文件的更改情况。

👉 如果您使用 Mac 平台，可以通过以下步骤将 BeyondCompare 配置为 SourceTree 的外部差异工具：

- **MAC的SourceTree外部差异对比使用[BeyondCompare](https://www.scootersoftware.com/)**

✅ 打开 BeyondCompare，打开主菜单，选中 `安装命令行工具` 🚀

![https://image.myxuechao.com/blog/git-three.png](https://image.myxuechao.com/blog/git-three.png)

✅ 在使用 BeyondCompare 外部差异工具之前，需要在命令行中建立连接。（这一步可做可不做） 🔌

在使用 "BeyondCompare" 外部差异工具之前，需要在命令行中建立连接。👇

```jsx
ln /Applications/Beyond\ Compare.app/Contents/MacOS/bcomp /usr/local/bin/
```

✅ 打开 SourceTree，打开主菜单，选中 diff 选项卡，配置：

- 可视对比工具：自定义…
- 比较命令：/usr/local/bin/bcomp
- 参数：`$LOCAL $REMOTE`
- 合并工具：自定义…
- 合并命令：/usr/local/bin/bcomp
- 参数：`$LOCAL $REMOTE $BASE $MERGED`

![https://image.myxuechao.com/blog/git-fore.png](https://image.myxuechao.com/blog/git-fore.png)

😎 然后您就可以在 SourceTree 中愉快地查看 Git 的 diff 代码了！

✅打开sourcetree，选中origin/release/v1.1.8，右键选择与当前对比分支对比（dev-UnifiedFeeItemDataSource）

![https://image.myxuechao.com/blog/git-five.png](https://image.myxuechao.com/blog/git-five.png)

在右下方出现：

![https://image.myxuechao.com/blog/git-six.png](https://image.myxuechao.com/blog/git-six.png)

为了比较外部的差异，`Sourcetree`会自动加载 `Beyond Compare` 并进行文件的比较：

![https://image.myxuechao.com/blog/git-seven.png](https://image.myxuechao.com/blog/git-seven.png)

左侧为当前分支 `dev-UnifiedFeeItemDataSource`，右侧为对比分支 `origin/release/v1.1.8`。

Git的实用技巧

# React入门学习（二）面向组件编程

:::tip{title="react"}
介绍React的入门讲解（二）
:::

> 大家好，我是 `小超` 同学。最近我正在学习 `React`、阅读 `JS` 文档，并整理 `Node` 的笔记。对于 `React`，这是关于 React 的**第二篇**文章，也是我学习的第三个框架，内容如有错误，欢迎大家指正
> 

> 祝愿你生活明朗，万物可爱！🌞🌻
> 

## 一、组件的使用

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

> 注意：
> 
> 1. 组件名必须是首字母大写
> 2. 虚拟DOM元素只能有一个根元素
> 3. 虚拟DOM元素必须有结束标签 `< />`

**渲染类组件标签的基本流程**

1. React 内部会创建组件实例对象
2. 调用`render()`得到虚拟 DOM ,并解析为真实 DOM
3. 插入到指定的页面元素内部

### 1. 函数式组件

```jsx
//1.先创建函数，函数可以有参数，也可以没有，但是必须要有返回值 返回一个虚拟DOM
    function Welcome (props) {
      return <h1>{props.name},我是用函数定义的组件（适用于【简单组件】 的定义）</h1>
    }
    // 2. 渲染處拟DOM到页面
    ReactDOM.render(<Welcome name="hello"></Welcome>, document.getElementById("example"));
```

上面的代码经历了以下几步:

1. React解析组件标签，找到了Welcome组件
2. 我们调用 `ReactDOM.render()` 函数，并传入 `<Welcome name="hello" />` 作为参数。
3. React 调用 `Welcome` 组件，并将 `{name: 'hello'}` 作为 props 传入。
4. `Welcome` 组件将 **`hello,我是用函数定义的组件（适用于【简单组件】 的定义）`** 元素作为返回值。
5. 将返回的虚拟DOM转为真实DOM，随后呈现在页面中

**2. 类式组件**  

```jsx
// 1. 创建组件类 —— 本质就是创建一个类
    class Welcome extends React.Component {
      //render是放在哪里的？类(Welcome)的原型对象上，供实例使用。
      // render中的this是谁？ render中的this是（Welcome）组件实例对象
      render () {
        console.log('render中的this: ', this);
        return <h1>我是用类定义的组件（适用于【复尔组件】的定义） </h1>
      }
    }
// 2. 渲染處拟DOM到页面
    ReactDOM.render(<Welcome name="hello" />, document.getElementById("example"));
```

执行了ReactDoM.render(<Welcome/>.……..….之后，发生了什么？

上面的代码经历了以下几步:

1. React解析组件标签，找到了Welcome组件
2. 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
3. 将render返回的虚拟DOM转为真实DOM，随后呈现在页面中

**在Class类式组件中遇到的问题**

1. 组件中的 render 方法中的 this 为组件实例对象
2. 组件自定义方法中由于开启了严格模式，this 指向 `undefined` 如何解决
    1. 通过 bind 改变 this 指向
    2. 推荐采用箭头函数，箭头函数的 `this` 指向
3. state 数据不能直接修改或者更新Ï

## 二、组件实例三大属性

### 1. state

> React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
> 
> 
> React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
> 

简单的说就是组件的状态，也就是该组件所存储的数据

**类式组件中的使用**

![https://image.myxuechao.com/blog/React/react-2.png](https://image.myxuechao.com/blog/React/react-2.png)

使用的时候通过`this.state`调用`state`里的值

在类式组件中定义`state`

- 可以在构造器中初始化`state`
- 也可以在类中添加属性`state`来初始化

**修改 state**

在**类式组件**的函数中，直接修改`state`值

```jsx
const { isHot } = this.state
isHot = !isHot
```

> 页面的渲染靠的是render函数
> 

这时候会发现页面内容不会改变，原因是 React 中不建议 `state`不允许直接修改，而是通过类的原型对象上的方法 `setState()`

**setState()**

```jsx
this.setState(partialState, [callback]);
```

- `partialState`: 需要更新的状态的部分对象
- `callback`: 更新完状态后的回调函数

**正确写法**：有两种写法：

- 写法1

```jsx
this.setState({
    isHot:!isHot
})
```

- 写法2：

```
// 传入一个函数，返回x需要修改成的对象，参数为当前的 state
this.setState(state => ({count: state.count+1});
```

`setState`是一种合并操作，不是替换操作

- 在执行 `setState`操作后，React 会自动调用一次 `render()`
- `render()` 的执行次数是 1+n (1 为初始化时的自动调用，n 为状态更新的次数)

### 2. props

与`state`不同，`state`是组件自身的状态，而`props`则是外部传入的数据

**类式组件中使用**

![https://image.myxuechao.com/blog/React/react-3.png](https://image.myxuechao.com/blog/React/react-3.png)

在使用的时候可以通过 `this.props`来获取值 类式组件的 `props`:

1. 通过在组件标签上传递值，在组件中就可以获取到所传递的值
2. 在构造器里的`props`参数里可以获取Ï到 `props`
3. 可以设置  `defaultProps` 属性来操作 `props`的默认值，都是直接添加在类式组件的**原型对象**上的（所以需要添加 `static`）
4. 同时可以通过`...`运算符来简化

![https://image.myxuechao.com/blog/React/react-4.png](https://image.myxuechao.com/blog/React/react-4.png)

**函数式组件中的使用**

> 函数在使用props的时候，是作为参数进行使用的(props)
> 

![https://image.myxuechao.com/blog/React/react-5.png](https://image.myxuechao.com/blog/React/react-5.png)

函数组件的 `props`定义:

1. 在组件标签中传递 `props`的值
2. 组件函数的参数为 `props`
3. 对 `props`默认值同样设置在原型对象上

### 3. refs

Refs 提供了一种方式，允许我们访问 DOM 节点或在 `render` 方法中创建的 React 元素。

> 在我们正常的操作节点时，需要采用DOM API 来查找元素，但是这样违背了 React 的理念，因此有了refs
> 

有三种操作`refs`的方法，分别为：

- 字符串形式
- 回调形式
- `createRef`形式

**字符串形式**`refs`

![https://image.myxuechao.com/blog/React/react-6.png](https://image.myxuechao.com/blog/React/react-6.png)

虽然这个方法废弃了，但是还能用，还很好用

**回调形式的**`refs`

组件实例的`ref`属性传递一个回调函数`c => this.input1 = c` （箭头函数简写），这样会在实例的属性中存储对DOM节点的引用，使用时可通过`this.input1`来使用

**使用方法**

```jsx
<input ref={cur => this.input1 = cur } type="text" placeholder="点击按钮提示数据"/>
```

![https://image.myxuechao.com/blog/React/react-7.png](https://image.myxuechao.com/blog/React/react-7.png)

**我的理解**

`cur`会接收到当前节点作为参数，`ref`的值为函数的返回值，也就是`this.input1 = cur`，因此是给实例下的`input1`赋值

**createRef 形式**（推荐写法）

React 给我们提供了一个相应的API，它会自动的将该 DOM 元素放入实例对象中

我们先给DOM元素添加ref属性

```jsx
<input ref={this.MyRef} type="text" placeholder="点击弹出" />
<input ref={this.MyRef1} type="text" placeholder="点击弹出" />
```

通过API，创建React的容器，会将DOM元素赋值给实例对象的名称为容器的属性的`current`

```jsx
MyRef = React.createRef();
MyRef1 = React.createRef();
```

注意：专人专用，一个节点创建一个容器

```jsx
// 调用函数
showDate = () => {
        //创建之后，将自身节点，传入current中
        alert(this.myRef.current.value)
      }
```

![https://image.myxuechao.com/blog/React/react-8.png](https://image.myxuechao.com/blog/React/react-8.png)

注意：我们不要过度的使用 ref，如果发生时间的元素刚好是需要操作的元素，就可以使用事件对象去替代。过度使用有什么问题我也不清楚，可能有 bug 吧

### 4. 事件处理

1. React 使用的是自定义事件，而不是原生的 DOM 事件
2. React 的事件是通过事件委托方式处理的（为了更加的高效）
3. 可以通过事件的 `event.target`获取发生的 DOM 元素对象，可以尽量减少 `refs`的使用

![https://image.myxuechao.com/blog/React/react-9.png](https://image.myxuechao.com/blog/React/react-9.png)

> 这里都使用了`ref` 如果有很多就不合适了
> 

### 5.包含表单元素的组件分为非受控租价与受控组件

- **受控组件**：表单组件的输入组件随着输入并将内容存储到状态中（随时更新）
- **非受控组件**：表单组件的输入组件的内容在有需求的时候才存储到状态中（即用即取）

> 实现一个小例子：一个表单用户输入框、一个密码输入框、一个登录的按钮然后输入完值后点击登录就可以拿到两个输入框的值
> 

**非受控组件**

![https://image.myxuechao.com/blog/React/react-10.png](https://image.myxuechao.com/blog/React/react-10.png)

> 这里使用的就是非受控组件，因为有两个输入框`用户名`跟`密码` 都是在最后点击登录调用`handleSubmit` 才用他们输入的数据所以就是非受控组件;使用的是`ref`绑定获取值最后点登录按钮调用函数获取它们两个输入框的值。
> 

**受控组件**

![https://image.myxuechao.com/blog/React/react-11.png](https://image.myxuechao.com/blog/React/react-11.png)

> 这里使用的是受控组件，因为有两个输入框，分别是`用户名`和`密码`。它们在各自输入完后调用`handleChange`保存自己的状态到`state`，最后登录时调用`handleChange`，然后从`state`中获取两个输入框的数据，所以这就是受控组件。
> 

### 高阶函数函数柯里化

> 上面的例子中最后点击登录调用`handleChange` 的函数柯里化写法 **`handleChange`**函数的第一个参数是一个字符串，而第二个参数是由React事件系统自动传递的事件对象，其中包含了事件触发时的相关信息
> 

![https://image.myxuechao.com/blog/React/react-12.png](https://image.myxuechao.com/blog/React/react-12.png)

> 在这段代码中，**`onChange`**属性的值是一个箭头函数，它接收一个**`event`**参数，然后调用**`handleChange`**函数并传递了两个参数：一个表示需要更新的**`state`**属性名，一个是**`event`**事件对象。这样，**`handleChange`**函数就可以在内部使用**`event`**对象来获取用户输入的文本，从而实现了双向数据绑定。
> 

### 不用高阶函数函数柯里化实现

![https://image.myxuechao.com/blog/React/react-13.png](https://image.myxuechao.com/blog/React/react-13.png)

> 对比上面的写法，这种写法的一个好处是可以直接在**`onChange`**属性中处理事件，不需要在组件定义外部额外声明一个函数。另外，这种写法可以看作是显示地将**`event`**参数传递给**`handleChange`**函数，让代码更加的清晰明了，同时也可以更容易地进行单元测试和调试。
>

React入门学习（二）面向组件编程

# React入门学习（一）基础知识、jsx语法

:::tip{title="react"}
介绍React的入门讲解（一）
:::

## 基础知识、jsx语法，以及个人学习体会

> 大家好，我是 `小超` 同学。最近我正在学习 `React`、阅读 `JS` 文档，并整理 `Node` 的笔记。对于 `React`，这是我学习的第三个框架，我觉得相对于 `Vue`，`React` 可能更加注重组件化思想的实践。学习 `React` 的过程中，我深刻体会到了组件化思想的重要性，也对 `React` 的生命周期有了更深刻的理解。如果有任何错误，请务必指出并交流。
> 

> 祝愿你生活明朗，万物可爱！🌞🌻
>

这是 React 的[官方网站](https://zh-hans.reactjs.org/)，很多问题都可以在官方文档中找到解决方案，因此学会查阅文档非常重要。

## 一、React 简介

### 1. 关于 React

整几个面试题来认识一下~~

> 什么是 React ？
> 

**React** 是一个用于构建用户界面的 JavaScript 库。

- 是一个将数据渲染为 HTML 视图的开源 JS 库
- 它遵循基于组件的方法，有助于构建可重用的 UI 组件
- 它用于开发复杂的交互式的 web 和移动 UI

> React 有什么特点？
> 
1. 使用虚拟 DOM 而不是真正的 DOM
2. 它可以用服务器渲染
3. 它遵循单向数据流或数据绑定
4. 高效
5. 声明式编码，组件化编码 

> React 的一些主要优点？
> 
1. 它提高了应用的性能
2. 可以方便在客户端和服务器端使用
3. 由于使用 JSX，代码的可读性更好
4. 使用 React，编写 UI 测试用例变得非常容易

## 2. Hello，React 🎉

首先需要引入几个 React 包：   

- React 核心库
- 操作 DOM 的 React 扩展库
- 将 JSX 转为 JS 的 Babel 库

![https://image.myxuechao.com/blog/React/react-1.png](https://image.myxuechao.com/blog/React/react-1.png)

我直接用官方的库而没有下载到本地：

```jsx
  
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
```

```jsx
//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1>/*此处一定不要写引号，因为不是字符串*/
//2.渲染處拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("example"))
```

### 3. 虚拟 DOM 和真实 DOM 的两种创建方法

### 3.1 JS 创建虚拟 DOM

```jsx
 //1.创建虚拟DOM,创建嵌套格式的dom
const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("example"))
```

### 3.2 JSX 创建虚拟 DOM

```jsx
//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
    	<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("example"))
```

> js 的写法并不是常用的，常用jsx来写，毕竟JSX更符合书写的习惯
> 

## 二、jsx 语法

1. 定义虚拟DOM，不能使用`“”`引号
2. 标签中混入JS表达式的时候使用`{}`

```jsx
id = {myIdÏ}
```

1. 样式的类名指定不能使用class，使用`className`
2. 内联样式应该在 `style` 属性中使用 `{{key: value}}` 的形式来书写。

```jsx
style={{color:'skyblue',fontSize:'24px'}}
```

1. 不能有多个根标签，只能有一个根标签
2. 标签必须闭合，自闭合也行
3. 如果小写字母开头，就将标签转化为 html 同名元素，如果 html 中无该标签对应的元素，就报错；如果是大写字母开头，react 就去渲染对应的组件，如果没有就报错

> 记几个
> 

### 1. 注释

写在花括号里

```jsx
ReactDOM.render(
    <div>
    <h1>学超</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('example')
);
```

### 2. 数组

JSX 允许在模板中插入数组，数组自动展开全部成员

```jsx
var arr = [
  <h1>小丞</h1>,Ï
  <h2>同学</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);
```

### JSX 小练习

根据动态数据生成 `li`

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello_react</title>
</head>
<body>
  
  <div id="example"></div>
  
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    /*
      注意区分：【js语句(代码)】与【js表达式】
        1. js表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。
                    下面这些都是表达式：
                      (1）a
                      (2) arr.map()
                      (3) function fn(){}
        2. js语句(代码)：代码中会产生一个结果，但不一定会放在需要值的地方。
                     下面这些都是语句（代码）：
                      (1) if(){}
                      (2) for(){}
                      (3) switch(){}
                       
    */
    // 模拟一些数据
    const VDMData = [
      { name: 'Angular', id: 1 },
      { name: 'React', id: 2 },
      { name: 'Vue', id: 3 }
    ]
    //1.创建虚拟DOM
    const VDOM = (
      <div>
        <h1>前端JS框架列表</h1>
        <ul>
          {
            VDMData.map(item => {
              return <li key={item.id}>{item.name}</li>
            })
          }
        </ul>
      </div>
    )
    // 2. 渲染處拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById("example"))

  </script>
</body>
</html>
```

React入门学习（一）基础知识、jsx语法

:::tip{title="换一换"}
实现百度换一换和自定义分页的功能,下面包含了完整的代码演示教程
:::

在本教程中，我们将使用 Vue 3 和 Composition API 实现一个“换一换”和自定义分页的功能。用户可以通过点击按钮来显示一组新的数据。我们将使用 **`<transition>`** 元素和动画效果，让用户在获取新数据时能够看到转圈动画，增强用户体验。🚀

![https://image.myxuechao.com/blog/refresh-gif.gif](https://image.myxuechao.com/blog/refresh-gif.gif)

### 目标特性 🎯

- 点击按钮“换一换”时，每次都会展示一组新数据。
- 点击“换一换”按钮时，会触发转圈动画效果。💫
- 鼠标悬停在“换一换”按钮上时，按钮图标颜色会变化，用户能直接看到按钮的交互状态。👀

创建组件 🛠️

在 **`src/views`** 目录下，创建一个个组件对应的 **`.vue`** 文件。📁

## 步骤一：实现自定义分页 📖

我们可以使用以下步骤来实现自定义分页的功能：

1. 在状态对象中添加一个 **`page`** 属性，表示当前页码。📄
2. 在 **`getNewList`** 函数中，根据页码和每页显示数量，将原数组分割并计算新数组。🔄
3. 在页面渲染时，根据新数组中的数据渲染页面。🎨
4. 在按钮的点击事件中，根据当前页码和总页数，计算出下一页的页码，并调用 **`getNewList`** 函数获取新的数据。👇

**示例代码：**

## HTML 🌐

首先，我们需要创建自定义分页的 HTML 结构。对于本文中实现自定义分页功能的 Vue 3 项目，我们需要展示以下内容：

```html
<template>
  <div class="container">
    <div class="change" @click="changePage">
      <div class="change-btn">换一换</div>
    </div>
    <div class="list">
      <div class="item" v-for="item in newArr" :key="item.id">
        <span class="title-content-index"> {{ item.id }}</span>
        <div class="title-content-title">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>
```

## JS

在自定义分页组件中，我们需要实现以下功能：

1. 获取原始数据。
2. 指定分页长度和当前页码，并计算出总页数。
3. 根据当前页数和分页数将数据分割。
4. 定义响应式状态和方法，以供切换分页中使用。

下面是 JavaScript 代码的示例：👇

```jsx
<script>
import { reactive, toRefs, onMounted, computed } from "vue";
export default {
  setup() {
    //  计算总页数
    const totalPage = computed(() => Math.ceil(status.arr.length / PAGE_SIZE));
    // 定义响应式状态和方法
    const status = reactive({
      arr: [
        { id: 1, value: "今日头条" },
        { id: 2, value: "百度搜索" },
        { id: 3, value: "知乎" },
        { id: 4, value: "淘宝" },
        { id: 5, value: "京东" },
        { id: 6, value: "微信" },
        { id: 7, value: "抖音" },
        { id: 8, value: "快手" },
        { id: 9, value: "网易云音乐" },
        { id: 10, value: "哔哩哔哩" },
        { id: 11, value: "饿了么" },
        { id: 12, value: "美团外卖" },
        { id: 13, value: "斗地主" },
        { id: 14, value: "QQ音乐" },
      ],
      newArr: [],
      page: 1, // 添加分页属性
      totalPage,
    });
    const PAGE_SIZE = 6; // 每页显示的数量
    const generatePages = (page = 1) => {
      // 根据分页属性，切分数组
      let startIndex = (page - 1) * PAGE_SIZE; // 计算起始索引
      let endIndex = page * PAGE_SIZE; // 计算结束索引
      status.page = page; // 更新分页属性
      let currentArr = status.arr.slice(startIndex, endIndex); // 切分原始数组
      status.newArr = currentArr; // 更新新数组
    };
    onMounted(() => {
      //  初始化时生成第一页
      generatePages();
    });
    const changePage = () => {
      if (status.page + 1 > status.totalPage) {
        generatePages(1);
      } else {
        generatePages(status.page + 1);
      }
      status.isRotate = true;
    };
    return {
      ...toRefs(status), // 使用 toRefs 将状态对象转为响应式对象
      changePage,
    };
  },
};
</script>
```

这段代码中的主要注意点如下：

1. 使用了 Vue 3 的 Composition API，通过 **`setup`** 函数返回响应式状态和方法。👍
2. 使用了 **`reactive`** 包装原始数据，并使用 **`toRefs`** 将响应式状态转为普通对象，以便在模板中访问。🔍
3. 使用 **`computed`** 计算总页数，将其作为状态存储，并在模板中展示。🔢
4. 定义 **`PAGE_SIZE`** 常量表示每页显示的数量。📏
5. 定义 **`generatePages`** 函数，根据分页属性切分数组，并将切分后的新数组存储到状态对象中。在第一次渲染组件时生成第一页数据。🔨
6. 在 **`changePage`** 函数中根据当前页数和总页数更新分页数据，并使用 **`isRotate`** 状态来展示动画效果。如果当前页是最后一页，则下一页为第一页，否则下一页为当前页加 1。💫

## CSS

```jsx
<style lang="scss" scoped>
.container {
  width: 420px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 420px;
}

.item {
  width: 200px;
  margin-bottom: 10px;
  display: flex;
  text-align: left;
}
.item .title-content-index {
  margin-right: 4px;
  width: 22px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 18px;
  position: relative;
  top: 1px;
}
.item .title-content-title {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 18px;
  color: #626675;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 160px;
}
.change {
  height: 18px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.change-btn {
  font-size: 14px;
  color: #626675;
  margin-left: 2px;
  font-weight: bold;
  cursor: pointer;
}
.change:hover .change-btn {
  color: #315efb;
}
</style>
```

## 步骤二：实现换一换功能🔄

## HTML 🌐

首先，我们需要创建换一换的 HTML 结构。对于本文中实现自定义分页功能的 Vue 3 项目，我们需要展示以下内容：

- 一个按钮，用于触发换一换操作。
- 一个包含旋转动画的图标，用于展示换一换操作的进行状态。💫

下面是 HTML 结构的示例代码：👇

```html
<template>
  <div class="container">
    <div
      class="change"
      @mouseover="isHovered = true"
      @mouseout="isHovered = false"
      @click="changePage"
    >
      <img
        :src="
          isHovered
            ? 'https://image.myxuechao.com/blog/refresh-icon-color.png'
            : 'https://image.myxuechao.com/blog/refresh-icon.png'
        "
        class="refresh-icon"
        :class="{ 'is-rotating': isRotate }"
        alt=""
        @transitionend="onRotateEnd"
      />
      <div class="change-btn">换一换</div>
    </div>
    <div class="list">
      <div class="item" v-for="item in newArr" :key="item.id">
        <span class="title-content-index"> {{ item.id }}</span>
        <div class="title-content-title">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>
```

## JS

在自定义分页组件中，我们需要实现以下功能：

1. 已经在“步骤一”中实现了分页。
2. 基于当前分页的数据进行数据分割和重新排序。
3. 点击“换一换”按钮时，会触发旋转动画效果。
4. 鼠标悬停在“换一换”按钮上时，按钮图标的颜色会变化，以便用户直接看到交互状态。

换一换的实现只需要修改 **`getNewList`** 这个函数，下面是 JavaScript 代码的示例：👇

**换一换的实现只需要修改 `getNewList` 这个函数就可以了。下面是 JavaScript 代码的示例：👇**

```jsx
const getNewList = (page = 1) => {
      // 根据分页属性，切分数组
      let startIndex = (page - 1) * PAGE_SIZE; // 计算起始索引
      let endIndex = page * PAGE_SIZE; // 计算结束索引
      status.page = page; // 更新分页属性
      let currentArr = status.arr.slice(startIndex, endIndex); // 切分原始数组
      let midIndex = Math.ceil(currentArr.length / 2); // 获取数组 currentArr 的中间元素下标，向上取整
      let newArr = [];

      // 组合新的数组
      for (let i = 0; i < midIndex; i++) {
        if (currentArr[i]) {
          // 通过 if 语句过滤掉 undefined 和 null
          newArr.push(currentArr[i]); // 将位于中间下标左侧的元素添加到新数组中
        }
        if (currentArr[midIndex + i]) {
          // 组合右侧的元素
          newArr.push(currentArr[midIndex + i]);
        }
      }
      status.newArr = newArr; // 更新新数组
    };
```

**点击“换一换”按钮时，会触发旋转动画效果。**💫

```jsx
<script>
import { reactive, toRefs, onMounted,computed} from "vue";
export default {
  setup() {
		//  计算总页数
    const totalPage = computed(() => Math.ceil(status.arr.length / PAGE_SIZE));
    const status = reactive({
      arr: [
        /*...*/
      ],
      newArr: [],
      page: 1, // 添加分页属性
      isHovered: false,
      isRotate: false,
			totalPage,
    });

    const PAGE_SIZE = 6; // 每页显示的数量

    const getNewList = (page = 1) => {
      /*省略代码。上面有*/
    };

    onMounted(() => {
      getNewList();
    });
    const changePage = () => {
      if (status.page + 1 > status.totalPage) {
        getNewList(1);
      } else {
        getNewList(status.page + 1);
      }
      status.isRotate = true;
    };
    const onRotateEnd = () => {
      console.log("动画结束！");
      status.isRotate = false;
    };
    const handleMouseover = () => {
      // 鼠标滑过事件触发时的处理
      console.log("Mouse over");
      status.isHovered = true;
    };
    const handleMouseout = () => {
      // 鼠标离开事件触发时的处理
      console.log("Mouse out");
      status.isHovered = false;
    };
    return {
      ...toRefs(status), // 使用 toRefs 将状态对象转为响应式对象
      changePage,
      handleMouseover,
      handleMouseout,
      onRotateEnd,
    };
  },
};
</script>
```

## CSS

```css
<style lang="scss" scoped>
.refresh-icon {
  width: 22px;
  height: 22px;
}
.is-rotating {
  transition: transform 0.3s;
  transform: rotate(360deg);
}
</style>
```

这段代码中的主要注意点如下：

1. **`getNewList`** 函数接收一个 **`page`** 参数，表示当前的分页属性，如果没有传入，则默认为 1。
2. 计算起始索引 **`startIndex`** 和结束索引 **`endIndex`**，用来切割原始数组。
3. 将计算好的 **`page`** 值更新到状态对象 **`status`** 中的 **`page`** 属性中。
4. 使用 **`slice`** 方法对原始数组进行切割，得到 **`currentArr`** 数组。
5. 计算 **`currentArr`** 数组的中间元素下标 **`midIndex`**，并向上取整。
6. 遍历 **`currentArr`** 数组的前面一半元素，将存在的元素依次添加到 **`newArr`** 数组的末尾。
7. 遍历 **`currentArr`** 数组的后面一半元素，将存在的元素依次添加到 **`newArr`** 数组的末尾。
8. 将组合好的新数组 **`newArr`** 更新到状态对象 **`status`** 中的 **`newArr`** 属性中。
9. 使用了 Vue 3 的 Composition API，在 **`setup`** 函数中返回响应式状态和方法。🚀
10. 定义了一个 **`totalPage`** 响应式状态，用于计算分页总数，随着 **`status.arr`** 数组长度的变化而实时更新。🔢
11. 所有状态对象均采用了 **`reactive`** 函数进行响应式处理，并使用 **`toRefs`** 方法将响应式状态转换为标准对象，方便在模板中直接引用。👀
12. 在触发分页更新时，根据分页属性和每页显示的数量，对原始数组进行切割和组合，得到新的数组并更新状态。🤖
13. 定义了一个 **`handleMouseover`** 响应式方法，在用户鼠标滑过“换一换”按钮时，将 **`isHovered`** 状态设置为 **`true`**，从而实现鼠标滑过效果。👆
14. 定义了一个 **`handleMouseout`** 响应式方法，在用户鼠标离开“换一换”按钮时，将 **`isHovered`** 状态设置为 **`false`**，从而实现鼠标离开效果。👋
15. 定义了一个 **`onRotateEnd`** 响应式方法，在“换一换”按钮转圈动画结束时触发，输出一条 console 日志，并将 **`isRotate`** 状态设置为 **`false`**，从而实现动画结束后的处理。💫

## 完整代码示例

## HTML部分

```jsx
<template>
  <div class="container">
    <div
      class="change"
      @mouseover="isHovered = true"
      @mouseout="isHovered = false"
      @click="changePage"
    >
      <img
        :src="
          isHovered
            ? 'https://image.myxuechao.com/blog/refresh-icon-color.png'
            : 'https://image.myxuechao.com/blog/refresh-icon.png'
        "
        class="refresh-icon"
        :class="{ 'is-rotating': isRotate }"
        alt=""
        @transitionend="onRotateEnd"
      />
      <div class="change-btn">换一换</div>
    </div>
    <div class="list">
      <div class="item" v-for="item in newArr" :key="item.id">
        <span class="title-content-index"> {{ item.id }}</span>
        <div class="title-content-title">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>
```

## 以下是 JavaScript 代码示例：

```jsx
<script>
import { reactive, toRefs, onMounted, computed } from "vue";
export default {
  setup() {
    //  计算总页数
    const totalPage = computed(() => Math.ceil(status.arr.length / PAGE_SIZE));
    const status = reactive({
      arr: [
        { id: 1, value: "今日头条" },
        { id: 2, value: "百度搜索" },
        { id: 3, value: "知乎" },
        { id: 4, value: "淘宝" },
        { id: 5, value: "京东" },
        { id: 6, value: "微信" },
        { id: 7, value: "抖音" },
        { id: 8, value: "快手" },
        { id: 9, value: "网易云音乐" },
        { id: 10, value: "哔哩哔哩" },
        { id: 11, value: "饿了么" },
        { id: 12, value: "美团外卖" },
        { id: 13, value: "斗地主" },
        { id: 14, value: "QQ音乐" },
      ],
      newArr: [],
      page: 1, // 添加分页属性
      isHovered: false,
      isRotate: false,
      totalPage,
    });

    const PAGE_SIZE = 6; // 每页显示的数量

    const getNewList = (page = 1) => {
      // 根据分页属性，切分数组
      let startIndex = (page - 1) * PAGE_SIZE; // 计算起始索引
      let endIndex = page * PAGE_SIZE; // 计算结束索引
      status.page = page; // 更新分页属性
      let currentArr = status.arr.slice(startIndex, endIndex); // 切分原始数组
      let midIndex = Math.ceil(currentArr.length / 2); // 获取数组 currentArr 的中间元素下标，向上取整
      let newArr = [];

      // 组合新的数组
      for (let i = 0; i < midIndex; i++) {
        if (currentArr[i]) {
          // 通过 if 语句过滤掉 undefined 和 null
          newArr.push(currentArr[i]); // 将位于中间下标左侧的元素添加到新数组中
        }
        if (currentArr[midIndex + i]) {
          // 组合右侧的元素
          newArr.push(currentArr[midIndex + i]);
        }
      }

      status.newArr = newArr; // 更新新数组
    };

    onMounted(() => {
      getNewList();
    });
    const changePage = () => {
      if (status.page + 1 > status.totalPage) {
        getNewList(1);
      } else {
        getNewList(status.page + 1);
      }
      status.isRotate = true;
    };
    const onRotateEnd = () => {
      console.log("动画结束！");
      status.isRotate = false;
    };
    const handleMouseover = () => {
      // 鼠标滑过事件触发时的处理
      console.log("Mouse over");
      status.isHovered = true;
    };
    const handleMouseout = () => {
      // 鼠标离开事件触发时的处理
      console.log("Mouse out");
      status.isHovered = false;
    };
    return {
      ...toRefs(status), // 使用 toRefs 将状态对象转为响应式对象
      changePage,
      handleMouseover,
      handleMouseout,
      onRotateEnd,
    };
  },
};
</script>
```

## CSS部分

```jsx
<style lang="scss" scoped>
.container {
  width: 420px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 420px;
}

.item {
  width: 200px;
  margin-bottom: 10px;
  display: flex;
  text-align: left;
}
.item .title-content-index {
  margin-right: 4px;
  width: 22px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 18px;
  position: relative;
  top: 1px;
}
.item .title-content-title {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 18px;
  color: #626675;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 160px;
}
.change {
  height: 18px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.change-btn {
  font-size: 14px;
  color: #626675;
  margin-left: 2px;
  font-weight: bold;
  cursor: pointer;
}
.change:hover .change-btn {
  color: #315efb;
}

.refresh-icon {
  width: 22px;
  height: 22px;
}
.is-rotating {
  transition: transform 0.3s;
  transform: rotate(360deg);
}
</style>
```