官方的解釋
圖1: React官方文檔解釋（英文版）
圖2: React官方文檔解釋（中文翻譯版）
從UI的層面解釋
將一個(gè)界面視為函數(shù)V宾濒，擁有狀態(tài)和屬性
V = (props, state) => {...}
我們可以將UI也視作函數(shù)
UI = 界面函數(shù) 使用(use)了 hook1、hook2...
UI = V(props, state) useHook1() useHook2() ...
hooks可以大體分為state hook仅淑、effect hook和context hook称勋，他們都是通過(guò)鉤子作用在界面身上的，是用于改變狀態(tài)涯竟、產(chǎn)生作用和改變上下文的一個(gè)個(gè)函數(shù)
額外：UI是如何被渲染的
如圖3 所示
作用通過(guò)觸發(fā)行為來(lái)改變狀態(tài)赡鲜，再由狀態(tài)來(lái)驅(qū)動(dòng)視圖。其中：視圖上的屬性[一定?]是不變的庐船，會(huì)改變的僅僅是狀態(tài)
圖3: 重新定義UI from 騰訊課堂
例如银酬，onClick是視圖身上的屬性，在這個(gè)屬性中定義了觸發(fā)action行為的作用（動(dòng)作）
action函數(shù)是一個(gè)異步的行為筐钟，這個(gè)行為改變了V函數(shù)所依賴的狀態(tài)揩瞪，再由狀態(tài)驅(qū)動(dòng)視圖的改變
import { useXXX } from '...'
const UI = () => {
// 狀態(tài)
const state = {
a:1,
b:2,
c:3
}
// 行為
const action = async () => {
const res = await fetchData()
state.xxx = res
}
// use state hook
const [count, setCount] = useState(0)
// use effect hook
useEffect(() => {
setTimeOut(() => {
setCount(count+1)
}, 1000)
})
// use other hook
useXXX()
//視圖里不要改變狀態(tài)
//bad: onClick = { () => { state.a = ++state.a } }
return (
//onClick是一個(gè)屬性
<div onClick={action}>
{a}
篓冲
{c}
{count}
</div>
)
}
