网站建设与管理大作业,具有价值的网站建设,建站快车管理,短视频营销推广公司一、React 渲染流程和更新流程
react渲染流程#xff1a;jsx - 虚拟dom - 真实domreact更新流程#xff1a;props/state改变 - render函数重新执行 - 生成新的虚拟dom树 - 新旧虚拟dom树进行diff - 计算出差异进行更新 -更新到真实的dom树
所以…一、React 渲染流程和更新流程
react渲染流程jsx - 虚拟dom - 真实domreact更新流程props/state改变 - render函数重新执行 - 生成新的虚拟dom树 - 新旧虚拟dom树进行diff - 计算出差异进行更新 -更新到真实的dom树
所以在每次更新的时候React需要基于这两颗不同的树之间的差别来判断如何有效的更新UI如果一棵树参考另外一棵树进行完全比较更新那么即使是最先进的算法该算法的复杂程度为 O(n3)其中 n 是树中元素的数量如果在React中使用了该算法那么展示1000个元素所需要执行的计算量将在十亿的量级范围这个开销太过昂贵了React的更新性能会变得非常低效于是React对这个算法进行了优化将其优化成了O(n)这也就是传说中的diff算法
二、diff 算法
diff 算法做了三处优化
同层节点之间相互比较不会垮节点比较不同类型的节点产生不同的树结构开发中可以通过key来指定哪些节点在不同的渲染下保持稳定
2-1 对比不同类型的元素 当节点为不同的元素React会拆卸原有的树并且建立起新的树当一个元素从a变成img从Article变成Comment或从Button变成div都会触发一个完整的重建流程 当卸载一棵树时对应的DOM节点也会被销毁组件实例将执行 componentWillUnmount() 方法 当建立一棵新的树时对应的 DOM 节点会被创建以及插入到 DOM 中组件实例将执行 componentWillMount()方法紧接着 componentDidMount() 方法 比如下面的代码更改React 会销毁 Comment 组件并且重新装载一个新的组件而不会对Counter进行复用
divComment /
/divspanComment /
/span2-2 对比同一类型的元素 当比对两个相同类型的 React 元素时React 会保留 DOM 节点仅比对及更新有改变的属性 比如下面的代码更改通过比对这两个元素React 知道只需要修改 DOM 元素上的 className 属性
div classNamebefore titlestu /
div classNameafter titlestu /比如下面的代码更改当更新 style 属性时React 仅更新有所更变的属性。通过比对这两个元素React 知道只需要修改 DOM 元素上的 color 样式无需修改 fontWeight。
div style{{colorred,fontWeight:bold}} /
div style{{colorgreen,fontWeight:bold}} /如果是同类型的组件元素组件会保持不变React会更新该组件的props并且调用componentWillReceiveProps() 和 componentWillUpdate() 方法下一步调用 render() 方法diff 算法将在之前的结果以及新的结果中进行递归
参考 前端进阶面试题详细解答
2-3 对子节点递归 在默认条件下当递归 DOM 节点的子元素时React 会同时遍历两个子元素的列表当产生差异时生成一个mutation改变。 如果在最后插入一条数据的情况前面两个比较是完全相同的所以不会产生mutation,最后一个比较产生一个mutation将其插入到新的DOM树中即可但是如果是在前面插入一条数据React会对每一个子元素产生一个mutation而不是保持 li星际穿越/li和li盗梦空间/li的不变这种低效的比较方式会带来一定的性能问题所以就得使用key来优化
后面插一条数据
ulli星际穿越/lili盗梦空间/li/ululli星际穿越/lili盗梦空间/lili大话西游/li/ul前面插一条数据ulli星际穿越/lili盗梦空间/li/ululli大话西游/lili星际穿越/lili盗梦空间/li/ul三、key
要切记在 diff 算法中可以通过 key 来指定哪些节点在不同的渲染下保持稳定并且要保证 key 是唯一的不要使用随机数随机数在下一次render时会重新生成一个数字也不能使用index这都对性能是没有优化的
import React, { Component } from react;export default class App extends Component {constructor(props) {super(props);this.state {movies: [星际穿越, 盗梦空间],};}render() {return (divh2电影列表/h2ul{this.state.movies.map((item, index) { return li key{item}{item}/li; })} /ulbutton onClick{(e) this.insertMovie()}添加电影/button/div);}insertMovie() {this.setState({movies: [大话西游, ...this.state.movies],});}
}代码解析在默认条件下当递归 DOM 节点的子元素时React 会同时遍历两个子元素的列表当产生差异时生成一个mutation。如果在movies后面添加数据前面两个比较是完全相同的所以不会产生mutation最后一个比较产生一个mutation将其插入到新的DOM树中即可 如果在movies前面添加数据React会对每一个子元素产生一个mutation而不是保持 li星际穿越/li和li盗梦空间/li的不变这种低效的比较方式会带来一定的性能问题 当子元素(这里的li)拥有 key 时React 使用 key 来匹配原有树上的子元素以及最新树上的子元素 在下面这种场景下key为星际穿越和盗梦空间的元素仅仅进行位移不需要进行任何的修改 将key为大话西游的元素插入到最前面的位置即可
