React框架性能优化的几个点
- 子组件shouldComponentUpdate 判断后才返回false/ture 避免组件的重复无用的渲染;
- 把改变this指向的函数作用域绑定,放到constructor中定义,避免重复绑定;
- setState方法,将连续多次的数据更新,放到一次执行,降低比对频率,来更新视图;
- 使用虚拟DOM,极大的提升性能;
1.虚拟DOM如何提升性能
- 原生思路实现视图更新
- 定义state数据;
- JSX模板;
- 数据 + 模板 结合,生成真实的DOM,来显示;
- state发生变化;
- 数据 + 模板 结合, 生成真实的DOM,替换原来的DOM;
- 缺陷: 两次生成了真实的DOM,并用新DOM替换旧DOM,非常的耗性能;
- JQuery实现视图更新
- 定义state数据;
- JSX模板;
- 数据 + 模板 结合,生成真实的DOM,来显示;
- state数据发生改变;
- 数据 + 模板 结合,生成真实的DOM,并不直接替换原始的DOM;
- 新的DOM(DocumentFragment 文档碎片)和原始的DOM 作比对, 找差异
- 找出input框发生了变化;
- 只用新的DOM中新的input框元素,替换掉老的DOM中的input元素;
- 缺陷 : 性能的提升并不明显
- React虚拟DOM实现视图更新
- 定义state数据;
- JSX模板;
- 生成虚拟DOM(虚拟DOM就是一个JS对象,用它来描述真实的DOM),极大的提升性能;
['div',{id:'abc'},{'span',{},'hello world'}] - 数据 + 模板 结合,生成真实的DOM,来显示;
<div id = 'abc'><span>hello world</span></div> - state数据发生变化;
- 生成新的虚拟DOM;
['div',{id:'abc'},{'span',{},'bye bye'}] - 比较原始虚拟DOM和新的虚拟DOM,找到区别是span中内容,极大的提升性能;
- 直接操作DOM,改变span中内容;
注意:
- JS生成一个真实的DOM节点比生成一个虚拟DOM,性能要消耗特别多,
因为生成真实DOM需要调用高级API; - JSX语法,经过babel转译成React识别的语言,
经过React中的createElement生成虚拟DOM(JS对象),并做比较
实现API:createElement 和 createTextNode
最后通过React中的方法,将虚拟DOM节点插入到root容器的根节点中,渲染在页面上;
3.虚拟DOM使得跨端应用得以实现,React Native,不仅能开发网页应用,也能开发原生应用
React中的DOM Diff算法
同层比对:同一层级有difference,那么这个层级下面的所有dom结构都要替换
这种比较方法比较快
虚拟DOM的key值,作比较
生命周期函数
定义:在某一个函数组件会自动执行的函数
initialization阶段
- constructor : 初始化 props and states
Mounting(除render函数外,其他3个只执行一次)
- componentWillMount : 组件被挂载之前,自动执行
- render
- componentDidMount : 组件被挂载页面后,自动执行
Updation(只要数据发生改变,函数就会重复执行)
- shouldComponentUpdate : 返回值 false / true 根据返回值的不同,react会选择性的更新视图
- componentWillUpdate
- render
- componentDidUpdate
当存在子组件的情况下
- componentShouldReciveProps(nextProps,nextState)
一个组件从父组件接收参数
如果这个组件第一次出现在父组件中,这个周期函数将不会执行
如果这个组件已经出现在父组件中,只要父组件的render函数重新执行,那么子组件的这个函数会再次执行;
Unmounting
- componentWillUnmount : 组件被移除之前执行;
- 在react中,我们通常使用三元运算,进行子组件的加载和隐藏;