React-6 状态

189 阅读1分钟

UI = f(state)

React有一套自己的状态管理机制,

使用state进行组件内部状态的声明,并使用setState方法更新状态,才能渲染UI,让用户界面和数据保持一致。

组件的生命周期

三大阶段

  • Mounting(挂载):已插入真实 DOM
  • Updating(更新):正在被重新渲染
  • Unmounting(卸载):已移出真实 DOM image.png
  • Render阶段:灰色区域,不包含副作用(异步操作等等),可能被React暂停,终止或重启。

状态改变后重新调用render渲染生成虚拟DOM树,

  • Commit阶段:非灰色区域,可以使用DOM,运行副作用,安全更新。

虚拟DOM树判断有无状态更新,若有则更新DOM树。