本文是记录GO微服务开发的学习，以前用过一点Go-Zero但是没深入，本文从Grpc go开始

## Grpc for Golang


## Go-Zero

Go微服务学习

前两天自己琢磨着用Redux，管理登陆状态

大概项目结构如下
```
|--src
 |--index.js
 |--mods
  |--authSlice.js
  
```
为什么不用TS?刚开始写React不久，先等我用熟练了再换吧，不然学习过程很痛苦！但是Nest.js肯定是要用的

接下来是一个示例，目前我还只用Redux来管理全局数据或者多页面需要访问的数据



### 1. 创建 Redux Slice

我们将使用 Redux Toolkit 的 `createSlice` 来创建一个 slice，用于管理 token 状态。

```javascript
// src/store/authSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  token: null,
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setToken: (state, action) => {
      state.token = action.payload;
    },
    clearToken: (state) => {
      state.token = null;
    },
  },
});

export const { setToken, clearToken } = authSlice.actions;
export default authSlice.reducer;
```

### 2. 创建 Redux Store

接下来，创建 Redux store，并将 `authSlice` 添加到 store 中。

```javascript
// src/store/store.js
import { configureStore } from '@reduxjs/toolkit';
import authReducer from './authSlice';

const store = configureStore({
  reducer: {
    auth: authReducer,
  },
});

export default store;
```

### 3. 在 React 应用中使用 Redux

在 `index.js` 中，使用 `Provider` 将 Redux store 注入到 React 应用中。

```javascript
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/store';
import App from './App';

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

### 4. 创建 React 组件

创建一个简单的 React 组件来展示和更新 token 状态。

```javascript
// src/App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setToken, clearToken } from './store/authSlice';

function App() {
  const token = useSelector((state) => state.auth.token);
  const dispatch = useDispatch();

  const handleLogin = () => {
    // 模拟登录，获取 token
    const newToken = 'example-token';
    dispatch(setToken(newToken));
  };

  const handleLogout = () => {
    dispatch(clearToken());
  };

  return (
    <div>
      <h1>Login Status</h1>
      {token ? (
        <div>
          <p>Logged in with token: {token}</p>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <div>
          <p>Not logged in</p>
          <button onClick={handleLogin}>Login</button>
        </div>
      )}
    </div>
  );
}

export default App;
```



Redux实践

整理一些React学习资源，后面深入的时候看看

[React技术揭秘](https://react.iamkasong.com/renderer/beforeMutation.html#%E6%A6%82%E8%A7%88)

[Web前端面试题](https://vue3js.cn/interview/React/Fiber.html#%E4%B8%80%E3%80%81%E9%97%AE%E9%A2%98)


[前端进阶](https://xypisces.github.io/guide/fiber.html)

[前端](https://www.front-interview.com/3_frame/react#react18%E7%9A%84useeffect%E4%BC%9A%E6%89%A7%E8%A1%8C%E4%B8%A4%E6%AC%A1)

React学习资源

## ~に足る
「~に足る」是一个日语语法结构，用来表示“值得……”或“有……的价值”。这个结构强调了某事或某人具有足够的价值或重要性，以至于值得采取某种行动或值得被认真对待。它通常用于表达对某事的评价或判断，指出某事是值得的。

接续方式：
「名詞」 + 「に足る」

例句从简单到复杂：

1. この問題は真剣に考えるに足る。
     （这个问题值得认真考虑。）

2. 彼の意見は一聴に足る。
     （他的意见值得一听。）

3. この映画は見るに足る。
     （这部电影值得一看。）

4. 彼女の努力は賞賛に足る。
     （她的努力值得赞扬。）

5. この提案は検討に足る。
     （这个提案值得讨论。）

「~に足る」这个结构在日语中常用于表达对某事的评价或判断，指出某事是值得的。它在口语和书面语中都广泛使用，特别是在强调某事的价值或重要性时。

## ~に堪える
「~に堪える」和「~に堪えない」是日语中的两个表达方式，用来表示“忍受……”或“无法忍受……”。

1. 「~に堪える」
这个结构用来表示某人或某物能够忍受或承受某种情况或行为，即使它是困难的、痛苦的或不愉快的。

接续方式：
「名詞」 + 「に堪える」

例句：
- 彼は辛い仕事にも堪える。
   （他能够忍受艰苦的工作。）

- この寒さにも堪える。
   （能够忍受这种寒冷。）

2. 「~に堪えない」
这个结构用来表示某人或某物无法忍受或承受某种情况或行为，即使它是困难的、痛苦的或不愉快的。

接续方式：
「名詞」 + 「に堪えない」

例句：
- 彼女は悲しみに堪えない。
   （她无法忍受悲伤。）

- この痛みには堪えない。
   （无法忍受这种疼痛。）

「~に堪える」和「~に堪えない」这两个结构在日语中常用于表达对某事的忍受能力或无法忍受的程度，它们在口语和书面语中都广泛使用。

## ~といったらない
「~といったらない」是一个日语语法结构，用来表示“无法用言语表达……”或“非常……”。这个结构强调了某事的程度或强度非常高，以至于难以用言语来描述。它通常用于表达强烈的情感或感受，如惊讶、喜悦、愤怒等。

接续方式：
「形容詞・形容動詞語幹」 + 「といったらない」

例句从简单到复杂：

1. 彼の努力には感動したといったらない。
    （对他的努力感到非常感动。）

2. 彼女は喜びに満ちあふれていたといったらない。
    （她充满了喜悦。）

3. この映画は面白くて、笑いが止まらなかったといったらない。
    （这部电影非常有趣，笑得停不下来。）

4. 彼の失敗には呆れてしまったといったらない。
    （对他的失败感到非常惊讶。）

5. この料理は美味しくて、食べるのが惜しいといったらない。
    （这道菜非常美味，吃起来都觉得可惜。）

「~といったらない」这个结构在日语中常用于表达强烈的情感或感受，它在口语和书面语中都广泛使用。


## ~かぎりだ
「~かぎりだ」是一个日语语法结构，用来表示“最大限度地……”或“尽最大努力……”。这个结构强调了某事被做到极致或尽最大可能的程度。它通常用于表达对某事的强烈情感或决心，或者描述某事被做到极致的状态。

接续方式：
「動詞辞書形」 + 「かぎりだ」

例句从简单到复杂：

1. 今度の試合は全力を尽くすかぎりだ。
     （这次比赛要尽全力。）

2. 彼は一生懸命に勉強するかぎりだ。
     （他要尽最大努力学习。）

3. このプロジェクトは全力を尽くすかぎりだ。
     （这个项目要尽全力。）

4. 彼女はこの仕事に全力を尽くすかぎりだ。
     （她要尽全力完成这项工作。）

5. 私たちはこの問題を解決するかぎりだ。
     （我们要尽全力解决这个问题。）

「~かぎりだ」这个结构在日语中常用于表达对某事的强烈决心或努力，它在口语和书面语中都广泛使用。


## ~極まる ~極まりない
「~極まる」和「~極まりない」是日语中的两个表达方式，用来表示“达到极点”或“极其……”。

1. 「~極まる」
这个结构用来表示某事达到了极点或顶点，强调了程度的最高点。

接续方式：
「形容詞辞書形」 + 「極まる」

例句：
- 彼の努力は感動極まる。
    （他的努力令人感动至极。）

- この景色は美しく極まる。
    （这景色美得无以复加。）

2. 「~極まりない」
这个结构用来表示某事极其……，强调了程度的最高点，并且通常带有负面含义。

接续方式：
「形容詞辞書形」 + 「極まりない」

例句：
- 彼の無責任極まりない態度に怒りを感じた。
    （对他极其不负责任的态度感到愤怒。）

- この問題は深刻極まりない。
    （这个问题极其严重。）

「~極まる」和「~極まりない」这两个结构在日语中常用于表达对某事程度的最高评价，它们在书面语中使用较多，特别是在文学作品或正式的表达中。

## ~とは
「~とは」是一个日语语法结构，用来表示“……是……”或“……意味着……”。这个结构用于定义或解释某个词语、概念或现象的含义或本质。它通常用于解释说明或定义，强调对某事物的准确理解。

接续方式：
「名詞」 + 「とは」

例句从简单到复杂：

1. 勇気とは、困難に立ち向かう力だ。
     （勇气是面对困难的力量。）

2. この言葉の意味とは、一体何だろうか。
     （这个词语的意思到底是什么呢？）

3. 彼の言動とは、一体何を意味しているのだろうか。
     （他的言行到底意味着什么呢？）

4. この現象とは、一体何を示しているのだろうか。
     （这个现象到底意味着什么呢？）

5. 彼の成功とは、努力と才能の結晶だ。
     （他的成功是努力和才能的结晶。）

「~とは」这个结构在日语中常用于解释说明或定义，它在口语和书面语中都广泛使用，特别是在解释概念或定义时。

N1文法第十九弹--评价，感想

React Hooks 是 React 16.8 引入的新特性，允许你在函数组件中使用状态和其他 React 特性，而不需要编写类组件。

### 1. 基础 Hooks

#### `useState`
用于在函数组件中添加状态。

```jsx
const [state, setState] = useState(initialState);
```

- `initialState`: 状态的初始值。
- `state`: 当前状态值。
- `setState`: 更新状态的函数。

#### `useEffect`
用于在函数组件中执行副作用操作（如数据获取、DOM 操作等）。

```jsx
useEffect(() => {
  // 副作用操作
  return () => {
    // 清理操作（可选）
  };
}, [dependencies]);
```

- `dependencies`: 依赖项数组，当数组中的值发生变化时，副作用函数会重新执行。

#### `useContext`
用于在函数组件中访问 React 的 Context。

```jsx
const value = useContext(MyContext);
```

- `MyContext`: 创建的 Context 对象。
- `value`: Context 中的值。

### 2. 额外的 Hooks

#### `useReducer`
用于在函数组件中管理复杂的状态逻辑。

```jsx
const [state, dispatch] = useReducer(reducer, initialState, init);
```

- `reducer`: 状态更新函数。
- `initialState`: 初始状态。
- `init`: 可选的初始化函数。
- `state`: 当前状态。
- `dispatch`: 分发 action 的函数。

#### `useCallback`
用于缓存函数，避免在每次渲染时重新创建函数。

```jsx
const memoizedCallback = useCallback(() => {
  // 函数体
}, [dependencies]);
```

- `dependencies`: 依赖项数组，当数组中的值发生变化时，函数会重新创建。

#### `useMemo`
用于缓存计算结果，避免在每次渲染时重新计算。

```jsx
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```

- `computeExpensiveValue`: 计算函数。
- `dependencies`: 依赖项数组，当数组中的值发生变化时，计算函数会重新执行。

#### `useRef`
用于在函数组件中创建一个可变的引用，通常用于访问 DOM 元素或保存可变值。

```jsx
const refContainer = useRef(initialValue);
```

- `initialValue`: 初始值。
- `refContainer.current`: 引用的当前值。

### 3. 其他 Hooks

#### `useImperativeHandle`
用于自定义通过 `ref` 暴露给父组件的实例值。

```jsx
useImperativeHandle(ref, createHandle, [dependencies]);
```

- `ref`: 传递给组件的 `ref`。
- `createHandle`: 创建要暴露的实例值的函数。
- `dependencies`: 依赖项数组。

#### `useLayoutEffect`
与 `useEffect` 类似，但在所有 DOM 变更之后同步调用。主要用于测量布局。

```jsx
useLayoutEffect(() => {
  // 副作用操作
  return () => {
    // 清理操作（可选）
  };
}, [dependencies]);
```

#### `useDebugValue`
用于在 React DevTools 中显示自定义 Hook 的标签。

```jsx
useDebugValue(value);
```

- `value`: 要显示的值。

### 4. 自定义 Hooks

你可以根据需要创建自定义 Hooks，以复用逻辑。自定义 Hooks 的命名通常以 `use` 开头。

```jsx
function useCustomHook() {
  const [state, setState] = useState(initialState);
  // 其他逻辑
  return state;
}
```

