https://www.youtube.com/watch?v=zqV7NIFGDrQ
https://github.com/scps960740/React-crash-course-2021-bruceFE
1. Hook： 在编程领域，钩子(hook)是一种技术，允许开发人员在代码的特定点插入自定义代码(like function)，以便在程序执行过程中执行特定的操作或修改程序行为。
https://react.dev/reference/react/hooks
**useState is a React Hook that lets you add a state variable to your component.
<div name={name} />
父子層自動雙向綁定，不用emit
**useEffect is a React Hook that lets you synchronize a component with an external system.(所以當update btn click，應使用useEffect將資料傳給後端，而不是在btn上掛update function)
就像vue的watch with immediate: true
const Home = () => {
useEffect(() => {
// 綁定的事件
return()=>{ // 這個很少用
// 取消綁定的事件
}
}, [watch的變數])
//如果沒有變數，就是只執行最初的一次，後面沒有監聽(感覺這個是比較不正規的做法嗎嗎嗎???)
//[watch的變數可以不只一個
}
**useRef is a React Hook that lets you reference a value that’s not needed for rendering.
2. jsx
**jsx 就像vue裡的template
**只要想在jsx裡用js就要用大括號
例如:
// List.js // 這是個component
const arr = [1, 2, 3]
const List = () =>{
return <div className="list">
{
arr.map(item => <div>{item}</div>)
}
</div>
}
export default List
3. Why shouldn't I use index as key in render a array?
Using the index as a key when rendering an array in React is generally discouraged for a few reasons:
Stability: Indexes may change if items are added, removed, or reordered in the array. This can lead to unnecessary re-renders and potentially affect component state or cause unexpected behavior.
Performance: React uses keys to efficiently update and reconcile the DOM. When using the index as the key, React may have to re-render more components than necessary, impacting performance.
Component State: If components in the array have internal state or rely on lifecycle methods, using the index as the key can lead to inconsistencies or errors when components are re-ordered or removed.
Instead, it's recommended to use a unique identifier for each item in the array as the key. This ensures stability, improves performance, and helps maintain component state integrity. If the array items don't have a unique identifier, consider adding one or using a library like uuid to generate unique keys.
solution 1
use uuid package 如下
import { v4 } from "uuid";
const Edit = ({ add, submittingStatus }) => {
const [note, setNote] = useState("");
function noteChange(e) {
setNote(e.target.value);
}
const [date, setDate] = useState("");
function dateChange(e) {
setDate(e.target.value);
}
const [time, setTime] = useState("");
function timeChange(e) {
setTime(e.target.value);
}
// TODO del
console.log(note, date, time);
function addItem() {
submittingStatus.current = true
add(function (prevData) {
return [
{
id: v4(),
note,
date,
time,
},
...prevData,
];
});
}
4. 快速模擬後端給資料json-server
https://www.npmjs.com/package/json-server
5.Idempotent
idempotent 的意思是如果相同的操作再執行第二遍第三遍，結果還是跟第一遍的結果一樣 (也就是說不管執行幾次，結果都跟只有執行一次一樣)
根據 HTTP 的規格，GET, HEAD, PUT 和 DELETE 是 idempotent，相同的 Request 再執行一次，結果還是一樣。只有 POST 和 PATCH 不是 idempotent，POST 再執行一遍，會再新增一筆資料，PATCH 則是有不能保證 idempotent 的可能性(徵求例子)。POST 和 PATCH 都不是 idempotent 的操作，這也是為什麼 Github API 裡用 POST 當做 PATCH 的相容取代方案。
另一個 HTTP Methods 特性是”Safe”，這比較簡單，只有 GET 和 HEAD 是 Safe 操作。Safe 特性會影響是否可以快取(POST/PUT/PATCH/DELETE 一定都不可以快取)。而 Idempotent 特性則是會影響可否 Retry (重試，反正結果一樣)。
| Safe? | Idempotent? | |
|---|---|---|
| GET | Y | Y |
| POST | N | N |
| PATCH | N | N |
| PUT | N | Y |
| DELETE | N | Y |
沒有留言:
張貼留言