2024-04-15 Add Reactivity

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/
© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...