前端

## 前言

在 Redux 中，中间件是对 **`dispatch`** 函数进行扩展的一种方式，用来处理 **`action`** 和 **`store`** 之间的通信和交互。中间件的作用可以分为两类：一类是应用领域逻辑相关的中间件，一类是通用的、与应用领域逻辑无关的中间件。

Redux 需要中间件的原因是：通过中间件可以实现 action 和 store 之间的断点，方便地对 action 进行拦截和处理，在 action 到达 reducer 之前，执行某些额外操作（如日志记录、异步请求、错误处理等），或是对 action 进行修改。同时，由于 Redux 的单向数据流特性，中间件可以很好地控制整个应用程序中的数据流，使代码具有更加可读性和可维护性。

## 常用中间件

### 一、React thunk

**上一篇分享介绍了Redux的工作流程，其中修改store中数据是通过store.disptch方法传递action信号来达到目的，这是同步修改state的方式。可是真正项目中经常会通过Ajax请求到数据再修改store。**

```javascript
export const doSomeing = (text) => {
    return (dispatch) => {
        dispatch({
            type: 'LOAD_MORE_WORK',
            msg: 'pending',
        });
        fetch('<http://levenx.com>').then(resp => {
            // console.log('[resp]', resp.status);
            if (resp.status === 200) return resp.json();
            throw new Error('not 200 this time'); // 美滴很
        }).then(json => {
            /* 2. 异步结束了，发结果action */
            dispatch({
                type: 'LOAD_MORE_WORK',
                msg: json.name,
            });
        }).catch(error => {
            /* 3. 倒霉催的，发报错action */
            dispatch(
                {
                    type: 'do',
                    payload: text
                }
            );
        });
    }
}

```

**我们希望action可以处理异步动作，如果不借助中间件来处理的话，会报错。**

![https://cdn.portal.levenx.com/levenx-world/dc7d8cfa0326493abbd315735d593132.png](https://cdn.portal.levenx.com/levenx-world/7412bec49fd94238adbf8f074a7f6014.png "错误截图")




**store**

接受action传递到信号是一个对象，即

**action**

方法返回的是object,但是处理异步操作时，我们使用如上代码，

**action**

传递给

**store**

的是一个function，如果没有中间件帮忙处理一下，

**store**

是不接受的。

**react-thunk**就是来解决异步问题的。

1. 安装中间件

```bas
 npm install react-thunk

```

2. 初始化store时注入中间件

```javascript
import { createStore, applyMiddleware，compose} from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer'

const initState = { money: 0 };

//redux devtools 和 其他中间件 一起使用时，需要做如下判断
const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
    applyMiddleware(thunk)
);

//创建store工厂
const store = createStore(
    reducer,
    initState,
    enhancer
);

export default store;

```

初始化**store**时，注入**react-thunk**,**action**便可以返回function，**react-thunk**通过异步请求的不同状态disptch给 **store**对应的object对象作为信号。

### 二、redux-logger

使用效果如下图，每次action修改state时，都会在控制台打印出关键信息，便于开发者追溯状态。

![https://img-blog.csdnimg.cn/20200326001844387.png?x-oss-process=image/watermark,type<span data-type=](https://cdn.portal.levenx.com/levenx-world/fb1f39fb9ee94beaad78cb0f7dc72bc7.watermark,type_zmfuz3pozw5nagvpdgk,shadow_10,text_ahr0chm6ly9ibg9nlmnzzg4ubmv0l20wxzm3odkwmjg5,size_16,color_ffffff,t_70)\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODkwMjg5,size\_16,color\_FFFFFF,t\_70" />

**配置：**

```javascript
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger'
import reducer from './reducer'

const initState = { money: 0 ,levenx:''};

const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
    applyMiddleware(thunk, logger)
);

//创建store工厂
const store = createStore(
    reducer,
    initState,
    enhancer
);

export default store;

```

后续再补一些其他的中间件的使用。中间件都是方便我们日常开发的，好用的中间件还是很有必要了解一下。

## 相关文章推荐

* [React状态管理 - Redux&React-redux使用详解教程](https://www.levenx.com/article/725712925991#heading-0)
* [redux tookit - rtk query的简单使用
  ](https://www.levenx.com/article/how-to-use-redux-tookit)


在Redux中，中间件是对dispatch函数进行扩展的一种方式，用来处理action和store之间的通信和交互。中间件的作用可以分为两类：一类是应用领域逻辑相关的中间件，一类是通用的、与应用领域逻辑无关的中间件。Redux需要中间件的原因是：通过中间件可以实现action和store之间的断点，方便地对action进行拦截和处理，在action到达reducer之前，执行某些额外操作（如日

Redux进阶 - Redux中间件使用（redux-thunk,redux-logger)

## 一、组件间传值方案（组件间通信）

**了解 React 的朋友应该都知道React是状态数据驱动的框架。React组件组件之间传值有很多种情况，但是组件之间传值只有通过props，context，回调函数 来实现（不借助外部类库）。**

- 父组件传值给自组件 （ props属性 ）
- 自组件传值给父组件  （ 回调函数 ）
- 兄弟组件传值 （需要传递的值传给 共有的父组件，然后兄弟组件通过props从父组件获取传递值）

**上面是一些最常用的情况，但是如果在大型项目中，组件嵌套四五层层甚至更多，这时候有个需求说把第4层的一个值传给另一个关系甚远的堂兄组件，怎么搞？如果一层层的向上传值找到公共的祖先组件然后再通过props一层层的传？**

**这个时候如果有一个仓库能够帮我们管理这些状态，组件直接的修改值，获取值直接通过这个仓库来统一管理，再也不用像上面一层层的传值，是不是很爽？**

## 二、状态集中管理仓库 Redux

![在这里插入图片描述](https://cdn.portal.levenx.com/levenx-world/49b14a19c81d4bc9ac3d9a4ab78083ac.watermark,type_zmfuz3pozw5nagvpdgk,shadow_10,text_ahr0chm6ly9ibg9nlmnzzg4ubmv0l20wxzm3odkwmjg5,size_16,color_ffffff,t_70)
根据redux的工作流程画了个简单的流程图。接下来我们根据流程图来说下redux数据流是怎么流转的。

- **store**  数据仓库
- **reducer** 仓库管理员
- **action** 修改数据的信号
- **view component** 项目所有的组件

##### 1.工作流程

首先我们需要创建一个仓库**store**，仓库里面可以存放组件们需要的数据**state**。

**store**仓库创建需要招聘处理外部动作信号的仓库管理员**reducer**。

**reducer** 管理员由 **store** 直接管理，**reducer** 管理员通过**action** 动作传递的信号的type来做相应的提前预定好的动作来管理**store**中的数据。

**action** 信号由数据用户**view component** 来触发，通过**store** 提供的联系方式 **store.dispatch()** 来发送**action**。

**view component** 可以通过store.getState()来获取仓库的所有数据，从而来提取自己需要的数据。
如果**view component** 希望**store**中的数据有改动的时候就通知自己，那么就需要订阅**subscribe** 仓库**store**,也就是在仓库的通知列表里面填一下联系方式，当仓库数据修改的时候，仓库会给订阅过的**view comonent**发送最新的数据。

##### 2.代码实践

接下来我将写代码模拟父母挣钱，孩子索要零花钱来改变家庭资金的过程。
![在这里插入图片描述](https://cdn.portal.levenx.com/levenx-world/30f40aeda30148038a9fce1d8e904159.gif)

1. 创建React项目（create-react-app)

```javascript
    create-react-app redux-demo 
    //脚手架安装 npm install -g create-react-app 
```

2. 创建store文件夹
   ![在这里插入图片描述](https://cdn.portal.levenx.com/levenx-world/4ac28fc4a2f1493d9e343db281ddb08c.watermark,type_zmfuz3pozw5nagvpdgk,shadow_10,text_ahr0chm6ly9ibg9nlmnzzg4ubmv0l20wxzm3odkwmjg5,size_16,color_ffffff,t_70)
3. 初始化 store 仓库

```javascript
//store.js
import { createStore} from 'redux';
import reducer from './reducer'

//初始化工厂数据 state
const initState = { money: 0 };

//创建store工厂
const store = createStore(
    reducer,
    initState,
);

export default store;
```

4. store初始化需要reducer管理员

```javascript
//reducer.js
//仓库管理员，接受action发送的信号，处理返回结果数据
const reducer = (state = {}, action) => {
    let newState;
    switch (action.type) {
        case 'SAVA_MONEY'://挣钱
            newState = Object.assign({}, state);
            newState.money += action.payload
            return newState;
        case "OUT_MONEY"://取钱
            newState = Object.assign({}, state);
            newState.money -= action.payload
            return newState;
    }
    return state;
}
export default reducer;
```

5. 组件获取仓库中的数据state

```javascript
//Family.jsx
import React, { Component } from 'react';
import store from './store/store';
import { saveMoney, outMoney } from './store/action'

class Couple extends Component {

    constructor(props) {
        super(props);
        this.state = store.getState()
        store.subscribe(() => {
            let newState = store.getState();
            //重新触发render,从而通过store.getState()获取到新值
            this.setState(newState);
        })
    }

    render() {
        const { money } = this.state;
        return (
            <div>
                <p>Family Money:{money}</p>
                Couple:
                <button onClick={() => {
                    const saveMoneyAction = saveMoney(100)
                    store.dispatch(saveMoneyAction)
                }}>赚钱</button>
                <hr />
                {this.props.children}
            </div>
        );
    }
}

class Child extends Component {

    componentDidMount() {
        store.subscribe(() => {
            this.setState({})
        })
    }

    render() {
        const state = store.getState();
        return (
            <div>
                <p>Family Money: {state.money}</p>
                Child:
                <button onClick={() => {
                    const say = outMoney(20)
                    store.dispatch(say)
                }}>索要零花钱</button>
            </div>
        )
    }
}


export { Couple, Child };
```

```javascript
//action.js
export const saveMoney = (money) => {
    return {
        type: 'SAVA_MONEY',
        payload: money
    }
}

export const outMoney = (money) => {
    return {
        type: 'OUT_MONEY',
        payload: money
    }
}

```

## 三、react-redux

按照上面redux的使用流程，每个组件都需要通过store.getState获取state值，而且都需要订阅等等，真正项目中如果直接这么使用会代码冗余，不方便维护。    

通过react-redux可以很好的简化上面的过程。

```javascript
import React, { Component } from 'react';
import { saveMoney, outMoney } from './store/action';
import { connect } from 'react-redux'

class Couple extends Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        const { money, saveMoney } = this.props;
        debugger
        return (
            <div>
                <p>Family Money:{money}</p>
                Couple:
                <button onClick={() => {
                    const saveMoneyAction = saveMoney(100)
                }}>赚钱</button>
                <hr />
                {this.props.children}
            </div>
        );
    }
}

class Child extends Component {


    render() {
        const { money, outMoney } = this.props;
        return (
            <div>
                <p>Family Money: {money}</p>
                Child:
                <button onClick={() => {
                    const say = outMoney(20)
                }}>索要零花钱</button>
            </div>
        )
    }
}
//将store中的state数据映射到组件的props中
const mpStateToProps = (state) => {
    debugger
    return {
        money: state.money
    }
}

//将store中方法映射到组件到props中
const mpDisptchToProps = (dispatch) => {
    return {
        saveMoney: (money) => { dispatch(saveMoney(money)) },
        outMoney: (money) => { dispatch(outMoney(money)) }
    }
}

const MyCouple = connect(mpStateToProps, mpDisptchToProps)(Couple);
const MyChild = connect(mpStateToProps, mpDisptchToProps)(Child);

export {
    MyCouple,
    MyChild
};
```

**项目入口 index.js**

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { MyCouple, MyChild } from './Family'
import store from './store/store'

const App =
  <Provider store={store}>
    <MyCouple>
      <MyChild />
      <MyChild />
    </MyCouple>
  </Provider>

ReactDOM.render(
  App,
  document.getElementById('root')
);

```

## 四、 Redux DevTools 插件

**Chrome浏览器**插件方便开发追溯redux状态的扭转记录。
![在这里插入图片描述](https://cdn.portal.levenx.com/levenx-world/654607780f3c464c81b80c3b5f55fabe.watermark,type_zmfuz3pozw5nagvpdgk,shadow_10,text_ahr0chm6ly9ibg9nlmnzzg4ubmv0l20wxzm3odkwmjg5,size_16,color_ffffff,t_70)

```javascript
//创建store工厂
const store = createStore(
    reducer,
    initState,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);
```

---

> 附加redux的三大原则(加深理解redux的好处和对付面试 ^ _ ^)
> （1）单一数据源：整个应用的state被存储在一棵object tree中，并且这个object tree只存在于唯一一个store中；
> （2）state是只读的：唯一改变state的方法就是触发action，action是一个用于描述发生事件的普通对象；
> （3）使用纯函数修改数据；


React状态管理 - Redux&React-redux使用详解教程。一、组件间传值方案（组件间通信）了解React的朋友应该都知道React是状态数据驱动的框架。React组件组件之间传值有很多种情况，但是组件之间传值只有通过props，context，回调函数来实现（不借助外部类库）。父组件传值给自组件（props属性）自组件传值给父组件（回调函数）兄弟组件传值（需要传递的值传给共有的父组件

React状态管理 - Redux&React-redux使用详解教程

## RTK Query 清除缓存

> 使用RTK Query的应该知道它有自己的一套缓存策略
>
> RTK Query 的一个关键特性是它对缓存数据的管理。当从服务器获取数据时，RTK Query 将在 Redux 存储中以“缓存”的形式存储数据。当对相同数据执行附加请求时，RTK Query 将提供现有的缓存数据，而不是向服务器发送附加请求。

下面提供一些清除缓存的方法

#### refetchOnMountOrArgChange

接受布尔值或数字作为时间（以秒为单位）

* 传false（默认是false），将会根据缓存策略进行缓存
* 传 true， 当组件挂载或者参数更改时，会重新获取数据
* 传递number时：如果缓存中存在现有查询，它将比较当前时间与该查询最后完成的时间，如果提供的时间过去了，将重新获取，如果没有过去，将提供现有的缓存数据

```ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Post } from './types'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  // global configuration for the api
  refetchOnMountOrArgChange: 30,
  endpoints: (builder) => ({
    getPosts: builder.query<Post[], number>({
      query: () => `posts`,
    }),
  }),
})
```

```tsx
import { useGetPostsQuery } from './api'

const Component = () => {
  const { data } = useGetPostsQuery(
    { count: 5 },
    // this overrules the api definition setting,
    // forcing the query to always fetch when this component is mounted
    { refetchOnMountOrArgChange: true }
  )

  return <div>...</div>
}
```

#### 使用 cache tag

> 这个也是比较常用到的一个清除缓存的方法
>
> 我们经常会比如在创建某个item时 需要更新列表数据 这个时候就可以用到 cache tag了

主要做两件事

* 给需要清除缓存的query API提供tag
* 在对应mutation接口请求成功后失效tag

```ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
import type { Post, User } from './types'

const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/',
  }),
  tagTypes: ['Post', 'User'],
  endpoints: (build) => ({
    getPosts: build.query<Post[], void>({
      query: () => '/posts',
      providesTags: (result, error, arg) =>
        result
          ? [...result.map(({ id }) => ({ type: 'Post' as const, id })), 'Post']
          : ['Post'],
    }),
    getUsers: build.query<User[], void>({
      query: () => '/users',
      providesTags: ['User'],
    }),
    addPost: build.mutation<Post, Omit<Post, 'id'>>({
      query: (body) => ({
        url: 'post',
        method: 'POST',
        body,
      }),
      // 总是使与全局 tag 'Post' 相关的缓存失效 无法针对具体的 Post 进行精确的缓存失效。
      invalidatesTags: ['Post'],
    }),
    editPost: build.mutation<Post, Partial<Post> & Pick<Post, 'id'>>({
      query: (body) => ({
        url: `post/${body.id}`,
        method: 'POST',
        body,
      }),
      // 能够根据 mutation 的执行结果动态生成与 Post 相关的 tag，并使这些 tag 失效， 更加灵活和精确
      invalidatesTags: (result, error, arg) => [{ type: 'Post', id: arg.id }],
    }),
  }),
})
```

#### refetchOnFocus

> 控制RTK 查询在应用程序窗口重新获得焦点后是否尝试重新获取所有订阅的查询
>
> 如果在 skip: true 旁边指定此选项，则直到 skip 为 false 时才计算此值。

```ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Post } from './types'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  // global configuration for the api
  refetchOnReconnect: true,
  endpoints: (builder) => ({
    getPosts: builder.query<Post[], number>({
      query: () => `posts`,
    }),
  }),
})
```

```ts
import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { api } from './services/api'

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (gDM) => gDM().concat(api.middleware),
})

// enable listener behavior for the store
setupListeners(store.dispatch)

export type RootState = ReturnType<typeof store.getState>
```

#### refetchOnReconnect

> 控制 RTK Query 在重新获得网络连接之后是否尝试重新获取所有订阅的查询
>
> 用法及注意事项与上相同


使用RTK Query的应该知道它有自己的一套缓存策略

RTK Query 的一个关键特性是它对缓存数据的管理。当从服务器获取数据时，RTK Query 将在 Redux 存储中以“缓存”的形式存储数据。当对相同数据执行附加请求时，RTK Query 将提供现有的缓存数据，而不是向服务器发送附加请求。

RTK Query 清除缓存

## redux tookit - rtk query

官网：[https://redux-toolkit.js.org/rtk-query/overview]()

> `rtk query` 是 `@reduxjs/toolkit` 包中的的一个可选插件，其体系结构在内部使用redux。`rtk query` 是一个强大的数据获取和缓存工具，**RTK Query** 是一个强大的数据获取和缓存工具。它旨在简化在 Web 应用程序中加载数据的常见情况，**无需自己手动编写数据获取和缓存逻辑**。极大简化代码。

#### RTK Query 包含以下API:

* createApi
  > RTK query功能的核心。允许定义一组endpoints来描述如何从一系列endpoints检索数据，包括如何获取和转换该数据的配置。经验法则：每个基本URL使用一个API slice。
  >
* fetchbasQuery
  > fetch 的一个小包装，旨在简化请求。
  >
* > 可以作为 Provider 使用如果你还没有redux store
  >
* setupListeners
  > 用于启用 refetchOnMount 和 refetchOnReconconnect 行为的实用程序
  >

接下来我将介绍一下该工具的简单使用

#### 引用 `（可通过以下两种方式获得）`

```ts
import { createApi } from '@reduxjs/toolkit/query'

/* React-specific entry point that automatically generates
   hooks corresponding to the defined endpoints */
import { createApi } from '@reduxjs/toolkit/query/react'
```

#### 定义API slice

```ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Pokemon } from './types'

// Define a service using a base URL and expected endpoints
export const pokemonApi = createApi({
// 作为唯一key挂载到store
  reducerPath: 'rootApi', 
// 所有请求都以 https://fakeApi 这个开头
  baseQuery: fetchBaseQuery({ baseUrl: 'https://fakeApi' }), 
// 代表对该服务器的操作和请求
  endpoints: (builder) => ({
// builder.query<resType, reqParamType>， build.query 一般用于 GET 请求
// builder.mutation一般用于会改变数据库数据请求 比如POST请求
    getPokemonByName: builder.query<Pokemon, string>({
      query: (name) => `pokemon/${name}`,
    }),
    updatePokemon: builder.mutation<void, Pokemon>({
      query: ({id, ...pathch}) => {
        url: `pokemon/${name}`,
        method: 'POST',
        body: patch
        },
    }),
  }),
})

// 为 `getPokemonByName` Query endpoint 导出自动生成的 hooks
export const { useGetPokemonByNameQuery, useUpdatePokemonMutation } = pokemonApi
```

我一般会拆分开来使用，因为项目中接口请求不止一个，可以把定义API slice 放在一个文件，请求可以通过 `injectEndpoints` 把需要的请求放入。

roote-api.ts

```ts
import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';

// Define a service using a base URL and expected endpoints
const rootApi = createApi({
  // 作为唯一key挂载到store
  reducerPath: 'rootApi',
  // 所有请求都以 https://fakeApi 这个开头
  baseQuery: fetchBaseQuery({ baseUrl: 'https://fakeApi' }), 
  // 代表对该服务器的操作和请求
  endpoints: () => ({}),
});

export default rootApi;
```

features/api/pokemon-api.js

```ts
import rootApi from '@/store/root-api';

const pokemonApi = rootApi.injectEndpoints({
  endpoints: builder => ({
    // builder.query<resType, reqParamType>， build.query 一般用于 GET 请求
    // builder.mutation一般用于会改变数据库数据请求 比如POST请求
    getPokemonByName: builder.query<Pokemon, string>({
      query: (name) => `pokemon/${name}`,
    }),
    updatePokemon: builder.mutation<void, Pokemon>({
      query: ({id, ...pathch}) => {
        url: `pokemon/${name}`,
        method: 'POST',
        body: patch
        },
    }),
  }),
});

export const { useGetPokemonByNameQuery, useUpdatePokemonMutation } = pokemonApi
```

#### 配置store

> API slice 还包含一个自动生成的Redux slice reducer （rootApi.reducer） 和一个自定义中间件（rootApi.middleware），这里的rootApi是我上面定义的 API slice

store.js

```ts
import postsReducer from '../features/posts/postsSlice'
import usersReducer from '../features/users/usersSlice'
import notificationsReducer from '../features/notifications/notificationsSlice'
import { apiSlice } from '../features/api/apiSlice'

export default configureStore({
  reducer: {
    posts: postsReducer,
    users: usersReducer,
    notifications: notificationsReducer,
    [routApiSlice.reducerPath]: rootApi.reducer
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(rootApi.middleware)
})
```

#### 在组件中使用hooks

每个生成的query hooks 都会返回一个包含多个字段的对象，包括：

* data： 来自服务器的实际响应内容，收到响应之前，该字段将是 `undefined`
* isLoading: boolean类型, 代笔此hooks当前是否正在向服务器发出**第一次**请求。（注意：如果参数更改以请求不同的数据，isLoading将保持为false)
* isFetching: boolean类型，此hooks当前是否正在向服务器发出任何请求。
* isSuccess: boolean类型, 此hooks 是否已成功请求并有可用的缓存数据
* isError: boolean类型, 指最后一个请求是否有错误
* error: 一个 serialized 错误对象

```tsx
import * as React from 'react'
import { useGetPokemonByNameQuery, useUpdatePokemonMutation } from './features/api/pokemon-api'

export default function App() {
  // Using a query hook automatically fetches data and returns query values
  const { data, error, isLoading } = useGetPokemonByNameQuery('bulbasaur')
  // Individual hooks are also accessible under the generated endpoints:
  // const { data, error, isLoading } = pokemonApi.endpoints.getPokemonByName.useQuery('bulbasaur')
  const [trigger, { data, error, isLoading }] = useUpdatePokemonMutation()

  const updatePokenmon = (data) => {
    trigger(data);
  }

  // render UI based on data and loading state
}
```


`rtk query` 是 `@reduxjs/toolkit` 包中的的一个可选插件，其体系结构在内部使用redux。`rtk query` 是一个强大的数据获取和缓存工具，**RTK Query** 是一个强大的数据获取和缓存工具。它旨在简化在 Web 应用程序中加载数据的常见情况，**无需自己手动编写数据获取和缓存逻辑**。极大简化代码。

redux tookit - rtk query的简单使用

## 前言

> Redux 的诟病是重复的模块代码太多，各路大佬都开始尝试解决这些问题，Redux-actions 悄然而生。
>
> 刚开始使用 Redux-actions 时遇到一些问题，那么专门写一篇博客全面详细的记录 Redux-actions 的使用。

### 安装

```javascript
npm install redux-actions
```

```javascript
// index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

```

```javascript
// App.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from './action';
import './App.css';

function App(props) {
  console.log('!! props 📢：', props);
  return (
    <div className="action">
      <button
        onClick={() => {
          props.normalAction('测试');
          props.normalAction('测试');
        }}
      >
        测试Action
      </button>
    </div>
  );
}

export default connect(
  (state) => state,
  (dispatch) => {
    return {
      ...bindActionCreators(actions, dispatch),
    };
  },
)(App);
```

> 🏁 如果不熟悉 bindActionCreators 的用法可以参考我前面记录的 [bindActionCreators &amp; combineReducers 使用记录](https://blog.csdn.net/m0_37890289/article/details/110493826)
>
> **action 文件**
>
> ```javascript
> import { createAction, createActions } from 'redux-actions';
>
> // 通常 action 方式定义
> export const normalAction = (params) => {
>   return {
>     type: 'ACTIONS',
>     payload: params,
>   };
> };
> ```
>
> ```javascript
> import { createStore } from 'redux';
>
> const reducer = (state, action) => {
>   switch (action.type) {
>   case 'ACTIONS':
>       return { ...state, ACTIONS: action.payload };    
>     default:
>       return state;
>   }
> };
>
> const store = createStore(reducer, {});
>
> export { store };
> ```
>
> * #### **createAction**
>
>
>   ```javascript
>   // 参数列表
>   createAction(
>     type, 
>     payloadCreator = Identity,
>     ?metaCreator
>   )
>   ```
>
>   ```javascript
>   import { createAction, createActions } from 'redux-actions';
>
>   export const normalAction = (params) => {
>     return {
>       type: 'ACTIONS',
>       payload: params,
>     };
>   };
>
>   export const specialAction = createAction(
>     'ACTIONS',
>     (params) => {
>       return params;
>     },
>     (meta) => {
>       return { admin: true };
>     },
>   );
>
>   console.log('normalAction', normalAction('levenx'));
>   console.log('specialAction', specialAction('levenx'));
>   ```
>
>   ```javascript
>   // 参数列表
>   createActions(
>     actionMap,
>     ?...identityActions,
>     ?options
>   )
>   ```
>
>   ```javascript
>   import { createActions } from 'redux-actions';
>
>   // 同时生成多个 action 方法,并集合到一个对象中，
>   // !!🏁 但是这种方式生成的action不能通过 bindActionCreators 方法来绑定
>   // 具体问题分析与解决方案可以参考 https://blog.csdn.net/m0_37890289/article/details/110493826
>   // 文末贴出问题解决代码
>   export const specialActions = createActions({
>       //只考虑 payload
>     ACTION1: (params) => {
>       return params;
>     },
>     // 处理meta
>     ACTION2: [
>       (params) => {
>         return params;
>       },
>       (meta) => {
>         return { meta };
>       },
>     ],
>     ACTION3: (params) => {
>       return params;
>     },
>   });
>   console.log('specialActions', specialActions);
>   ```
>
>   ```javascript
>   export const specialActions = createActions({
>     //增加层级，拓展命名空间
>     APP: {
>       ACTION1: (params) => {
>         return params;
>       },
>       ACTION3: (params) => {
>         return params;
>       },
>     },
>     MY: {
>       ACTION1: (params) => {
>         return params;
>       },
>       ACTION3: (params) => {
>         return params;
>       },
>     },
>   });
>   ```
>
>   ```javascript
>   // 参数列表
>   createAction(
>     type, 
>     payloadCreator = Identity,
>     ?metaCreator
>   )
>   ```
>
>   ```javascript
>   import { createStore } from 'redux';
>   import { handleAction } from 'redux-actions';
>
>   // 正常使用方式
>   const specialReducer = handleAction(
>     'ACTIONS',
>     (state, { type, payload, meta }) => {
>       debugger;
>       return { payload };
>     },
>     { init: 'levenx' },
>   );
>
>   // 处理 action 错误情况使用这种方式
>   const specialReducer = handleAction(
>     'ACTIONS',
>     {
>       next(state, action) {
>         return { payload };
>       },
>       throw(state, action) {
>        return { error };
>       },
>     },
>     { init: 'levenx' },
>   );
>
>
>   // console.log('📢 specialReducer', specialReducer);
>
>   const store = createStore(specialReducer, {});
>
>   export { store };
>
>   ```
>
>   ```javascript
>   // 参数列表
>   handleActions( reducerMap, defaultState);
>   ```
>
>   ```javascript
>   import { handleActions } from 'redux-actions';
>
>   const specialReducer = handleActions(
>     {
>       ACTION1: (state, action) => {
>         return { levenx: '1' };
>       },
>       ACTIONS2: {
>         next(state, action) {
>           return { levenx: '1' };
>         },
>         throw(state, action) {
>           return { levenx: '1' };
>         },
>       },
>     },
>     { INIT_DATA: 'levenx' },
>   );
>   ```
>
>   ```javascript
>   // 参数列表
>   combineActions(...types);
>   ```
>
>   ```javascript
>   const { action1, action3 } = createActions({
>     ACTION1: (params) => {
>       return params;
>     },
>     ACTION3: (params) => {
>       return params;
>     },
>   });
>   export { action1, action3 };
>   ```
>
>   ```javascript
>   import { handleActions, combineActions } from 'redux-actions';
>   import { action1, action3 } from './action';
>
>   const specialReducer = handleActions(
>     {
>        // action1, action3 都触发该方法
>       [combineActions(action1, action3)]: (state, action) => {
>         return { action };
>       },
>     },
>     {}
>   );
>   ```
>
>   ```javascript
>   // bindActionCreatorsPlus.js
>   import { bindActionCreators } from 'redux';
>
>   export default function bindActionCreatorsPlus(actions, dispatch) {
>     if (typeof actions !== 'object' || !actions) {
>       throw new Error('invalid actions');
>     }
>
>     let result = {};
>     for (let key in actions) {
>       if (actions.hasOwnProperty(key)) {
>         const creator = actions[key];
>         if (typeof creator === 'object' && creator) {
>           //递归执行
>           result[key] = bindActionCreatorsPlus(creator, dispatch);
>         } else if (typeof creator === 'function') {
>           result[key] = bindActionCreators(creator, dispatch);
>         }
>       }
>     }
>     return result;
>   }
>   ```
>
>   ```javascript
>   import React, { Component } from 'react';
>   import { connect } from 'react-redux';
>   import bindActionCreatorsPlus from './bindActionCreatorsPlus';
>   import * as actions from './action';
>
>   function App(props) {
>     console.log('!! props 📢：', props);
>     return (
>       <div className="action">
>       </div>
>     );
>   }
>
>   export default connect(
>     (state) => state,
>     (dispatch) => {
>       return {
>         //使用自定义的  bindActionCreatorsPlus方法处理action
>         ...bindActionCreatorsPlus(actions.actions, dispatch),
>       };
>     },
>   )(App);
>
>   ```
>
>   ```javascript
>   export const actions = createActions({
>     App: {
>       ACTION1: (params) => {
>         return params;
>       },
>       ACTION3: (params) => {
>         debugger;
>         return params;
>       },
>     },
>   });
>   ```
>
>   *
>   *
>   * ## 参考
>
>   ## Redux相关文章推荐
>
>   ### 嵌套 action 绑定组件方案
>
>   * # combineActions
>   * #### handleActions
>   * #### handleAction
>   * #### createActions
>
> ## 方法列表
>
>> 后续介绍 redux-actions 方法会修改对应的 action 和 reducer 文件。
>>
>
> **reducer 与 store**

**App 组件**

**入口**

## DEMO项目结构


前言Redux的诟病是重复的模块代码太多，各路大佬都开始尝试解决这些问题，Redux-actions悄然而生。刚开始使用Redux-actions时遇到一些问题，那么专门写一篇博客全面详细的记录Redux-actions的使用。安装npminstallredux-actions//index.jsximportReactfrom&#39;react&#39;;importReactDOMfrom&

Redux-actions 使用方法

Git是一个由林纳斯·托瓦兹为了更好地管理linux内核开发而创立的分布式版本控制／软件配置管理软件。需要注意的是和GNU Interactive Tools，一个类似Norton Commander界面的文件管理器相区分。



C 语言，是一种通用的、过程式的编程语言，广泛用于系统与应用软件的开发。具有高效、灵活、功能丰富、表达力强和较高的移植性等特点，在程序员中备受青睐。

C 语言是由 UNIX 的研制者丹尼斯·里奇（Dennis Ritchie）和肯·汤普逊（Ken Thompson）于 1970 年研制出的B语言的基础上发展和完善起来的。目前，C 语言编译器普遍存在于各种不同的操作系统中，例如 UNIX、MS-DOS、Microsoft Windows 及 Linux 等。C 语言的设计影响了许多后来的编程语言，例如 C++、Objective-C、Java、C# 等。

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。



React 是一个由 Facebook 开发的流行的 JavaScript 库，用于构建交互式用户界面。它采用了一种基于组件化的开发模式，使得开发人员可以将 UI 拆分为独立的、可复用的组件，并由这些组件构建复杂的用户界面。

React 的主要特点包括：

组件化开发：React 将 UI 拆分为独立的、可复用的组件，开发人员可以将这些组件组合在一起构建复杂的用户界面；
虚拟 DOM：React 采用虚拟 DOM 技术来优化 UI 更新性能，通过比较前后状态的差异来最小化 DOM 操作；
单向数据流：React 中的数据流是单向的，数据由父组件传递给子组件，子组件不能直接修改父组件的数据；
JSX：React 支持使用 JSX 语法，将组件的结构和样式与 JavaScript 代码结合在一起，使得代码更加简洁和易于理解。
React 生态系统非常丰富，包括许多与 React 相关的库和工具，如 Redux、React Router、Webpack 等，可帮助开发人员更好地使用 React 构建应用程序。

React 在 Web 开发、移动应用开发和桌面应用开发等领域得到了广泛应用，并且在社区中有着非常活跃的开发者和贡献者。如果您想要学习构建交互式用户界面的技术，React 是一个非常不错的选择。

React

C++ 是一种通用的、静态类型的编程语言，它具有高效性、灵活性和可移植性等特点。C++ 基于 C 语言，同时支持面向对象编程和泛型编程，可以用于开发各种类型的应用程序，如系统软件、游戏、桌面应用程序、移动应用程序等。

C++ 的主要特点包括：

高效性：C++ 是一种编译型语言，可以生成高效的本地代码，在性能要求高的应用程序中得到广泛应用；
面向对象编程：C++ 支持面向对象编程，包括封装、继承、多态等特性，使得开发人员可以更加灵活和高效地构建复杂的软件系统；
泛型编程：C++ 支持泛型编程，包括模板和泛型算法等特性，使得开发人员可以编写可重用的代码和算法；
可移植性：C++ 可以在多种平台和操作系统上运行，具有很高的可移植性；
标准化：C++ 有一个国际标准，称为 C++ 标准，规范了语言的语法、语义和库函数等方面，使得 C++ 的代码更加规范和可靠。
C++ 作为一种通用的编程语言，可以用于多种应用场景。在系统软件开发中，C++ 可以用于操作系统内核、驱动程序、网络协议栈等方面；在游戏开发中，C++ 可以用于游戏引擎、物理引擎、图形渲染等方面；在桌面应用程序和移动应用程序开发中，C++ 可以用于开发各种类型的应用程序，如音频和视频编辑、图像处理、数据库管理等方面。

如果您想要成为一名优秀的程序员，C++ 是一个非常有用的编程语言，它具有广泛的应用场景和丰富的编程资源，可以帮助您更加高效和灵活地解决实际问题。

Cypress 是一个前端自动化测试工具，用于测试基于Web的应用程序。它能够测试运行在浏览器中的应用，并且适用于单元测试、集成测试和端到端（E2E）测试。Cypress 提供了一个丰富的API集，以及一个友好的交互式界面，让开发和测试人员能够轻松编写、运行和调试测试用例。

Cypress

JavaScript 是一种基于脚本的编程语言，主要用于在 Web 页面上实现交互式的效果和动态的内容。JavaScript 是一种解释性语言，不需要编译就可以直接在浏览器中运行。

JavaScript 的主要特点包括：

轻量级：JavaScript 代码通常比较短小，可以快速加载和执行。

可移植性：JavaScript 可以在各种不同的浏览器和操作系统上运行。

面向对象编程：JavaScript 支持面向对象编程，包括对象、继承、封装等特性，可以用于构建复杂的软件系统。

客户端脚本语言：JavaScript 主要用于在 Web 页面上实现交互式的效果和动态的内容，可以与 HTML 和 CSS 一起使用。

异步编程：JavaScript 支持异步编程，可以利用回调函数、Promise、async/await 等方式实现异步操作，提高程序的性能和响应能力。

JavaScript 在 Web 开发中扮演着非常重要的角色，它可以用于实现各种交互式的效果和动态的内容，如表单验证、动画效果、AJAX 等。同时，JavaScript 也可以用于开发各种类型的应用程序，如桌面应用程序、移动应用程序等。

如果您想成为一名 Web 开发人员，JavaScript 是必不可少的编程语言之一，需要掌握 JavaScript 的基本语法和常用的开发框架和库，如 React、Angular、Vue 等。掌握 JavaScript 可以帮助您更加高效和灵活地实现 Web 开发中的各种功能和效果，为自己的职业发展和个人成长打下坚实的基础。

JavaScript

Mongoose 是一个面向 MongoDB 数据库的对象数据模型（ODM）库，用于在 Node.js 环境下建模和操作 MongoDB 文档结构。它提供了一些方便的特性，如数据验证、查询构建、业务逻辑钩子（hooks）和中间件，使得处理 MongoDB 文档更加直观和安全。


Mongoose

CSS（Cascading Style Sheets）是一种用于描述文档样式和布局的样式表语言，常用于 Web 开发中。它通过定义样式规则来控制 HTML 元素的外观和布局，使得开发人员可以更加灵活地控制页面的样式和排版。

CSS 的主要特点包括：

分离样式和内容：CSS 可以将样式信息从 HTML 内容中分离出来，使得样式和内容的管理更加清晰和易于维护；
层叠样式：CSS 中的样式规则是可以层叠的，即可以通过多个规则来定义相同的样式，最终的样式由所有规则的组合决定；
继承样式：CSS 中的某些样式可以被子元素继承，使得样式的传递更加自然和方便；
支持多种选择器：CSS 支持多种选择器来选择不同的 HTML 元素，使得样式的应用更加灵活和精确；
支持多种样式属性：CSS 支持多种样式属性，如文本样式、盒模型、背景、边框、定位、动画等，使得开发人员可以控制元素的各个方面。
CSS 在 Web 开发中扮演着非常重要的角色，通过使用 CSS，开发人员可以为网页添加各种样式和布局，使得网页更加美观和易于使用。同时，CSS 也是一门非常灵活和强大的技术，可以用于许多不同的应用场景，如响应式设计、移动应用开发、桌面应用开发等。

next.js是一个基于React的通用JavaScript框架，next.js为React组件模型提供了扩展，支持基于服务器的组件渲染，同时也支持在客户端继续进行渲染

next.js是一个基于React的通用JavaScript框架，next.js为React组件模型提供了扩展，支持基于服务器的组件渲染，同时也支持在客户端继续进行渲染

next.js是一个基于React的通用JavaScript框架，next.js为React组件模型提供了扩展，支持基于服务器的组件渲染，同时也支持在客户端继续进行渲染



Next.js

Electron 是一个前端框架，可用于构建跨平台的桌面应用程序，桌面应用程序指的是可以在电脑上安装的软件（如QQ、浏览器、酷狗音乐等）。 与 开发者可使用 JavaScript 、 HTML 和 CSS 等前端基础技术，结合 Node.js 进行开发。

Electron

Tailwind CSS 是一个非常强大且受欢迎的实用型 CSS 框架，于2017年由.Adam Wathan、Jonathan Reinink、David Hemphill 和 Steve Schoger 共同创立。 这个框架的主要目标是帮助开发者快速构建定制化的用户界面，而无需从头开始编写 CSS 代码。
Tailwind 提供了一整套预先定义好的类名，代表 CSS 的各种属性，如颜色、字体大小、间距等。这些实用类能支持你快速完成布局，同时保持简洁无冗余代码。
通过采用响应式类，Tailwind 可以帮助你无缝地构建适应各种屏幕尺寸的应用程序。
使用Tailwind 的高度可配置性，你可以根据项目需求定制自己的设计系统。举例来说，你可以轻松地添加、编辑或删除颜色、字体等相关设置。
Tailwind 采用PostCSS 插件系统，将实用类生成的 CSS 打包压缩为最小，可优化加载速度。
 Tailwind 提供了一整套官方插件，如动画库、表单控件等。此外，开发社区也贡献了大量非官方插件和资源，让开发者能够选择更加丰富的功能。
Tailwind CSS 广泛应用于以下场景：
- 前端项目：无论是使用纯 HTML 结构还是结合 JavaScript 框架（例如：React、Vue 和 Angular），Tailwind 都能实现高度定制化的用户界面。
- Web 应用程序： 开发具有复杂交互和列表式布局的应用界面。
- 电子邮件： 利用 "tailwindcss-inline" 工具，可以为 HTML 邮件模板生成内联样式。
- 营销页面： 使用 Tailwind 创建具有吸引力的营销页面和布局，可轻松快速地进行样式调整。
- 开发原型：快速搭建原型，并便捷地进行迭代。
如此多的优点和特性使得Tailwind CSS变得越来越受欢迎，是一个非常值得学习和尝试的框架。

Tailwind CSS

Vue.js（简称 Vue）是一种开源的轻量级 JavaScript 框架，由 Evan You 于2014年首次发布。Vue 致力于在用户界面（UI）开发中实现数据与视图的双向绑定，为创建现代化 Web 应用、单页面应用（SPA）以及多种复杂界面提供了一种简洁、高效且可扩展的解决方案。

#### 核心特性

- **组件化：** Vue 包含了独立的、可复用的组件，有助于将 UI 切成逻辑部分、提高代码质量。
- **双向数据绑定：** 利用双向数据绑定，Vue 能自动更新 UI，对应数据模型发生改变时同步更新视图。
- **声明式渲染：** 编写模板完成数据驱动的视图，自动追踪依赖关系，并且在数据模型发生更改时仅重新计算最小必要部分。
- **虚拟DOM：** 通过 Vue 的虚拟 DOM 进行更效率的视图更新，降低视图更新所需的计算量。
- **响应式系统：** Vue 拥有一个响应式系统，当数据更改时会自动跟踪和更新所有相关视图。
- **易于集成：** Vue 可与其他 JavaScript 库或现有项目相互集成，同时方便和流行的前端工具链合作。

#### 主要模块

- **Vue Router：** 官方提供的路由管理器，有助于构建单页面应用程序。
- **Vuex：** 是一个状态管理库，有助于简化和规范在组件之间共享的数据和方法。
- **Vue CLI：** 是一个命令行工具，匹配各种扩展，有助于快速搭建 Vue 项目，包括开发、构建和部署。

#### 适用场景

- 单页面应用（SPA）开发：在单一页面中完成路由切换、状态管理和 UI 渲染等流程。
- Web 应用程序开发： Vue 可与其他库如 Axios 结合，方便地建立发起 HTTP 请求的 API 客户端。
- 组件库和 UI 框架：借助 Vue 的组件系统，可以构建封装的、具有丰富功能的 UI 组件和框架。
- 原型开发：使用 Vue 快速构建和验证产品原型，提高开发效率。

Vue 因易于入门、高度灵活、丰富的生态系统以及优异的性能而受到许多开发者的欢迎，是 Web 开发领域一种非常值得学习的前端框架。

npm 是 Node.js 附带的包管理器。它可用于安装和发布 CommonJS 和 ECMAScript 模块、jQuery 插件、可重用 JavaScript 代码（库）、基于 JavaScript 的 CLI 程序等。

TypeORM 是一个面向对象的关系型数据库ORM框架，用于在 Node.js 应用程序中操作数据库。它支持多种数据库，包括 MySQL，PostgreSQL，SQLite，以及 Microsoft SQL Server 等。TypeORM 提供了使用 TypeScript 的完整ORM解决方案，它的主要目标是简化数据库操作，提高开发效率。

TypeORM

NestJS 是一种基于 TypeScript 的后端框架，它结合了 Express 和 Angular 的优点，提供了一种现代化、模块化和可扩展的开发方式。NestJS 的主要目标是提供一个高效、可维护和可测试的服务端应用程序框架，同时提供了许多有用的功能和工具，如依赖注入、模块化体系结构、中间件、管道、拦截器、异常过滤器等。

NestJS 的主要特点包括：

基于 TypeScript：NestJS 是一种基于 TypeScript 的框架，支持静态类型检查和强类型编程，提高了代码的可维护性和可读性。

模块化体系结构：NestJS 使用模块化体系结构，将应用程序拆分为多个模块，每个模块可以独立开发、测试和部署，提高了代码的可扩展性和可维护性。

依赖注入：NestJS 支持依赖注入，通过注入依赖项来实现松耦合的架构设计，提高了代码的可测试性和可维护性。

中间件和管道：NestJS 提供了中间件和管道机制，可以在请求和响应之间添加额外的逻辑，如身份验证、日志记录、异常处理等，提高了应用程序的可靠性和安全性。

异常过滤器：NestJS 提供了异常过滤器，可以捕获应用程序中的异常并进行处理，提高了应用程序的稳定性和可靠性。

NestJS 可以用于构建各种类型的后端服务，如 RESTful API、WebSocket 服务、微服务等。NestJS 社区提供了许多有用的扩展和插件，如 Swagger UI、TypeORM、GraphQL 等，可以帮助开发人员更加高效地构建和管理后端服务。

如果您想成为一名后端开发人员，NestJS 是一个非常有用的框架，需要掌握 TypeScript 的基础知识和 NestJS 的开发方式，了解常用的模块和工具，如路由、控制器、服务、中间件、管道、拦截器等。掌握 NestJS 可以帮助您更加高效和灵活地构建和管理后端服务，为自己的职业发展和个人成长打下坚实的基础。

NestJS

ORM（Object-Relational Mapping，对象关系映射）是编程中的一个概念，它指的是一种技术手段，可以将不兼容的类型系统转换为面向对象模型。换句话说，ORM 允许开发者在编程语言中使用对象的方式来操作数据库中的数据。

JavaScript 的升级版 TypeScript 已日益成为开发世界全新的演变里程碑。立足于 JavaScript 的优雅灵活与 TypeScript 的强类型体系，本教程旨在助您铸就极致的开发力量。

我们的 TypeScript 系列教程将自始至终地引导你掌握 TypeScript 的各种方面，与您一起，宏观理解 JavaScript 世界、深入钻研 TypeScript 规则与逻辑，探索现代前端架构的无限可能性。

无论你是初学乍练，还是已有一定基础，本教程都将按需调整深度和广度，带你领略 TypeScript 的逻辑美感和规则魅力。我们将从概述 TypeScript 的基础特性开始，逐步涵盖完整的类型系统，深入掌握接口、类和模块，直至探索 TypeScript 联合 TypeScript 工具链的最佳实践。

严谨的理论讲解，生动的实例分析，尽在本教程。不论是函数式编程，（FP）还是面向对象编程（OOP），所有首要概念与理论都会得到清晰的解读和实践落地。同时，我们的教程连接日常开发问题，从实际角度出发，教会你解决问题，胜于只懂理论。

让我们一同启航，感受 TypeScript 的鲜明特点和强大潜力，为你的前端旅程增添一份精确和强大的工具！编程的世界正在等待你的探索。

TypeScript

Network（网络）是指连接在一起的计算机、设备和其他物体，它们可以彼此通信和交换信息。网络可以分为局域网（LAN）、广域网（WAN）、互联网（Internet）等不同的类型和层次，它们在不同的范围和层次上提供了不同的服务和功能。

网络的主要特点包括：

连通性：网络可以将不同的计算机、设备和应用程序连接在一起，实现彼此之间的通信和数据交换。

分布式：网络中的计算机和设备分布在不同的地理位置，可以通过网络连接在一起，实现分布式计算和数据存储。

开放性：网络是一个开放的系统，可以使用不同的协议和技术来实现各种功能和服务。

可靠性：网络通过冗余和备份等方式提高了数据传输和存储的可靠性和安全性。

网络在现代社会中扮演着非常重要的角色，它可以用于各种不同的应用场景，如通信、电子商务、社交媒体、云计算等。网络技术的发展也带来了许多新的机遇和挑战，例如网络安全、数据隐私和数字化转型等方面。

如果您想深入了解网络的原理和技术，可以学习计算机网络、网络安全、云计算等相关领域的知识。这些知识可以帮助您更好地理解和应用网络技术，为自己的职业发展和个人成长打下坚实的基础。

网络

React Query 是一个强大的数据同步库，用于在 React 应用程序中处理服务器状态的获取、缓存和更新。它提供了一系列的 hooks，使得在组件中获取和操作远程数据变得更加简单和高效。React Query 自动处理数据获取过程中的缓存、重试、更新和失效等问题，极大地简化了数据管理逻辑。

React Query

Node 是一个 Javascript 运行环境(runtime)。实际上它是对 Google V8 引擎（应用于 Google Chrome 浏览器）进行了封装。V8 引擎执行 Javascript 的速度非常快，性能非常好。Node 对一些特殊用例进行了优化，提供了替代的 API，使得 V8 在非浏览器环境下运行得更好。例如，在服务器环境中，处理二进制数据通常是必不可少的，但 Javascript 对此支持不足，因此，V8.Node 增加了 Buffer 类，方便并且高效地 处理二进制数据。因此，Node 不仅仅简单的使用了 V8,还对其进行了优化，使其在各环境下更加给力。



NodeJS

Nuxt.js 是一个基于 Vue.js 的高级框架，用于构建服务器端渲染（SSR）的应用程序、静态站点生成（SSG）或单页应用程序（SPA）。它为开发者提供了一个强大的架构，以简化 Web 开发流程，特别是在处理视图层的渲染时。Nuxt.js 的目的是让 Web 开发变得简单而强大，同时也提供了自动化的代码分割和性能优化。

Nuxt.js

React Native 是一个由 Facebook 开发的开源框架，它允许开发人员使用 JavaScript 和 React 构建原生移动应用程序。它使用与 React 类似的组件和声明式的编程模型，能够为 iOS 和 Android 平台创建性能优异的用户界面。

React Native

Webpack是一个模块打包工具。它的主要目的是为了在浏览器中使用而打包JavaScript文件，但它也能转换、打包或打包几乎任何资源或资产。Webpack会取模块及其依赖关系，并生成代表这些模块的静态资源。Webpack支持扩展性，并在网络架构和性能方面推广最佳实践。

Webpack

Flutter是一款由Google开发的开源移动应用程序开发框架，用于快速构建高质量、高性能的Android和iOS移动应用程序。Flutter使用Dart语言编写，并提供了一套丰富的组件和工具库，以支持快速、高效的应用程序开发。

Flutter的主要特点包括：

完美的移动端UI：Flutter提供了一套全新的移动端UI框架，可以为Android和iOS应用程序提供高质量、美观的用户界面。

热重载：Flutter支持热重载，可以快速地在应用程序中进行更改和测试，从而提高开发效率和速度。

自绘引擎：Flutter具有一个自绘引擎，可以在渲染层面上实现高性能和高度自定义的UI控件。

响应式框架：Flutter采用了响应式框架，使得应用程序可以根据用户的输入和设备状态进行动态响应和更新。

开源：Flutter是一款开源的框架，拥有庞大的社区和活跃的开发者，提供了许多有用的插件、工具和第三方库，以支持应用程序开发。

Flutter的开发模式类似于Web开发，它使用了一种称为Widgets的组件，可以快速构建应用程序的用户界面。Flutter还提供了许多有用的工具和插件，例如Flutter SDK、Flutter插件和Flutter DevTools等，可以帮助开发人员更加高效地进行开发和调试。

Flutter

FFmpeg 是一个开源的跨平台解决方案，用于录制、转换和流式传输音频和视频。它提供了强大的命令行工具，可以处理多种多样的多媒体格式，并提供了一组丰富的库和组件，使得开发者能够在自己的应用程序中集成音视频处理功能。

Ffmpeg

Rust是一种系统编程语言，由Mozilla Research开发。它是一种安全、并发和高效的语言，旨在为开发人员提供更好的内存安全和线程安全，同时保持高性能和可扩展性。

Rust的设计具有以下特点：

内存安全：Rust在编译时执行内存安全检查，防止常见的内存错误，例如使用空指针或释放不再使用的内存。

并发性：Rust具有一种称为"无等待"（lock-free）的并发模型，它可以确保线程安全性而无需使用锁。

高效性：Rust使用零成本抽象和内联函数等技术，以提供高效的代码执行速度。

可扩展性：Rust具有模块化的设计，可以轻松地组织和重用代码。

Rust被广泛应用于系统编程领域，例如操作系统、网络编程、数据库和嵌入式系统等。它也被用于Web开发、游戏开发和人工智能等领域。许多知名的公司和组织，如Mozilla、Microsoft、Amazon、Dropbox等都在使用Rust开发其产品和服务。

Rust

WebView是一种组件或控件，它允许应用程序显示网页和运行网页内容，基本上就像是一个内嵌的浏览器。在移动开发领域，WebView让开发者能够在原生应用中嵌入网页，这样可以使得不必为每个平台开发独立的应用程序界面。WebView广泛用于Android和iOS应用中。

Webview

PWA (Progressive Web App)是一种渐进式Web应用程序，它是基于Web技术构建的应用程序，可以像本地应用程序一样运行在各种设备和平台上，包括桌面、移动设备和平板电脑等。

PWA具有许多本地应用程序的功能，例如离线访问、推送通知、主屏幕快捷方式等，同时还具有网页应用程序的优势，例如可访问性、跨平台性等。PWA可以通过Web浏览器安装到设备中，无需通过应用商店进行下载和安装。

PWA使用一组现代Web技术，例如Service Workers、Web App Manifests、HTTPS等，以提供一个类似于本地应用程序的体验。使用PWA，用户可以在设备上安装应用程序，无需访问应用商店，而且在网络不可用时，应用程序仍然可以正常工作。

PWA是一种新兴的Web技术，它正在成为Web应用程序的未来，许多公司和组织正在将其应用于其Web应用程序，以提供更好的用户体验和更高的用户参与度。

Selenium 是一个自动化测试工具，用于自动化Web浏览器的操作。它是一个开源项目，广泛用于自动化Web应用程序的测试，包括但不限于表单提交、用户行为模拟和各种页面功能的验证。Selenium 支持多种编程语言，如 Java、Python、C#、Ruby、JavaScript (Node.js) 等，并且兼容主流的浏览器，包括 Chrome、Firefox、Safari 和 Edge。

Selenium

HTML5 <canvas> 元素是一个可以使用脚本（通常是JavaScript）来绘制图形和动画的HTML元素。它是HTML5规范的一部分，旨在提供一个丰富的图形绘制接口，允许开发者绘制2D图形，从简单的图形和文本到复杂的动画和游戏场景。

Canvas

Go，也称为 Golang，是一种开源的编程语言，由 Google 开发。Go 是一种静态类型、编译型、并发型的语言，它被设计为一种简单、快速、可靠和高效的语言。Go 语言的语法类似于 C 语言，但也借鉴了其他语言的一些特性，如 Python 和 Java。

Go 语言的设计目标是提供一种简单、易于学习和使用的语言，同时具有高效的执行速度和并发处理能力。Go 语言的主要特点包括：

1. 并发支持：Go 语言内置了并发支持，可以轻松地编写高并发的程序，而不需要额外的库或框架。

2. 内存管理：Go 语言有自己的垃圾收集器，可以自动管理内存，避免内存泄漏和悬垂指针等问题。

3. 快速编译：Go 语言的编译速度非常快，可以在几秒钟内编译大部分代码。

4. 简单易学：Go 语言的语法简单，易于学习和使用，同时也提供了足够的功能和扩展性。

5. 跨平台支持：Go 语言可以在各种操作系统和硬件平台上运行，包括 Windows、Linux、macOS、Android、iOS 等。

6. 开源：Go 语言是一个开源项目，可以自由下载、使用和修改。

Go 语言被广泛应用于网络编程、云计算、大数据处理、系统编程、区块链等领域。许多知名公司和组织，如 Google、Uber、Docker、Kubernetes、Cloudflare 等都在使用 Go 语言开发自己的项目和服务。

Golang

Axios 是一个基于 Promise 的 JavaScript HTTP 客户端，可在前端应用程序和 Node.js 后端中使用。

Axios

WebSocket 是一种网络通信协议，提供了在单个TCP连接上进行全双工通讯的能力。它是HTML5一部分的先进技术，允许服务器和客户端之间进行实时、双向的交互通信。WebSocket设计用来取代传统的轮询连接，如长轮询，使得数据可以快速地在客户端和服务器之间传输，从而减少延迟。

WebSocket

Elasticsearch是一个基于Lucene的免费开放、分布式、RESTful搜索引擎。



ElasticSearch

VSCode是一款强大的代码编辑器，支持多种编程语言。它有着易于使用的用户界面和丰富的插件生态系统，可以提高您的开发效率和优化开发流程。探索VSCode，提高您的代码编写和调试体验

VSCode

Linux 是一个广泛使用的开源操作系统内核，由林纳斯·托瓦兹（Linus Torvalds）于1991年创建。它是 Unix-like 操作系统的一个重要分支，并且它的设计和实现遵循了模块化的设计原则。Linux 内核本身可以与不同的用户空间组件配合，形成完整的操作系统。这些完整的系统被称为 Linux 发行版，例如 Ubuntu、Fedora、Debian、CentOS 和 Arch Linux 等。

Linux

HTML（超文本标记语言）是用于创建网页和其他要在网络浏览器中显示的信息的标记语言。该标签很少单独使用，通常与 CSS 和 JavaScript 搭配使用。

HTML

Dart 是一种基于类的静态（强）类型编程语言，用于构建 Web 和移动应用程序。Dart 编译为现代 JavaScript 以在浏览器中运行，并编译为本机代码以在 Android 和 iOS 等移动平台上运行。Dart 还可以在命令行上运行脚本和服务器端应用程序。

Dart

pnpm（Performant npm）是一个快速的，节省磁盘空间的包管理工具，用于 JavaScript 和 Node.js 生态系统。它是 npm 和 Yarn 的一个替代品，旨在提供更快、更高效的依赖管理解决方案。pnpm 主要通过使用硬链接和符号链接的方式来存储一个版本的包的单一副本，从而减少磁盘空间的使用和加速安装过程。

PNPM

Iframe

数据结构是计算机科学中研究数据存储、组织和管理方式的学科，是计算机程序设计的基础之一。数据结构可以帮助程序员更加有效地组织和管理数据，提高程序的效率和可维护性。

常见的数据结构包括：

数组（Array）：一种线性数据结构，可以存储相同类型的元素，并通过下标来访问元素；
链表（Linked List）：一种线性数据结构，由一系列节点组成，每个节点包含一个数据元素和一个指向下一个节点的指针；
栈（Stack）：一种基于 LIFO（Last In First Out）原则的数据结构，可以用于存储和管理函数调用、表达式求值等场景；
队列（Queue）：一种基于 FIFO（First In First Out）原则的数据结构，可以用于存储和管理任务、消息等场景；
树（Tree）：一种非线性数据结构，由一组节点和一组边组成，用于表示层次关系或者树形结构；
图（Graph）：一种非线性数据结构，由一组节点和一组边组成，用于表示复杂的关系网络。
数据结构的选择应该根据具体的场景和需求进行评估和选择。不同的数据结构有不同的特点和适用范围，开发人员应该了解各种数据结构的原理和应用场景，才能更加准确地选择和使用它们来解决实际的问题。

数据结构

WebAssembly（简称Wasm）是一种可移植、体积小、加载快速的二进制格式，旨在为Web上的高性能应用程序提供一种通用的运行时环境。WebAssembly是一种面向网络的技术，它可以在Web浏览器中运行，并且可以与各种编程语言集成。

WebAssembly的主要特点包括：

跨平台：WebAssembly可以在多种平台上运行，包括Web浏览器、桌面应用程序和移动应用程序等。

二进制格式：WebAssembly使用一种紧凑的二进制格式，可以在网络上传输并快速加载。

高性能：WebAssembly的执行速度非常快，可以与本地代码媲美。

安全：WebAssembly使用沙箱技术，可以在Web浏览器中提供安全的执行环境，防止恶意代码攻击。

可扩展：WebAssembly可以与各种编程语言集成，并支持通过插件实现自定义功能。

WebAssembly的开发模式类似于编译型语言，开发人员可以使用C++、Rust和其他编程语言来编写WebAssembly模块，然后将其编译为WebAssembly二进制格式。然后，这些模块可以在Web浏览器中使用JavaScript API进行加载和执行。

WebAssembly可以用于各种应用场景，包括Web游戏、多媒体应用程序、虚拟现实和增强现实应用程序、数据可视化等。它可以提供高性能、低延迟、可移植的解决方案，可以为Web应用程序提供更好的用户体验和更高的性能。

WebAssembly

PostgreSQL 是一种关系型数据库管理系统，负责存储和查询结构化数据（如表格数据）。它采用类似于 SQL 语言的接口，并遵循许多 SQL 标准。PostgreSQL 是一个强大、安全、可扩展和稳定的数据库平台，广泛应用在众多应用系统中。它是开源软件，可以在许多不同的操作系统上运行。

Postgresql

i18next 是一个功能齐全的 i18n javascript 库，用于翻译您的 Web 应用程序。

i18next

HarmonyOS是华为全场景战略中面向开发者开发的操作系统系列，适用于移动办公、健身健康、社交通讯、媒体娱乐等领域。HarmonyOS 是基于一套系统能力而设计的分布式架构。它能够在多种设备形式上运行，包括手机、平板电脑、可穿戴设备、智能电视、主机。

HarmonyOS

GitHub是一个基于web的托管服务，用于使用Git进行版本控制的软件开发项目。使用这个标签来解决与GitHub上托管的存储库有关的问题、GitHub特有的功能以及使用GitHub与其他用户协作的问题

Github

Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。它提供了构建和管理JavaScript程序的工具，尤其适用于处理数组、数字、对象、字符串等的操作。Lodash通过引入一系列有用的函数来简化日常开发任务，这些函数帮助开发者编写更简洁、更易维护的代码，并提高开发效率。

Lodash

OpenCV.js 是 OpenCV（Open Source Computer Vision Library）库的 JavaScript 版本，它是一个面向实时计算机视觉任务的开源库。原始的 OpenCV 是用 C++ 编写的，它支持多种操作系统并且提供了 Python、Java 和其他语言的接口。OpenCV.js 则通过 Emscripten 编译器将 OpenCV 的 C++ 代码编译为 JavaScript，使得开发者能够在Web浏览器端利用 OpenCV 的强大功能进行图像处理和计算机视觉任务。

Opencv.js

Redux 是一个流行的 JavaScript 状态管理库，主要用于管理复杂应用的状态。它由 Dan Abramov 和 Andrew Clark 创建，并受到了 Flux 架构的启发。Redux 的核心理念是维护一个单一的全局状态对象，所有的状态变更都通过一种叫做“action”的方式来描述，然后这些 action 会通过“reducer”函数来更新状态。

Redux

在前端技术的跃进浪潮中，一个框架脱颖而出 —— Koa.js，它是由Express原班人马打造的新一代Node.js框架。为什么它能成为时下热议的焦点？因为Koa.js以其简洁的设计，强大的功能和对现代JavaScript特性（如async/await）的天然支持，重新定义了后端的开发模式。
简洁：Koa.js提供了一个轻量的函数库，让你能够快速搭建服务器。
现代化：它采用最新的JS特性，使得代码更加直观且易于管理。
灵活：通过中间件机制，你可以轻松扩展功能，实现定制化的解决方案。
性能：Koa.js注重性能优化，可以建立更快、更稳定的网络应用。
不仅如此，Koa.js的优雅编程体验和提升的开发效率，让前端工程师的技能得到了全方位的提升。它不是简单的技术更迭，而是前端领域的一次革新旅程。

Service Worker 是一种运行在浏览器背后的脚本，充当网站和浏览器之间的代理服务器。它能够在浏览器背景中运行，即使用户没有访问网页也是如此。Service Worker 的引入使得开发者能够创建更加丰富和可靠的用户体验，特别是离线体验和网络性能优化方面。



Service Worker

2015年版的ECMAScript规范，现在是一个标准（ECMAScript 2015）。



SEO（Search Engine Optimization，搜索引擎优化）是一系列策略、技术和优化的实践，旨在提高网站在搜索引擎中的排名，并增加网站的可见性。SEO的核心目的是吸引更多的自然（非付费的）流量至网站，特别是来自搜索引擎的流量。

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人类阅读和编写，同时也易于机器解析和生成。它是完全独立于编程语言的，但使用了类似于JavaScript对象语法的约定，这些特性使得JSON成为理想的数据交换语言。

JSON

区块链（Blockchain）是一种分布式数据库或账本技术，它通过在多个计算机节点上复制和分发数据库来实现数据的去中心化存储。每个数据区块都包含一系列交易，并通过加密算法链接到前一个区块，形成一个链式结构。这种结构与密码学的结合，使得区块链在数据一旦写入后就难以被篡改或删除，从而保障了数据的不变性和安全性。

Blockchain

TensorFlow 是一个专为深度学习而设计的开源库和 API，由 Google 编写和维护。将此标签与特定于语言的标签（[python]、[c++]、[javascript]、[r] 等）结合使用，以解决有关使用 API 解决机器学习问题的问题。TensorFlow API 可以使用的编程语言各不相同，因此您必须指定编程语言。

Tensorflow

ESLint 是一个开源的 JavaScript 和 JSX 的静态代码分析工具，用于识别和报告在代码中发现的模式。它的主要目的是帮助开发者遵循一致的编码风格和避免错误。ESLint 是可配置的，这意味着开发者可以启用或禁用规则，并且可以调整错误级别。

ESLint

Cookie（也称为网页cookie、浏览器cookie）是由网站创建的小型文本文件，当用户浏览该网站时，它被存储在用户的设备上。Cookie 的主要作用是帮助网站记住关于您的访问信息，比如登录状态、用户偏好设置、购物车中的物品等，从而在您再次访问网站时能够提供更个性化的用户体验。

Cookie

React Hooks 是 React 16.8 版本引入的新特性，它允许在不编写 class 组件的情况下使用 state 和其他 React 特性。Hooks 提供了一种更简洁直观的方式来编写函数组件并复用状态逻辑。

React Hook

设计模式（Design Pattern）是一种解决软件设计问题的经验总结和最佳实践，它们是针对常见问题和场景的通用解决方案。设计模式可以帮助开发人员更加灵活和高效地构建软件系统，提高代码的可重用性、可维护性和可扩展性。

常见的设计模式包括：

创建型模式：用于创建对象的模式，包括单例模式、工厂模式、抽象工厂模式、建造者模式、原型模式等；
结构型模式：用于组织对象的模式，包括适配器模式、装饰器模式、代理模式、桥接模式、组合模式、享元模式等；
行为型模式：用于管理对象之间的交互和流程的模式，包括观察者模式、迭代器模式、模板方法模式、策略模式、命令模式、职责链模式、状态模式、访问者模式、备忘录模式、中介者模式等。
设计模式的优点在于它们是经过验证的最佳实践，可以帮助开发人员避免常见的设计错误和陷阱，提高代码的质量和可维护性。同时，设计模式也是一种共享的语言和思想，可以促进开发人员之间的沟通和合作。

然而，设计模式并不是一种万能的解决方案，它们应该根据具体的场景和需求进行选择和使用。在实际的开发中，开发人员应该深入了解各种设计模式的原理和应用场景，才能更加准确地使用它们来解决实际的问题。

设计模式

MongoDB 是一种流行的开源 NoSQL 数据库，它使用灵活的文档存储模型，可以存储结构化或非结构化的数据。MongoDB 的文档是类 JSON（JavaScript Object Notation）的格式，称为 BSON（Binary JSON），可以存储比标准 JSON 更复杂的数据类型。MongoDB 设计用于大规模的数据存储，提供了高性能、高可用性和自动扩展。

MongoDB

Apache Kafka 是一个开源的流处理平台，由 LinkedIn 开发，并于 2011 年贡献给 Apache 软件基金会。它主要用于构建实时的数据管道和流应用程序。Kafka 能够以高吞吐量、可扩展性和容错性的方式处理数据流。

Kafka

操作系统（Operating System, OS）是管理计算机硬件与软件资源的系统软件，它是计算机系统中最基本的软件之一。操作系统的核心功能是提供一个让应用程序与硬件交互的环境，同时也负责管理和协调硬件资源，使用户和程序能够更有效地使用计算机。

操作系统

Web3 被吹捧为互联网的未来，这个基于区块链的新网络的愿景包括加密货币、NFT、DAO、去中心化金融等。

Web3

Vite 是一种构建工具，旨在为现代网络项目提供更快，更精美的开发体验。

Vite

Google Chrome是一款由Google开发的免费网页浏览器，首次发布于2008年。Chrome以其简洁的用户界面、高性能和安全性而广受欢迎，很快成为世界上使用最广泛的浏览器之一。它是基于开源项目Chromium进行开发的，而Chromium项目也同时为其他开发者提供了构建自己浏览器的基础。

Chrome

终端（Terminal）通常指的是一个文本输入和输出环境，它提供了一个用户界面，用户可以在其中运行命令、程序，以及管理文件和目录。在现代操作系统中，终端模拟器是一种软件，它模仿了早期硬件终端的功能。

Terminal

自然语言处理 (NLP) 是一种机器学习技术，使计算机能够解读、处理和理解人类语言。如今，组织具有来自各种通信渠道（例如电子邮件、短信、社交媒体新闻源、视频、音频）的大量语音和文本数据。他们使用 NLP 软件自动处理这些数据，分析消息中的意图或情绪，并实时响应人际沟通。

Prettier 是一款流行的代码格式化工具。 它支持的语言相当多。 它很纯粹，就一个代码格式化工具，并不会做代码质量的检查。 Prettier 会强制使用统一的代码风格，原理就是解析语言生成AST 抽象语法树，然后用自己的一套风格写回到文件。

Prettier

Yarn 是一个快速、可靠、安全的 JavaScript 包管理器，由 Facebook 开发并于 2016 年发布。Yarn 的出现是为了解决当时 npm 在一些方面的不足，如性能、安全性以及一致性等问题。Yarn 在性能和依赖管理上的一些改进使得它迅速获得了广泛的采用。

Yarn

虚拟现实（Virtual Reality，简称 VR）是一种通过计算机技术创建的模拟环境，它使用户能够沉浸在一个三维空间中，并与环境进行交互。这种技术通过专门的硬件，如头戴显示器（HMD）、手柄和传感器，实现用户的视觉、听觉甚至触觉的模拟。

算法（Algorithm）是解决特定问题的有限步骤序列，是一系列定义明确的指令。在计算机科学和数学中，算法通常用于数据处理、计算和自动推理任务。正确的算法会在给定输入的情况下按预定步骤执行并最终产生输出或确认解决方案。

算法

Babel（以前称为 6to5）是一个 JavaScript 编译器，它将 ES6+/ES2015 代码转换为 ES5 代码。

Babel

Python 是一种动态类型、多用途的编程语言。它旨在快速学习、理解和使用，并强制执行干净且统一的语法。

Python

Three.js 是一个基于WebGL的高级JavaScript库，它允许开发者在网页上创建和显示3D图形内容。通过提供一组简洁的API，Three.js 使开发者能够轻松地在浏览器中创建复杂的3D场景、模型、相机、材质、光源和动画，而无需直接处理WebGL的复杂性。

Three.js

DevOps是一个文化和专业实践的集合，旨在缩短系统开发生命周期，同时提供高质量的软件。它是开发(Dev)和运维(OPS)两个词的组合，强调软件开发（Dev）和IT运维（Ops）之间的沟通、协作、集成和自动化，以提高软件交付的速度和质量。DevOps旨在构建一个环境，其中设计、测试和发布软件可以快速、频繁且更可靠地进行。

Devops

Lottie 是一个流行的开源库，用于在移动设备、Web 和其他平台上渲染高质量的动画。这些动画由 Adobe After Effects 制作并导出为 JSON 格式，然后利用 Lottie 轻松地嵌入到任何应用或网站中。Lottie 是由 Airbnb 设计团队开发的，它使设计师和开发者能够在不牺牲性能和质量的情况下，使用简单的动画文件在多个平台上实现复杂的动画效果。

Lottie

MySQL 是一款流行的关系型数据库管理系统（RDBMS）。它负责存储、检索和管理结构化数据，尤其是以表格形式存储的数据。MySQL 使用 SQL（Structured Query Language，结构化查询语言）作为查询和操作数据的接口，并遵循许多 SQL 标准。它是一种兼具性能、可靠性和易用性的数据库系统，适用于各种应用场景，从个人项目到大型企业应用。

MySQL

Sequelize 库为 Node.js 提供了一个完全用 JavaScript 编写的 ORM（对象关系映射器）。为 MySQL、MariaDB、SQLite、PostgreSQL 和 SQL Server 提供简单的映射。

Sequelize

cURL（Client URL）是一个广泛使用的命令行工具和库，用于传输数据，支持多种协议，包括 HTTP、HTTPS、FTP、SFTP 等。cURL 非常强大，它允许你在命令行中执行各种数据传输操作，如下载和上传文件，以及与服务器交互。

cURL

Svelte 是一个组件框架——就像 React 或 Vue。主题问题包括使用 Svelte 的代码以及如何配置它并在 JavaScript 管道中使用它。

Svelte

Docker 是一个开源的容器化平台，允许开发者打包应用及其全部依赖到一个可移植的容器中，然后这个容器可以在任何机器上运行，确保应用在不同环境之间运行的一致性。Docker 使用了 Linux 容器（LXC）的技术，但进行了扩展，使其更为易用、功能更全面。

Docker

网络浏览器或互联网浏览器是一种软件应用，用于检索、展示和浏览世界广域网上的信息资源。

Browser

Promise 是一种用于延迟计算的策略，适用于多种并发风格：用于本地计算的线程和事件循环并发，以及同步和异步远程消息传递。Promise 代表一个异步操作的最终结果。使用 Promises 的主要方式是通过一个方法，该方法注册从 promise 的最终值或失败原因到新 promise 的转换。

Promise

query-string 是一个JavaScript库，用于解析和字符串化URL查询字符串。它提供了一些简单易用的函数来处理URL查询参数。与原生的Web API URLSearchParams 相比，query-string 提供了更多的功能和更好的浏览器兼容性。

Query String

Bun 是 JavaScript 和 TypeScript 应用程序的一体化运行时。 使用一种快速工具运行、捆绑和测试应用程序。

远程过程调用（Remote Procedure Call，简称 RPC）是一种计算机通信协议，允许一台计算机（客户端）执行另一台计算机（服务器）上的程序或过程，就好像它是本地程序一样。RPC 隐藏了底层的网络通信细节，使得开发分布式应用程序变得更简单。

Recoil 定义了一个有向图 (directed graph)，正交同时又天然连结于你的 React 树上。状态的变化从该图的顶点（我们称之为 atom）开始，流经纯函数 (我们称之为 selector) 再传入组件。

Recoil

React Router 是React中用于路由的标准库。它支持在React应用程序中各种组件的视图之间导航，允许更改浏览器URL，并使UI与URL保持同步。

React Router

Less（Leaner Style Sheets）是一个动态样式语言，它扩展了CSS（层叠样式表）的功能，提供了变量、嵌套、混入（Mixins）、运算和函数等特性，使得CSS的编写更加高效和易于维护。Less 是一种预处理器，它将扩展的样式信息编译成标准的CSS，以供浏览器使用。

Less

DNS（Domain Name System）是互联网的一种服务，它作为将域名和IP地址相互映射的翻译系统，使得用户可以通过输入易于记忆的域名（例如 www.example.com）来访问网站，而不必记住复杂的数字IP地址（例如 192.0.2.1）。DNS 使用分布式数据库和层次化设计来完成域名到IP地址的转换，以及反向的过程。

大型语言模型（LLM）是基于大量数据进行预训练的超大型深度学习模型。底层转换器是一组神经网络，这些神经网络由具有自注意力功能的编码器和解码器组成。编码器和解码器从一系列文本中提取含义，并理解其中的单词和短语之间的关系。

Nginx 是一个网络和代理服务器。Nginx (发音为 "engine-x") 是一个高性能的 HTTP 和反向代理服务器，同时也是一个 IMAP/POP3 代理服务器。Nginx 是由 Igor Sysoev 开发的，最初发布于2004年，旨在解决 C10k 问题，即同时处理大量客户端连接的需求。由于其高性能、稳定性、丰富的功能集以及低资源消耗，Nginx 在全球范围内广泛用于提供网页内容，特别是在高流量的网站中非常流行。

Nginx

SQLite 是一个开源软件库，它实现了独立、无服务器、零配置、事务性 SQL 数据库引擎。SQLite 是世界上部署最广泛的 SQL 数据库引擎。

Sqlite

Vim 是一种高度可配置的文本编辑器，用于有效地创建和更改任何类型的文本。它是从 vi 编辑器衍生出来的，最初由 Bram Moolenaar 于 1991 年发布。Vim 是自由和开源软件，并且包含了许多增强功能，使其成为程序员和文本编辑者广泛使用的工具之一。

CSV（Comma-Separated Values，逗号分隔值）是一种广泛使用的数据文件格式，用于存储表格数据（数字和文本）在纯文本中。每一行的数据对应表格中的一行，而每一行中的列则通常由逗号分隔（虽然也可以使用其他字符，如制表符或分号）。CSV 文件格式简单，易于读写，且被大多数表格编辑应用程序（如 Microsoft Excel、Google Sheets 和 OpenOffice Calc）以及许多编程语言支持。

可伸缩矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。

Redis (Remote Dictionary Server) 是一个开源的、基于内存的高性能键值存储数据库，它通常被用作数据库、缓存或消息传递系统。由于其极高的性能和灵活的数据结构，它适用于各种场景，包括实时应用程序、高速缓存策略和任务队列。

Redis

Storybook 是一个开源工具，用于开发UI组件并将它们分别独立于应用程序的上下文进行测试。它为开发者提供了一个沙盒环境，可以在其中创建和展示UI组件的不同状态和变体，而无需担心应用程序特定的依赖和要求。