component(React)
React應用的組成單位
擁有內容、邏輯、狀態
實作模式
幾乎已無使用
目前的主流
直接以JavaScript的函式建立
以大寫開頭
主要回傳ReactElement
code:javascript
type Props = {
name: string;
};
export const Message: React.FC <Props> = ({name}) => {
return <div><span>Hello, {name}!</span></div>;
};
函式宣言
code:javascript
type Props = {
name: string;
}
export default function Message({name}: Props) {
return <div><span>Hello, {name}!</span></div>;
}
必須以大寫文字開頭命名
使用大括號{}嵌入表達式
用於文字部份顯示變數、屬性部份讀取變數…
屬性名
區分大小寫
例外：data-*屬性、aria-*屬性
style裡的屬性亦同
<ul style={ { backgroundColor: 'black', color: 'pink' } }>
code:react
className="flex"
className={flex ${foo > 0 ? 'flex-col' : 'flex-row'}}
屬性值
必須用單或雙引號包住
<input type="checked" />
可使用JS表達式
<input value={text} />
值為true時可省略
<input type="checkbox" checked />
1. Trigger
2. Render
3. Commit
state的值是每次畫面更新時的快照
set會請求新一次的算繪
使用JavaScript的迭代語法，或map函式轉換為列表 code:component-array.js
const listItems = products.map(product =>
<li key={product.id}>
{product.title}
</li>
);
return (
<ul>{listItems}</ul>
);
key值
若使用遞迴產生元件，需要加上key值
<li key="SOME_KEY"></li>
應盡量避開使用index值作為key
可再分割為子元件
可將資料傳入子元件
將值傳入子元件的參數
為不可變
immutable
特殊：children、key、ref
處理事件
透過如onClick等屬性傳遞函式
<button onClick={(event) => {...}}>..</button>
不會直接attach到DOM上
會轉換為整合各個瀏覽器的物件
又稱Synthetic Event
因此只能處理React所算繪的元素
除了style外，亦可使用CSS Modules、CSS-in-JS、Tailwind
分歧
React沒有特別的語法，和JavaScript一樣使用if
引入component
export default function Gallery() {}
import Gallery from './Gallery.js';
只引入特定component
export function Profile() {}
import { Profile } from './Gallery.js';
在元件子層內的元素會傳入子元件的props的children之中
code:父層
<Card>
<p>Content</p>
</Card>
code:子元件
const Card = ({ children }) => {
return (
<div className="card">
{children}
</div>
)
}
可以持有狀態
函式本身不持有狀態
狀態由React管理
儲存於底下的Fiber虛擬DOM
狀態
重新算繪
component會在狀態更新之後重新算繪
也會再次執行
immutable式更新
不要直接修改物件
即不要直接更改、新增、刪除內容
以新物件儲存含有變更後屬性或元素的內容
{ ...oldObject, foo: newFoo, bar: newBar }
[...oldArray, newItem]