1.保存狀態(tài)（useState）
import React, { useState } from 'react';
function Example() {
// 創(chuàng)建一個(gè)保存 count 的 state品嚣，并給初始值 0
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
+
</button>
</div>
);
}
- useState(initialState) 的參數(shù) initialState 是創(chuàng)建 state 的初始值石蔗，它可以是任意類(lèi)型蠢涝，比如數(shù)字派阱、對(duì)象切诀、數(shù)組等等揩环。
- useState() 的返回值是一個(gè)有著兩個(gè)元素的數(shù)組。第一個(gè)數(shù)組元素用來(lái)讀取 state 的值幅虑，第二個(gè)則是用來(lái)設(shè)置這個(gè) state 的值丰滑。在這里要注意的是，state 的變量（例子中的 count）是只讀的翘单，所以我們必須通過(guò)第二個(gè)數(shù)組元素 setCount 來(lái)設(shè)置它的值吨枉。
- 如果要?jiǎng)?chuàng)建多個(gè) state蹦渣，那么我們就需要多次調(diào)用 useState。比如要?jiǎng)?chuàng)建多個(gè) state.
state中永遠(yuǎn)不要保存可以通過(guò)計(jì)算得到的值
2.執(zhí)行副作用（useEffect）
import React, { useState, useEffect } from "react";
function BlogView({ id }) {
// 設(shè)置一個(gè)本地 state 用于保存 blog 內(nèi)容
const [blogContent, setBlogContent] = useState(null);
useEffect(() => {
// useEffect 的 callback 要避免直接的 async 函數(shù)貌亭，需要封裝一下
const doAsync = async () => {
// 當(dāng) id 發(fā)生變化時(shí)柬唯，將當(dāng)前內(nèi)容清楚以保持一致性
setBlogContent(null);
// 發(fā)起請(qǐng)求獲取數(shù)據(jù)
const res = await fetch(`/blog-content/${id}`);
// 將獲取的數(shù)據(jù)放入 state
setBlogContent(await res.text());
};
doAsync();
}, [id]); // 使用 id 作為依賴(lài)項(xiàng)，變化時(shí)則執(zhí)行副作用
// 如果沒(méi)有 blogContent 則認(rèn)為是在 loading 狀態(tài)
const isLoading = !blogContent;
return <div>{isLoading ? "Loading..." : blogContent}</div>;
}
- 每次 render 后執(zhí)行：不提供第二個(gè)依賴(lài)項(xiàng)參數(shù)圃庭。比如useEffect(() => {})锄奢。
- 僅第一次 render 后執(zhí)行：提供一個(gè)空數(shù)組作為依賴(lài)項(xiàng)。比如useEffect(() => {}, [])
- 第一次以及依賴(lài)項(xiàng)發(fā)生變化后執(zhí)行：提供依賴(lài)項(xiàng)數(shù)組剧腻。比如useEffect(() => {}, [deps])
- 組件 unmount 后執(zhí)行：返回一個(gè)回調(diào)函數(shù)拘央。比如useEffect() => { return () => {} }, [])
3.注意事項(xiàng)
- Hooks 只能在函數(shù)組件的頂級(jí)作用域使用，所謂頂層作用域书在，就是 Hooks 不能在循環(huán)灰伟、條件判斷或者嵌套函數(shù)內(nèi)執(zhí)行，而必須是在頂層儒旬。
- Hooks 只能在函數(shù)組件或者其它 Hooks 中使用
個(gè)人學(xué)習(xí)記錄栏账，侵權(quán)可刪
