reactjs组件优化：setState的反复render问题

组件优化

Component的2个问题

只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低

只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低

效率高的做法

只有当组件的state或props数据发生改变时才重新render()

原因

Component中的shouldComponentUpdate()总是返回true

解决

办法1: 重写shouldComponentUpdate()方法比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
办法2:  使用PureComponentPureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true注意: 只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent来优化

reactjs组件优化：setState的反复render问题相关推荐

PureComponent: setState未触发render渲染
之前一般都是使用Component的比较多,所以对PureComponent了解比较少.最近在使用PureComponent的时候遇到一些问题,就是setState未触发render渲染的问题: 两者 ...
从 0 到 1 实现 React 系列 —— 4.优化setState和ref的实现
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
reactjs组件的生命周期
1_引出生命周期 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
reactjs组件的三大属性之props基本使用及props属性值检验
reactjs组件的三大属性之props基本使用及props属性值检验
reactjs组件的生命周期函数：getSnapshotBeforeUpdate更新之前获取快照
reactjs组件的生命周期函数:getSnapshotBeforeUpdate更新之前获取快照
reactjs组件的生命周期函数：getDerivedStateFromProps
reactjs组件的生命周期函数:getDerivedStateFromProps
reactjs组件生命周期：componentWillReceiveProps及新旧版本生命周期钩子函数对比
reactjs组件生命周期:componentWillReceiveProps及新旧版本生命周期钩子函数对比
响应式滚动图懒加载 element ui el-carousel 组件优化代码
响应式滚动图懒加载 element ui el-carousel 组件优化代码懒加载插件vue-lazyload //main.js import VueLazyload from 'vue-la ...
vant 日历组件优化
vant日历组件优化 vant组件现状 min-date 如果不设置默认当前日期 max-date 如果不设置当前日期的六个月后目的:这个组件这么设置的目的就是为了节省性能公司需求 min-dat ...

reactjs组件优化：setState的反复render问题

组件优化

Component的2个问题

效率高的做法

原因

解决

reactjs组件优化：setState的反复render问题相关推荐

最新文章

热门文章