千锋教育Kerwin系列前端教程1000集（适合前端0基础，h5(html5)/

1. 极简Hooks实现

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

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

1. 通过一些途径产生更新，更新会造成组件render--updateNum；组件render时useState返回的num为更新后的结果；

其中步骤1的更新可以分为mount和update：

调用ReactDOM.render会产生mount的更新，更新内容为useState的initialValue（即0）。点击p标签触发updateNum会产生一次update的更新，更新内容为num => num + 1。

demo：

当产生第一个update（我们叫他u0），此时queue.pending === null。

update.next = update;即u0.next = u0，他会和自己首尾相连形成单向环状链表。

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

当产生第二个update（我们叫他u1），update.next = queue.pending.next;，此时queue.pending.next === u0， 即u1.next = u0。

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

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