React.Purecomponent与React.Component几乎完全相同,但React.PureComponent通过prop和state的浅比较来实现shouldComponentUpdate()
React.PureComponent 的shouldComponentUpdate()只会对对象进行浅比较。如果对象包含复杂的数据结构,它可能会因深层的数据不一致
而产生错误的否定判断(表现为对象身侧你的数据已改变视图却没有更新)
那么React.PureComponent的浅比较是如何实现的呢?
让我们来重写React.Component的shouldComponentUpdate()方法:
在该方法中定义一个函数shallowEquals,该函数接收两个参数
shoudComponentUpdate(nextProps,nextState){ function shallowEquals(oldValue,newValue){ //Object.is() 判断两个值是否相同 //如果两个值都是对象类型,指向同一个对象才返回ture if(Object.is(oldValue,newValue)){ return true } //这里知道传入的参数为对象就不做判断了 const oldKeys = Object.keys(oldValue),newKeys = Object.keys(newValue) if(oldKeys.length !== newKeys.length ) return false for(let i = 0;i < oldKeys.length;i++){ //通过Object.is判断这两个属性值是否相同 //即使两个对象属性与属性值完全相同,但是不是同一个引用 //也会返回false let result = newValue.hasOwnProperty(oldKeys[i]) && Object.is(oldValue[oldKeys[i]],newValue[oldKeys[i]]) if(!result) return false } return true } return shallowEquals(this.props,nextProps) && shallowEquals(this.state,nextState) }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。