工作總結 - 前兩周 flex、context、版心布局、shadcn

評估工作量要看提純 - 單個不重復元素的多少，奇形怪狀的增加時間，而不是內容的長短，如果多重復那就沒什么做的，

第一個（首頁）時間長一點，后面的時間可以短，因為可以復用可以搭建。

如果不重復就很麻煩！！！！！

感覺得給單獨樣式留一整天，我這個改太慢了。！！！！很不熟悉。

我發現單獨打div然后tab就可以補全！

flex的布局問題，子元素放大縮小不能正常

子元素有問題：一個是px太長，一個是元素太長溢出，導致子項占比太長。

不管了，從頭開始。

一定要多用flex-shrik和grow，去定義，

style={{ minWidth: 0 }} // 確保能正常收縮

例子：下面這個雖然設置了flex1，但是也無法等比例顯示：因為fle

<div class="container">
  <div class="item">特別特別特別特別特別特別特別長的內容</div>
  <div class="item">正常內容</div>
  <div class="item">正常內容</div>
</div>

<style>
.container {
  display: flex;
  width: 600px;
  border: 2px solid red;
}

.item {
  flex: 1;
  border: 1px solid #ccc;
}
</style>

版心布局適配心得（！！！）

希望左邊寬度固定，右邊寬度自適應，最大寬度1440，用flex布局怎么實現？

可能的結構是將整個flex容器包裹在一個外層div中，外層div設置max-width:1440px和margin:auto，這樣在寬屏時居中顯示，內容不超過1440px。

左邊元素的寬度設為固定值，比如200px，右邊元素則使用flex:1，

正確的結構應該是外層div負責最大寬度和居中，內層flex容器負責左右布局

（不要用一層flex實現！！！！flex這里會有問題，擴大的時候直接左邊不見，且沒有滾動條，詳見上一篇。因為max width和flex有些沖突，是說！！！

shrink-0 不收縮。grow-0，不擴張（有多的情況下）

注意右邊超出的部分設置min-width: 0; /* 關鍵：允許內容收縮 */

不然右邊會大出一大塊，非常多。

即使是flex1了，但是如果沒有min-width 0 也會出現寬度不等的情況，尤其是存在一些字符串，字符串太長，刪掉字符串沒問題。字符串太長又設置了line-clamp-3，的情況下，就被給默認不允許壓縮了

PS: 樣式調試經驗：

git保存代碼后，里面內容直接清空換顏色塊，觀察是內部元素問題，還是父元素的樣式問題；

對于子元素，一塊一塊注釋，二分找錯誤地方。

子元素嚴格等寬度：

flex-1 shrink-0 basis-[calc((100%-2.5rem)/3)] grow-0 min-w-0

注意basis

code尚未驗證，但是意思真的差不多。

<!DOCTYPE html>
<html>
<head>
<style>
/* 外層容器 - 控制最大寬度和居中 */
.container-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px; /* 可選：添加左右內邊距 */
  box-sizing: border-box;
}

/* flex容器 */
.flex-container {
  display: flex;
  gap: 20px; /* 可選：列間距 */
  min-height: 100vh; /* 僅為演示高度 */
}

/* 左側固定寬度 */
.left-column {
  flex: 0 0 200px; /* 不增長，不收縮，固定200px */
  background: #f0f0f0;
  padding: 20px;
}

/* 右側自適應 */
.right-column {
  flex: 1; /* 占滿剩余空間 */
  min-width: 0; /* 關鍵：允許內容收縮 */
  background: #fff;
  padding: 20px;
}

/* 響應式處理（可選） */
@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }
  .left-column {
    flex-basis: auto;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="container-wrapper">
  <div class="flex-container">
    <div class="left-column">
      <h2>固定側邊欄</h2>
      <p>寬度固定為200px</p>
    </div>
    
    <div class="right-column">
      <h1>自適應內容區</h1>
      <p>此區域會自適應填充剩余空間</p>
      <p>最大寬度限制為1440px（包含左右邊距）</p>
    </div>
  </div>
</div>

</body>
</html>

（終于實現了。。。。先這樣吧，適配的再說了，搞太久了

誰能知道最后寬度不一致的原因是多寫了一個h-full呢。。。。

真的就純憑實驗。。。。。。。

注意，之前h-full的理解是錯的

當你設置 height: 100% 時，子元素會繼承父元素的完整高度（100vh），而不是"剩余高度"。CSS 的百分比高度是基于父元素的完整高度計算的，而不是基于"剩余可用空間"。

Flexbox 或 Grid 布局是解決這類問題的最佳方案，因為它們專門設計用于處理這種動態空間分配。

想實現的話，用flex-1和column來做

1.overflow-y-auto比scroll更好，auto是只有超過的時候才顯示進度條，scroll一直有

2.next 路由：只有page級別的，才能自動有路由，index.tsx不行，所以說大層的路由只有一個。

Next.js 13+ 版本中，引入了新的 App Router 系統，它使用 app 目錄而不是 pages 目錄，并且使用 page.tsx 文件（再之前是index.js ）現在pages

3. 不是，啊，svg的fill=currentColor是要用text-color去覆蓋的，直接bg更改的是后面的顏色是整體的，要text-color！！！！

為什么渲染了兩次？？？

?? 這個問題莫名其妙的好了？把console的報錯解決掉—- sheet.trigger里加了as child （不能button嵌套button）之后就解決了？？

shadcn/ui 的 Sheet 基于 Radix UI 的 Dialog 實現，其底層會通過 React Portal 將內容渲染到 <body> 末端。這會觸發

首次渲染：組件初始化
Portal 掛載：內容插入到 DOM 新位置，導致組件樹結構變化，觸發二次渲染

可以給sheet掛isopen才渲染

也可以用ref標記，雖然會二次渲染但是應該不會再影響接口了，

if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }

為什么fetch請求的headers看不了？因為headers內部封裝了，不可直接枚舉，無法正確序列化，打印也只是快照，得這樣

console.log('Headers 內容:', Object.fromEntries(requestHeaders.entries()));

fetch有一個 no-cors，但是只支持有限的請求頭，且不能自定義請求頭，而且看不到響應的信息！！！！！

此時的響應類型為opaque，然而在opaque的返回類型中，咱們簡直不能查看到任何有價值的信息，比方不能查看response，status, url。

tw規范

第一級，寬高邊距

第二級，ls

第三級，顏色

您直接使用 `useSWRMutation` 返回的 `data` 導致值未更新，原因是 SWR 的 `data` 狀態更新存在延遲，而您沒有正確等待異步操作完成

—- 子組件得包裹memo，否則讀取值都讀不到。。。

?? 跟這沒關系。。。得use effect去監聽，因為是運行時再去獲取的

useEffect是在DOM改變之后觸發，useMemo在DOM渲染之前就觸發
useMemo是在DOM更新前觸發的
父組件將一個 【值】傳遞給子組件，若父組件的其他值發生變化時，子組件也會跟著渲染多次，會造成性能浪費； useMemo是將父組件傳遞給子組件的值緩存起來，只有當 useMemo中的第二個參數狀態變化時，子組件才重新渲染useMemo便是用于緩存該函數的執行結果，僅當依賴項改變后才會重新計算
父組件將一個 【值】傳遞給子組件，若父組件的其他值發生變化時，子組件也會跟著渲染多次，會造成性能浪費； useMemo是將父組件傳遞給子組件的值緩存起來，只有當 useMemo中的第二個參數狀態變化時，子組件才重新渲染
useMemo便是用于緩存該函數的執行結果，僅當依賴項改變后才會重新計算

useMemo不會再參與dom渲染期間才需要變動的事情！！

tailwind css動態渲染

需要注意，只是不支持處理掉他預設的類名，比如 w-[100] —> w-[aaaa]

但是固定的動態計算還是好使的，比如 “” ： aaa=1這時候成立

憋動到樣式里面去就ok。

有關context

我理解，現在這更像是重寫provider的方式來去提供一個context

context的一般用法：

1 最外層 createContext，

2 之后用provider去提供context，

3 讀取的時候直接在組件內部use context

似乎可以直接在組件內部掉用set之類的方法，

但是一定得在組件內部，否則是用不了的

寫過的用法：

因為要對context進行處理且提出來邏輯，所以對context進行重寫

其實也就是最外層的邏輯嘛，要么在最外層大的那里寫，然后最外層那邊處理；要么在provider這一層寫。

沒毛病。

也是給被context包裹住的全局使用的。

ps: provider 自己也需要有個props，這也和直接在最外層使用還是提供一個provider一樣思路

有關refs

這我不會了。不理解。

ref用于不用use state的常量，或者是直接引用到相關的dom元素。

先create ref

再設置current

有關use refucer

狀態是一個對象，且需要多種修改方式時
修改邏輯復雜，需要集中管理（比如表單校驗、購物車）
狀態需要被多個子組件共享時（配合 Context API）

首先，聲明一個money reduceer，這里面封裝進去具體的操作，比如說什么存錢取錢，通過switch的方式，進行一個集合。

之后， const [state, dispatch] = useReducer(moneyReducer, { money: 0 }); 三個值，state原始數據，dispatch更改，reducer方法。

使用type和具體的參數來搞進變量。 dispatch({ type: '存錢', num: 10 }

那么如果用變量的方式寫，就是 —- （初始變量）

const [aaaRecord, dispatchStatus] = useReducer(
      aaaaReducer,
      initialStatus,
    );

而具體redux怎么用，還放在了一個文件

規范了一下每一個reducer應該傳遞什么文件進來，

對于dispatch就只需要傳類型和數據，具體的操作步驟是reducer人去做的。

有關 infinate scroll

不會寫，寫不來，教學一下，如果懂了可以更新到視頻的p2？？

enum

可以當變量。可參與計算、比較，不會像interface一樣擦除！！

shadcn

手動安裝后，需要把相關文件粘貼進組件庫

ShadCN 的整體設計可以分為「組件設計」和「CLI 設計」

它的cli也是添加一個文件

ui/ 后面的文件，最好可以不用動～

平滑滾動

子元素還要設置snap-start

也就是父元素：

　　scroll-snap-type: x mandatory;（強制

　　scroll-snap-type: x proximity;（不強制 x軸）

子元素還要：

.snap-start {
　　　　scroll-snap-align: start;
　　}

inline 'start' 'center' 'end' 'nearest' 控制橫向滾動對齊方式（核心參數）

block 同上控制縱向滾動對齊方式（設為 nearest 可避免縱向干擾）
```
element.scrollIntoView({
  behavior: 'smooth',  // 滾動動畫
  block: 'nearest',    // 垂直方向不強制對齊
  inline: 'center'     // 水平方向居中（關鍵參數）
});
```
關鍵是要通過id獲取到元素

`inline`	`'start'` `'center'` `'end'` `'nearest'`	控制橫向滾動對齊方式（核心參數）
`block`	同上	控制縱向滾動對齊方式（設為 `nearest` 可避免縱向干擾）

簡化版新組件【看這個！】

import { FC, memo } from 'react';
const Corner: FC = () => {
  return <></>;
};

export default memo(Corner);

多用語義化反正原生的標簽樣式都無了

sectionn

ul 后li，作為for的迭代

shadcn 使用casourle

關鍵代碼：一定要寫上setApi才能獲取，setapi就素在操作數據了。

   	opts={{
          align: 'center',
          startIndex: startIndex,
        }}
        setApi={setApi}

as child屬性

控制組件是否將自身渲染為直接子元素（child）的容器

asChild={false}（默認）：組件渲染為自身默認的 DOM 元素（如 <button>）
asChild={true}：組件會將第一個子元素作為渲染根節點，同時將自身的屬性和樣式透傳給該子元素

主要是用于透傳東西。

就類似

const Slot = React.forwardRef((props, ref) => { const { children, ...rest } = props; return React.isValidElement(children) ? React.cloneElement(children, { ...rest, ref }) : null; });

在shadcn里??

import { Slot } from '@radix-ui/react-slot';

最后，我的代碼寫出來belike ??，這是極好的，不管你用不用button都行，as child的話，就直接透傳，onclick方法和一些context都在casouel內部做完了，外界不用關心。

const Comp = asChild ? Slot : Button;

return (
    <Comp
      ref={ref}
      //   variant={variant}
      size={size}

小

按鈕點按的狀態實際上就是: active 就行。

bootstrap里的sr-only全稱是 screen reader only，意為為無障礙設計的標簽

git常用操作

git checkout xxxxbranch

git branch 查看有什么branch

useSWRMutation

即使是 await里的代碼也能調用 swr里的具體參數

swr返回值

data: fetcher 返回的給定鍵的數據
error: fetcher 拋出的錯誤（或 undefined）
trigger(arg, options): 用于觸發遠程突變的函數
reset: 用于重置狀態的函數（data、error、isMutating）
isMutating: 是否正在進行遠程突變

但是data有的時候會有什么。。。讀取不到的可能性，此時可以重新接一下數據

要求不高的話isMutating夠用了

Memo

簡單來說memo是包裹組件的，而 usememo是給函數用的，不影響

React.memo() 是一個高階組件，我們可以使用它來包裝我們不想重新渲染的組件，除非其中的 props 發生變化useMemo() 是一個 React Hook，我們可以使用它在組件中包裝函數。我們可以使用它來確保該函數中的值僅在其依賴項之一發生變化時才重新計算
React.memo() 是一個高階組件，我們可以使用它來包裝我們不想重新渲染的組件，除非其中的 props 發生變化
useMemo() 是一個 React Hook，我們可以使用它在組件中包裝函數。我們可以使用它來確保該函數中的值僅在其依賴項之一發生變化時才重新計算

NonNullable 是ts的，去除了null和undefined
Record ts 構造一個對象類型，其屬性key是Keys,屬性value是Type。被用于映射一個類型的屬性到另一個類型。
- 如，<1, xxxxx> 前面是id

Partial 可選，都可選，里面，而且可以直接。< >

下面兩個等同

type Coord = Partial<Record<'x' | 'y', number>>;

// 等同于
type Coord = {
	x?: number;
	y?: number;
}

use callback

不需要 useCallback 的場景：
- 函數只在當前作用域內使用，不傳遞、不作為依賴項
- 避免在函數內部直接修改依賴項，而是使用使用函數式更新
  - setCount(prev => prev + 1);

bfc cache：

一些高級瀏覽器啟用了這個功能，前進后退只是fress，并么有給清理掉，

因為沒有清理掉。所以return () => 里面的就觸發不了，得用swr之類的自動觸發或者頁面enter之類的，才能捕捉到

Pick：

Pick<PostLoginRequest, 'session' | 'smsResp'>是從PostLoginRequest類型中選取了session和smsResp這兩個屬性，創建了一個新的類型，包含這兩個屬性。然后，通過&操作符，將另一個對象類型{ is_redeem_login?: boolean; }合并進來。這里的&表示交叉類型，即合并兩個類型的所有屬性。

session 刷新后也存在

Session Storage 適合存儲臨時會話數據（如表單草稿、頁面狀態），在刷新頁面時保留數據，但需注意標簽頁關閉時的數據清除特性

盡量高效休息，高效工作，要摸魚就狂摸，要么就不摸，高效工作大于無效摸魚

posted @ 2025-04-22 11:37 send/me/a/cat 閱讀(50) 評論(0) 收藏舉報

刷新頁面返回頂部

send me a cat

工作總結 - 前兩周 flex、context、版心布局、shadcn

flex的布局問題，子元素放大縮小不能正常

版心布局適配心得（！！！）

PS: 樣式調試經驗：

子元素嚴格等寬度：

注意，之前h-full的理解是錯的

1.overflow-y-auto比scroll更好，auto是只有超過的時候才顯示進度條，scroll一直有

2.next 路由：只有page級別的，才能自動有路由，index.tsx不行，所以說大層的路由只有一個。

3. 不是，啊，svg的fill=currentColor是要用text-color去覆蓋的，直接bg更改的是后面的顏色是整體的，要text-color！！！！

為什么渲染了兩次？？？

為什么fetch請求的headers看不了？因為headers內部封裝了，不可直接枚舉，無法正確序列化，打印也只是快照，得這樣

fetch有一個 no-cors，但是只支持有限的請求頭，且不能自定義請求頭，而且看不到響應的信息！！！！！

tw規范

您直接使用 `useSWRMutation` 返回的 `data` 導致值未更新，原因是 SWR 的 `data` 狀態更新存在延遲，而您沒有正確等待異步操作完成

—- 子組件得包裹memo，否則讀取值都讀不到。。。

tailwind css動態渲染

有關context

有關refs

有關use refucer

有關 infinate scroll

enum

shadcn

平滑滾動

多用語義化反正原生的標簽樣式都無了

shadcn 使用casourle

小

git常用操作

useSWRMutation

Memo

不需要 `useCallback` 的場景：

公告

send me a cat

工作總結 - 前兩周 flex、context、版心布局、shadcn

flex的布局問題，子元素放大縮小不能正常

版心布局適配心得（！！！）

PS: 樣式調試經驗：

子元素嚴格等寬度：

注意，之前h-full的理解是錯的

1.overflow-y-auto比scroll更好，auto是只有超過的時候才顯示進度條，scroll一直有

2.next 路由：只有page級別的，才能自動有路由，index.tsx不行，所以說大層的路由只有一個。

3. 不是，啊，svg的fill=currentColor是要用text-color去覆蓋的，直接bg更改的是后面的顏色是整體的，要text-color！！！！

為什么渲染了兩次？？？

為什么fetch請求的headers看不了？因為headers內部封裝了，**不可直接枚舉，無法正確序列化，**打印也只是快照，得這樣

fetch有一個 no-cors，但是只支持有限的請求頭，且不能自定義請求頭，而且看不到響應的信息！！！！！

tw規范

您直接使用 useSWRMutation 返回的 data 導致值未更新，原因是 SWR 的 data 狀態更新存在延遲，而您沒有正確等待異步操作完成

—- 子組件得包裹memo，否則讀取值都讀不到。。。

tailwind css動態渲染

有關context

有關refs

有關use refucer

有關 infinate scroll

enum

shadcn

平滑滾動

多用語義化 反正原生的標簽樣式都無了

shadcn 使用casourle

小

git常用操作

useSWRMutation

Memo

不需要 useCallback 的場景：

公告

為什么fetch請求的headers看不了？因為headers內部封裝了，不可直接枚舉，無法正確序列化，打印也只是快照，得這樣

您直接使用 `useSWRMutation` 返回的 `data` 導致值未更新，原因是 SWR 的 `data` 狀態更新存在延遲，而您沒有正確等待異步操作完成

多用語義化反正原生的標簽樣式都無了

不需要 `useCallback` 的場景：