# 项目模板

**Repository Path**: loy-77/template

## Basic Information

- **Project Name**: 项目模板
- **Description**: React+TS+Vite
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-05
- **Last Updated**: 2025-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + TypeScript + Vite

1. #### 从仓库地址克隆

```
git clone https://gitee.com/loy-77/template
```

2. #### 拉取代码

`git pull`

3. #### 安装依赖

`npm i` 或者 `yarn`

4. #### 启动项目

`npm run dev` 或者 `yarn dev`

***

### 全局状态管理

此项目全局状态管理采用的库为**`zustand`**，已进行selector封装处理。

创建store示例：

```typescript
interface Bear {
  count: number;
  bear: number;
}

export const useBear = createSelector(
  create<Bear>(() => ({
    count: 0,
    bear: 0,
  }))
);
```

使用store示例：

```typescript
const App: React.FC = () => {
  const [{ count, bear }, setBear] = useBear("count");
  
  return (
    <>
    // ...
      <button onClick={() => setBear((state) => ({ count: state.count + 1 }))}>
          count is {count}
      </button>
    // ...
    </>
  );
};

export default App;
```

- 其中`useBear(...)`传入的参数决定返回的状态是否为最新，比如`useBear("count")`则只有count为最新状态，也就是count变化时组件会重新渲染，其他的状态变化则不会影响组件重新渲染。
- 如果不传入任何参数`useBear()`则返回的所有状态都是最新的。
- 如果不需要使用状态只想通过setBear更改状态则可以传入"",也就是`useBear("")`。这样当状态改变时组件也不会重新渲染。

***

### eslint检测

此项目选择宽松检测，大部分都是警告warn； 比如：

- 使用console：警告
- 已声明的变量但是未使用：警告
- 在break、continue或是函数return写不会执行的代码：警告
- 模块重复导入：警告
- 条件语句中将 `==` 写成 `=`：报错
- ...

<br/>

可自行调整；