keys 是 react 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 render () { return ( <ul> {this.state.todoitems.map(({item, key}) => { return <li key={key}>{item}</li> })} </ul> ) } 在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性。 在 react diff 算法中 react 会借助元素的 key 值来判断该元素是新近创建的还是被移动而来的元素, 从而减少不必要的元素重渲染。 此外,react 还需要借助 key 值来判断元素与本地状态的关联关系, 因此我们绝不可忽视转换函数中 key 的重要性。
在代码中调用 setstate 函数之后, react 会将传入的参数对象与组件当前的状态合并, 然后触发所谓的调和过程(reconciliation)。 经过调和过程, react 会以相对高效的方式根据新的状态构建 react 元素树并且着手重新渲染整个 ui 界面。 在 react 得到元素树之后, react 会自动计算出新的树与老树的节点差异, 然后根据差异对界面进行最小化重渲染。 在差异计算算法中, react 能够相对精确地知道哪些位置发生了改变以及应该如何改变, 这就保证了按需更新,而不是全部重新渲染。
初始化阶段: getdefaultprops:获取实例的默认属性 getinitialstate:获取每个实例的初始化状态 componentwillmount:组件即将被装载、渲染到页面上 render:组件在这里生成虚拟的 dom 节点 componentdidmount:组件真正在被装载之后 运行中状态: componentwillreceiveprops:组件将要接收到属性的时候调用 shouldcomponentupdate: 组件接受到新属性或者新状态的时候 (可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了) componentwillupdate:组件即将更新不能修改属性和状态 render:组件重新描绘 componentdidupdate:组件已经更新 销毁阶段: componentwillunmount:组件即将销毁
shouldcomponentupdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。 因为 dom 的描绘非常消耗性能, 如果我们能在 shouldcomponentupdate 方法中能够写出更优化的 dom diff 算法,可以极大的提高性能。
把树形结构按照层级分解,只比较同级元素。 给列表结构的每个单元添加唯一的 key 属性,方便比较。 react 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字) 合并操作,调用 component 的 setstate 方法的时候, react 将其标记为 dirty.到每一个事件循环结束, react 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldcomponentupdate 提高 diff 的性能。
如对本文有疑问, 点击进行留言回复!!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
网友评论