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;
}
```



React常见内置Hook

## ~までもない
「~までもない」是一个日语语法结构，用来表示“没有必要……”或“不需要……”。这个结构强调了某事是显而易见的，或者某人不需要做某事，因为结果或结论是显而易见的。它通常用于表达没有必要采取某个行动或进行某个讨论，因为事情已经很明显或已经解决了。

接续方式：
「動詞辞書形」 + 「までもない」

例句从简单到复杂：

1. その問題は簡単だから、説明するまでもない。
    （那个问题很简单，没有必要解释。）

2. 彼はすでに知っているから、教えるまでもない。
    （他已经知道了，没有必要教他。）

3. その映画は面白くないから、見るまでもない。
    （那部电影不有趣，没有必要看。）

4. その事実が明らかだから、議論するまでもない。
    （那个事实已经很明显了，没有必要讨论。）

5. 彼女はとても賢いから、助言するまでもない。
    （她很聪明，不需要建议。）

「~までもない」这个结构在日语中常用于表达没有必要采取某个行动或进行某个讨论，因为它已经很明显或已经解决了。它在口语和书面语中都广泛使用。


## ~までだ
「~までだ」和「~までのことだ」是日语中表示“仅此而已”或“就是这么回事”的语法结构。这两个结构用来表达某事或某行为的简单性或直接性，强调没有其他复杂的原因或理由。它们通常用于表达对某事的简洁解释或说明，暗示事情的简单本质。



1. 「~までだ」
这个结构用来表示某事的简单性或直接性，强调没有其他复杂的原因或理由。

接续方式：
「動詞辞書形」 + 「までだ」

例句：
- ただ単に忘れていただけまでだ。
   （只是忘记了而已。）

- 彼が来ないのは、ただ忙しいまでだ。
   （他不来只是因为忙而已。）

2. 「~までのことだ」
这个结构用来表示某事的简单性或直接性，强调没有其他复杂的原因或理由，同时带有“就是这么回事”的语气。

接续方式：
「動詞辞書形」 + 「までのことだ」

例句：
- ただの勘違いまでのことだ。
   （只是误会而已。）

- 彼が嫌いなのは、ただ性格が合わないまでのことだ。
   （他不喜欢只是因为性格不合而已。）

「~までだ」和「~までのことだ」这两个结构在日语中常用于口语和书面语，用来简洁地解释或说明某事，强调事情的简单本质。它们可以用于各种情境，从日常对话到正式的解释说明。

## ~ばそれまでだ
「~ばそれまでだ」是一个日语语法结构，用来表示“如果……就完了”或“如果……就一切都结束了”。这个结构强调了某个条件或情况如果成立，就会导致某种负面的结果或结束。它通常用于表达警告或提醒，指出某个行为或情况的严重后果。

接续方式：
「動詞仮定形」 + 「ば」 + 「それまでだ」

例句从简单到复杂：

1. 遅刻すればそれまでだ。
    （如果迟到就完了。）

2. 間違えればそれまでだ。
    （如果犯错就完了。）

3. その仕事を失敗すればそれまでだ。
    （如果那个工作失败就完了。）

4. その約束を守らなければそれまでだ。
    （如果不遵守那个约定就完了。）

5. そのミスを犯せば、プロジェクトはそれまでだ。
    （如果犯了那个错误，项目就完了。）

「~ばそれまでだ」这个结构在日语中常用于表达警告或提醒，指出某个行为或情况的严重后果。它在口语和书面语中都广泛使用，特别是在强调某种条件或行为的严重性时。


## ~には当たらない
「~には当たらない」是一个日语语法结构，用来表示“没有必要……”或“不值得……”。这个结构强调了某事是不必要的，或者某人不需要做某事，因为结果或结论是显而易见的。它通常用于表达没有必要采取某个行动或进行某个讨论，因为事情已经很明显或已经解决了。

接续方式：
「動詞辞書形」 + 「には当たらない」

例句从简单到复杂：

1. その問題は簡単だから、説明するには当たらない。
     （那个问题很简单，没有必要解释。）

2. 彼はすでに知っているから、教えるには当たらない。
     （他已经知道了，没有必要教他。）

3. その映画は面白くないから、見るには当たらない。
     （那部电影不有趣，没有必要看。）

4. その事実が明らかだから、議論するには当たらない。
     （那个事实已经很明显了，没有必要讨论。）

5. 彼女はとても賢いから、助言するには当たらない。
     （她很聪明，不需要建议。）

「~には当たらない」这个结构在日语中常用于表达没有必要采取某个行动或进行某个讨论，因为它已经很明显或已经解决了。它在口语和书面语中都广泛使用。


## ~でなくてなんだるう(か)

「~でなくてなんだるう(か)」是一个日语语法结构，用来表示“如果不是……那是什么？”或“如果不是……那还能是什么呢？”。这个结构用于强调某个事物或情况的唯一性或不可替代性，通常用于反问句中，表达对某事物的确定性或对某情况的质疑。

接续方式：
「名詞」 + 「でなくてなんだるう(か)」

例句从简单到复杂：

1. この成功は君の努力でなくてなんだるうか。
     （如果不是你的努力，那这个成功是什么呢？）

2. この問題は彼の責任でなくてなんだるうか。
     （如果不是他的责任，那这个问题是什么呢？）

3. この作品は彼女の才能でなくてなんだるうか。
     （如果不是她的才能，那这个作品是什么呢？）

4. この失敗は君の不注意でなくてなんだるうか。
     （如果不是你的不注意，那这个失败是什么呢？）

5. この感動は彼の言葉でなくてなんだるうか。
     （如果不是他的话语，那这份感动是什么呢？）

「~でなくてなんだるう(か)」这个结构在日语中常用于表达对某事物的确定性或对某情况的质疑，它在口语和书面语中都广泛使用。

N1语法第十八弹--主张，断定

## ~たりとも～ない
「~たりとも～ない」是一个日语语法结构，用来表示即使是很小的数量或程度也不做某事，或者即使是很小的数量或程度也不允许某事发生。这个结构强调了即使是最小的部分也不被接受或允许，通常用于表达严格的要求或禁止。

接续方式：
「名詞」 + 「たりとも」 + 「動詞否定形」

例句从简单到复杂：

1. 一滴たりとも水を無駄にしないでください。
     （请不要浪费一滴水。）

2. 一瞬たりとも目を離さないでください。
     （请不要有一瞬间的疏忽。）

3. 一円たりとも無駄にしないでください。
     （请不要浪费一分钱。）

4. 一言たりとも言い訳を許しません。
     （我不会允许任何借口。）

5. 一歩たりとも後退しないでください。
     （请不要后退一步。）

「~たりとも～ない」这个结构在日语中常用于表达严格的要求或禁止，强调即使是最小的部分也不被接受或允许。它在书面语和正式场合的口语中使用较多。

## ～すら
「～すら」是一个日语语法结构，用来表示“甚至连……也……”或“即使……也……”。这个结构强调了即使是最小的部分或最不显眼的事物也具有某种特征或行为，或者即使是最小的部分或最不显眼的事物也未能幸免。它通常用于表达惊讶、失望或强调某种极端的情况。

接续方式：
「名詞」 + 「すら」
「動詞辞書形」 + 「すら」

例句从简单到复杂：

1. 彼は忙しくて、食事すら忘れている。
     （他很忙，甚至连饭都忘了吃。）

2. この問題は難しすぎて、専門家すら解けない。
     （这个问题太难了，即使是专家也解不开。）

3. 彼女は悲しすぎて、涙すら出ない。
     （她悲伤得连眼泪都流不出来。）

4. その映画はつまらなすぎて、観客すら退屈している。
     （那部电影无聊到连观众都感到厌烦。）

5. 彼は病気で、ベッドから起きるすらできない。
     （他因为生病，甚至连起床都做不到。）

「～すら」这个结构在日语中常用于表达惊讶、失望或强调某种极端的情况，它在口语和书面语中都广泛使用。


## ～だに
「～だに」是一个日语语法结构，用来表示“即使……也……”或“连……也……”。这个结构强调了即使是最小的部分或最不显眼的事物也具有某种特征或行为，或者即使是最小的部分或最不显眼的事物也未能幸免。它通常用于表达惊讶、失望或强调某种极端的情况。

接续方式：
「名詞」 + 「だに」
「動詞辞書形」 + 「だに」

例句从简单到复杂：

1. 彼は忙しくて、食事だに忘れている。
      （他很忙，甚至连饭都忘了吃。）

2. この問題は難しすぎて、専門家だに解けない。
      （这个问题太难了，即使是专家也解不开。）

3. 彼女は悲しすぎて、涙だに流れない。
      （她悲伤得连眼泪都流不出来。）

4. その映画はつまらなすぎて、観客だに退屈している。
      （那部电影无聊到连观众都感到厌烦。）

5. 彼は病気で、ベッドから起きるだにできない。
      （他因为生病，甚至连起床都做不到。）
## ～だに
「～だに」这个结构在日语中常用于表达惊讶、失望或强调某种极端的情况，它在口语和书面语中都广泛使用。抱歉，上文中出现了重复错误，我将重新组织回答：
「～だに」是一个日语语法结构，用来表示“即使……也……”或“连……也……”。这个结构强调了即使是最小的部分或最不显眼的事物也具有某种特征或行为，或者即使是最小的部分或最不显眼的事物也未能幸免。它通常用于表达惊讶、失望或强调某种极端的情况。

接续方式：
「名詞」 + 「だに」
「動詞辞書形」 + 「だに」

例句从简单到复杂：

1. 彼は忙しくて、食事だに忘れている。
   （他很忙，甚至连饭都忘了吃。）

2. この問題は難しすぎて、専門家だに解けない。
   （这个问题太难了，即使是专家也解不开。）

3. 彼女は悲しすぎて、涙だに流れない。
   （她悲伤得连眼泪都流不出来。）

4. その映画はつまらなすぎて、観客だに退屈している。
   （那部电影无聊到连观众都感到厌烦。）

5. 彼は病気で、ベッドから起きるだにできない。
   （他因为生病，甚至连起床都做不到。）

「～だに」这个结构在日语中常用于表达惊讶、失望或强调某种极端的情况，它在口语和书面语中都广泛使用。


## ～にして
「～にして」是一个日语语法结构，用来表示“即使是……也……”或“尽管……但是……”。这个结构强调了即使在某种特定的条件下，某事仍然成立或发生了。它通常用于表达对比或让步，指出即使在某种特定的条件下，情况或结果仍然如预期或相反。

接续方式：
「名詞」 + 「にして」
「動詞辞書形」 + 「にして」

例句从简单到复杂：

1. 小さいにして、彼女はとても強い。
    （尽管她个子小，但她非常坚强。）

2. 難しいにして、この問題は解ける。
    （尽管这个问题很难，但还是可以解决的。）

3. お金がなくても、彼は幸せだ。
    （即使没有钱，他也感到幸福。）

4. 一人でにして、彼はこの仕事を成し遂げた。
    （尽管是一个人，但他完成了这项工作。）

5. たとえ遠くにして、彼女は必ず来てくれるだろう。
    （即使很远，她也一定会来的。）

「～にして」这个结构在日语中常用于表达对比或让步，它在口语和书面语中都广泛使用。

## ～あっての
「～あっての」是一个日语语法结构，用来表示“正因为有……才……”或“有了……才有……”。这个结构强调了某个条件或事物的存在是实现另一个事物或情况的前提或必要条件。它通常用于表达因果关系，指出没有前者就没有后者。

接续方式：
「名詞」 + 「あっての」 + 「名詞/動詞」
「動詞辞書形」 + 「あっての」 + 「名詞/動詞」

例句从简单到复杂：

1. 彼あってのこの成功だ。
    （正因为有他，才有了这个成功。）

2. 仲間あっての勝利だ。
    （有了伙伴们，才有了胜利。）

3. 働くことあっての生活だ。
    （有了工作，才有生活。）

4. 健康あっての幸せだ。
    （有了健康，才有幸福。）

5. 信頼あっての友情だ。
    （有了信任，才有友情。）

「～あっての」这个结构在日语中常用于表达对某人或某事物的依赖或感激，它在口语和书面语中都广泛使用。


## ～からある、～からする、～からの
「～からある」、「～からする」、「～からの」是日语中表示数量、程度或价值的语法结构，它们用于强调某个事物的大小、价值或重要性。这些结构通常用于口语和书面语中，表达对某事物的评价或强调。

1. 「～からある」
这个结构用来表示某物的数量或大小达到了一定的程度，强调了数量或大小的显著性。

接续方式：
「名詞」 + 「からある」

例句：
- その箱にはリンゴが百個からある。
  （那个箱子里有超过一百个苹果。）

2. 「～からする」
这个结构用来表示某物的价值、价格或重要性达到了一定的程度，强调了价值或重要性的显著性。

接续方式：
「名詞」 + 「からする」

例句：
- この宝石は五百万円からする。
  （这个宝石价值五百万日元。）

3. 「～からの」
这个结构用来表示某物的来源或起点，强调了从某个特定的点或位置开始。

接续方式：
「名詞」 + 「からの」

例句：
- 彼はアメリカからの留学生だ。
  （他是从美国来的留学生。）

请注意，这些结构在现代日语中使用较少，它们可能在某些特定的语境或文学作品中出现。在日常会话中，人们通常会使用更加直接的表达方式来传达相同的意思。

N１语法第十七弹--强调

还是喜欢这样的路由管理，单独拆封成一个文件，
```jsx

import { createBrowserRouter } from 'react-router-dom';

import App from'../App';
import Login from '../pages/login/login';
import Home from '../pages/home/Home';


const routes = [
  {
    path: '/',
    element: <Navigate to="/login" replace />, // 重定向路由,replace 属性表示使用替换模式进行重定向，这样不会在历史记录中留下 / 路径的记录
  
  },
  {
    path: '/login',
    element: <Login/>
  },
  {
    path: '/home',
    element: <Home/>

  }
];


const router = createBrowserRouter(routes);
export default router;

```
想在React里面实现类似路由守卫的功能，也就是在前往/home页面的时候检测用户是否登录对访问进行拦截，在vue里面，使用下面的代码
```js
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token'); // 检查 localStorage 中的 token

  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 如果目标路由需要认证
    if (!isAuthenticated) {
      // 如果未登录，重定向到登录页面
      next('/login');
    } else {
      // 如果已登录，继续导航
      next();
    }
  } else {
    // 如果目标路由不需要认证，继续导航
    next();
  }
});

export default router;
```
在React我们可以用自定义Hook实现，使用useEffect hook，他会在组件渲染前进行执行一次，只需要在执行时检查用户凭证就好
刚开始是这样

```jsx
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const useAuth = () => {
  const navigate = useNavigate();

  useEffect(() => {
    // 检查 localStorage 中的 token
    const token = localStorage.getItem('token');

    if (!token) {
      navigate('/login', { replace: true });
    }
  }, [navigate]);

  return null;
};

export default useAuth;



// Home.jsx


const Home = () => {
    useAuth();
    return ...
}
```

这样的代码没问题，他会在跳转Home页面检查登陆凭证，并拦截跳转到Home,但是不完美，因为会出现一瞬间的Home页面，代表重定向前组件已经渲染，我们只需要做一点简单的判断，修改一下自定义Hook
```jsx
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const useAuth = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    // 检查 localStorage 中的 token
    const token = localStorage.getItem('token');

    if (token) {
      setIsAuthenticated(true);
    } else {
      navigate('/login', { replace: true });
    }
  }, [navigate]);

  return isAuthenticated;
};

export default useAuth;


// Home.jsx

  const isAuthenticated = useAuth(); // 使用自定义 Hook 进行权限检查

  if (!isAuthenticated) {
    return null; // 如果未认证，返回 null 不渲染组件
  }


```
但我不确定这是不是最佳实践



![image.png](/static/img/eca451e74a7736559298d485fb68a762.image.webp)

今晚就先这样
