# React 學習紀錄

## 新筆記

### next.js 使用紀錄
* 2025-01-30
* [或可改善 ws code 內容的 deepseek 參考](https://chat.deepseek.com/a/chat/s/896c7a7f-d1f4-421e-970d-66821e70baad)
* 2024-12-21
* [改善 docker image 大小的參考](https://medium.com/@vyakymenko/reducing-nx-next-js-docker-container-size-30fbeeb361cb)
* [運用 next.js standalone 設定 改善 docker image 大小的參考](https://www.timsanteford.com/posts/optimizing-next-js-docker-images-for-production/)
* 2024-12-07
* [react 19 & next.js 15 的 form](https://www.youtube.com/watch?v=Otq0LY90Qso)
* [更專注於 form 用法的影片](https://youtu.be/N_sUsq_y10U)
* 2024-11-22
* [好像是完整的 next.js 14 範例](https://www.youtube.com/watch?v=SG82Aqcaaa0)
* 2024-10-20
* [頁面 notes 的討論](https://chatgpt.com/c/6713e701-4444-8005-9f10-e1866e9a2bc3)
* 2024-10-19
* 遇到在 SRC 中發生的 x-forwarded-host header does not match origin
* 在發出 request 的 SRC 中再 await 另一個 SRC 的 function 時發生的狀況
* [找到的討論 1](https://raddy.dev/blog/next-js-14-0-2-x-forwarded-host-header-with-value-localhost3000-does-not-match-origin-fix/)
* [找到的討論 2](https://github.com/vercel/next.js/issues/58295)
* 2024-10-17
* [頁面 images 的討論](https://chatgpt.com/c/67110abf-8404-8005-adf2-c4b9204fb952)
* 2024-10-16
* [頁面 header 的討論](https://chatgpt.com/c/670fbc5d-3ca8-8005-9529-3d199f126ee6)
* 2024-10-15
* [目前跟 gpt 的討論串](https://chatgpt.com/c/670bfb9c-1ea4-8005-bf41-a3a7ebd8e23a)
* 2024-10-08
* 遇到使用了 useEffect 之後還是執行兩次的問題
* [找到的解法](https://stackoverflow.com/questions/71847778/why-my-nextjs-component-is-rendering-twice)
* 2024-10-06
* [在 next.js 中使用 ws 的範例參考](https://juejin.cn/post/7371423076662493224)
* 2024-06-08
* 想完成功能 : 在 client component 使用 server action 的 form 完成隱藏 Form API 路徑的 POST 功能
* 不直接使用 next fetch 的原因是因為想要傳圖片檔案
* 現在還沒試過 next fetch 是否能直接傳 file stream

### [icon 資源網站](https://icongo.github.io/)

## 舊筆記

### 搭配使用 wsl2 + docker

# 在當前目錄建立 next 專案
docker run --rm -it -v $(pwd):/app -w /app -u $(id -u):$(id -g) node:16 sh -c "npx create-next-app@latest"

# 在專案目錄下 up service
docker run --rm -it -v $(pwd):/app -w /app -u $(id -u):$(id -g) -p 3000:3000 node:16 sh -c "yarn dev"

- 20210428
1. setState() 存回class 的值不一定會當下更新成最新的，找到的消息是說為了效能考量，有許多不同的解法，最重要的是要知道有這件事!!!
2. class 裡面的methods 開啟了嚴格模式(use strick)，不透過instance直接調用this 會是undefine
想用this 要bind綁定後才有this 能用，不然會是undefine
有看到一種寫法，在事件綁定時直接寫成 {this.methodName.bind(this)} 直接綁this，在method 裡面才有this 能用
3. onClick、onChange...等等的事件綁定要用小駝峰的型式
4. render 裡面的函式要寫的時候要注意不要加() ，讓react 框架幫我在設定事件綁定的時間點調用函式
- 20210429
1. 類中的方法可用箭頭函式的方式撰寫，可不用另外bind(this)。
箭頭函式本身沒有this ，在其中使用this 的話會往外部(層)尋找可用的this ，在這狀況下會找到class 實體化後instance 的this
2. 在constructor 中的this.state = {xxx:xxx...} 可寫在外層，state = {xxx:xxx...} 的型式。
需要接值的話還是得靠在constructor
- 20210430
1. 展開運算符 ...object
在原生JS下 let object2 = {...object} 是代表複製一份資料給object2
在react + babel 的情況下(只)可以在標籤內加{...object}使用，在此的含意是展開其內容
2. 在class 中constructor 是否要接props 且 傳props給super 取決於是否要在constructor 中使用 this.props
3. ref 使用方法有三種
a. string 形式 : 會造成效率不佳，官方不推薦使用
b. callback 形式 : 值的存取不是放在this.refs{} 算是利用ref 會自動callback的性質附值在instance 身上
c. createRef API 形式 : 會將使用此容器的node 存回容器，要取值的話 容器.current.value
用React.createRef() 產生的容器只能存一筆資料，後面再call 同一個容器的話會被後面的資料覆蓋過去
要存一筆資料就要有一個容器
4. react class 中的 methods 第一個參數是被call 當下的event
在form 中被call 的狀況可在method 內的第一行執行event.preventDefault() 來停止form 預設的get 傳參
- 20210501
1. Uncontrolled Component 隨傳隨用，主要使用refs 取得外部傳入的資料使用，官網推薦少用refs (效能問題)
2. Controlled Component 儲存後需要時再取用，使用state 配合onChange...等等的事件處理達成目的
3. 在 onChange={this.saveFormData} 這種語句中，代表將class 內的方法saveFormData 交給react 在該事件時幫我call
1. onChange={this.saveFormData(parameter)} 寫了小括號後react 會call 的部份是**該方法的return 部份**

        // parameter 是小括號傳入的參數
        // event 是react 包好的SyntheticEvent 當下element 的object
        savaFormData = (parameter) => {
            return (event) => {
                this.setState({ [parameter]: event.target.value })
            }
        }

2. 所以如果return 部份是一個function 就能達成在onChange={} 中填入this.saveFormData(parameter) 這種形式
1. 此狀況下return 的function 每次在其元素改變的時候就會被調用(reference)，且react 幫我調用的時候都會把包好的event 放進第一個參數
- 20210504
1. shouldComponentUpdate <= setState()
1. return 必須為true or false
2. 預設為true
3. return false 時 componentWillUpdate、render、componentDidUpdate、componentWillUnmount 皆不會被call
2. componentWillUpdate <= forceUpdate()
1. 不受shouldComponentUpdate return false 的阻擋，可強制更新。用於沒更新state 也要更新的狀況...之類的。
3. parent component
1. componentWillReceiveProps 在**初次render 頁面的時候不會被call**
- 20210505
1. in old lifecycle, componentWillMount & componentWillReceiveProps & componentWillUpdate 在16版被列入未來可能要加**UNSAFE_**前綴
1. componentWillMount : **掛載時**，constructor後，render前
2. componentWillReceiveProps : **更新時**，shouldComponentUpdate前
3. componentWillUpdate : **更新時**，shouldComponentUpdate後，render前
2. in new lifecycle, adding getDerivedStateFromProps & getSnapshotBeforeUpdate 在17版新增
1. getDerivedStateFromProps : **掛載時**，constructor後，render前。**更新時**，shouldComponentUpdate前
2. getSnapshotBeforeUpdate : **更新時**，render後，componentDidUpdate前
- 20210506
1. getDerivedStateFromProps(props, state) :
1. return obj 時會使state變成該obj ，如果return 的是接到的第一個參數props 就會使state變成props 的值並且無法修改

- 20210509
1. getSnapshotBeforeUpdate
1. 需要取得目前scroll高度時會用到

- 20210512
1. 在foreach中使用index當作key來用的話會有的問題
1. 反向新增、反向刪除...等等類似的操作會造成
1. **render數量-1的效能浪費**(數量越大越多沒必要的浪費)
2. 結構中包含輸入類的DOM的話，資料會錯位、不相符
* 建議使用唯一的識別資料(ex:id)來當作key
- 20210518
1. 在import {xxx} from yyy 的 {xxx} 不是解構賦值的用法，而是在yyy 裡面有多個export 的輸出，其中之一是 export class xxx 這種形式
- const {aaa} = bbb 這種才是解構賦值的用法
- [參考影片](https://youtu.be/DxNQObgXCTY?list=PLmOn9nNkQxJFJXLvkNsGsoCUxJLqyLGxu&t=906)
- 20210519
1. module of css
* 在檔案名xxx.css 中間加入module 成為xxx.module.css 這種形式的話就能用import yyy from './路徑/xxx.module.css' 作為module import
- 要使用的話是以**className={yyy.類名}**這種形式使用
- 20210525
1. 整理一下目前為止es6使用狀況
* array.reduce((previousValue, currentValue)={...logic},initValue)
- 適用**統計**、**計算**array的method
* array.filter((oneOfArray)=>{**這裡可以直接判斷oneOfArray的值以後返回符合的oneOfArray**})
- 適用**過濾**、**刪除**oneOfArray的method