1. 極簡(jiǎn)Hooks實(shí)現(xiàn)

function App() {
  const [num, updateNum] = useState(0);

  return <p onClick={() => updateNum(num => num + 1)}>{num}</p>;
}

1. 通過一些途徑產(chǎn)生更新，更新會(huì)造成組件render--updateNum；組件render時(shí)useState返回的num為更新后的結(jié)果；

其中步驟1的更新可以分為mount和update：

調(diào)用ReactDOM.render會(huì)產(chǎn)生mount的更新，更新內(nèi)容為useState的initialValue（即0）。點(diǎn)擊p標(biāo)簽觸發(fā)updateNum會(huì)產(chǎn)生一次update的更新，更新內(nèi)容為num => num + 1。

demo：

當(dāng)產(chǎn)生第一個(gè)update（我們叫他u0），此時(shí)queue.pending === null。

update.next = update;即u0.next = u0，他會(huì)和自己首尾相連形成單向環(huán)狀鏈表。

然后queue.pending = update;即queue.pending = u0

當(dāng)產(chǎn)生第二個(gè)update（我們叫他u1），update.next = queue.pending.next;，此時(shí)queue.pending.next === u0， 即u1.next = u0。

queue.pending.next = update;，即u0.next = u1。

然后queue.pending = update;即queue.pending = u1