React 笔记

  • Z时代
  • 2024-01-10
  • 分类：综合

react

一、生命周期：

  • 初始化
    getDefaultProps() getIniterStates() componentwillmount() render() componentdidmount()

  • 运行中
    componentWillReceiveProps() shouldComponentUpdate() componentwillUpdate() render() componentdidUpdate()

  • 卸载
    compoentwillUnmount()

二、特性

  • 声明式

  • 虚拟DOM

  • 支持服务端渲染

  • 单向数据绑定 flux

  • 状态机组件

三、渲染流程

四、shouldComponentUpdate

接受参数后，生成新的虚拟Dom对象树，使用Diff算法比较新旧对象树，找出有差异的节点，以打补丁的形式更新到真实Dom上

五、虚拟Dom存在的原因

真实Dom树有231个元素属性，大部分与渲染无关，渲染真实Dom非常耗性能

虚拟Dom以对象树的形式模拟真实Dom，只添加与渲染有关的属性，利用Diff算法

找出更新的部分，然后更新到真是Dom上，提升了渲染效率

六、Diff算法

jsx最终都会被转换成createClass()的形式，每个元素及组件都是一个对象，最终形成一个虚拟Dom对象树的结构。

Diff算法是从外而内开始比较，会比较节点的类型、属性、子元素等，如果根节点类型不一致，会重新渲染整个对象树。

Diff会借助列表元素的key值进行比较，key最好不是循环的index，有助于提升Diff算法的效率

以上是 React 笔记 的全部内容， 来源链接： utcz.com/z/383354.html

回到顶部