Tips

记住一个值,并在交互的时候更新它
UI 更新的生命周期
什么叫做mutation

Inspiration Channel

响应事件 useState mutation slice

Center Paragraph

react 是如何响应用户的交互行为的: 状态+更改状态

Render and Commit

什么时候和为什么 react 会渲染一个组件

• triggering a render
• 渲染组件(调用函数)
• 提交到dom(只会更改存在改变的DOM)

state 如同一张快照

设置state并不会改变原来的值,而是会触发一次新的渲染.
换句话说,设置状态会请求一次新的渲染.

批量更新state

setEnabled(e => !e);
setLastName(ln => ln.reverse());
setFriendCount(fc => fc * 2);

更新引用状态

state 可以持有任何类型,包括对象. 但是我们不应该直接更改引用的值.

Keep in mind

• 更新对象或者数组的时候,需要创建一个新的副本,使用副本更新

Additional

• immutable unchangeable read-only
• spread syntax
• concise update
• https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/