ReactJS性能优化(上)

原创 2016年12月07日 23:10:11

shouldComponentUpdate?

详情先参考InfoQ上什么时候要在React组件中写shouldComponentUpdate? 
React已经替我们实现了一个shouldComponentUpdate,原理其实非常简单,组件在决定重新渲染(虚拟dom比对完毕生成最终的dom后)之前会调用该函数,该函数将是否重新渲染的权限交给了开发者,该函数默认直接返回true,表示默认直接出发dom更新,如下代码:

shouldComponentUpdate: function(nextProps, nextState) { 
return true; 
}

but,一般情况下我们的state都是非基本类型,so,该方法需要重写,如下代码:

shouldComponentUpdate(nextProps) { 
return !deepEquals(this.props,nextProps) 
}

值得注意的是,react会非常频繁的调用该函数,并且深度遍历一个大的对象时效率极其低下,因此该方法已经无法用于生产

什么时候需要写shouldComponentUpdate

shouldComponentUpdate 对性能的优化其实微乎其微,那么什么时候该使用该方法呢,有知名博主指出:只有经过测量,发现有了shouldComponentUpdate后组件的渲染速度确实有可察觉的提升,你才应该用它。该博主在fiddle中的例子

react自身提供的与shouldComponentUpdate类似的PureRenderMixin插件?

PureRenderMixin依旧只能处理基本类型,遇到复杂类型就歇菜了~

this.props.obj !== nextProps.obj; // 如果obj.name 修改了,obj的引用依旧相对,此时就会产生bug了

如何正确使用PureRenderMixin?

使用Object.assign操作组件的initialState,

Object.assign(target, ...sources) 
拷贝过程中将调用源对象的getter方法,并在target对象上使用setter方法实现目标对象的拷贝。 
Object.assign(initialState, ...changeRes),initialState就会被改变,如下代码:

var o1 = { a: 1 }; 
var o2 = { b: 2 }; 
var o3 = { c: 3 }; 
var obj = Object.assign(o1, o2, o3); 
console.log(obj); // { a: 1, b: 2, c: 3 } 
console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed

每次通过Object.assign来操作组件的state,都会更新组件的state的引用,在对应组件中引用:

this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);//nice

并且此时的更新都是必要的更新,不会导致非必要的render

下一篇将简单介绍ReactJS性能优化神器immutable


ReactJS修炼之路(四):组件的性能优化及开发思路

少年,加油昨天周五,那个喊我“少年”的朋友离职了去新加坡了,我的实习生涯又错过了一位大神,不过短短一个月还是被影响不少,例如入坑happy hacking keybord同时学习各类软件的快捷键,例如...
  • code_for_free
  • code_for_free
  • 2016年08月06日 22:09
  • 1555

ReactJs性能优化(中)

提到ReactJS性能优化,不得不提immutablejs性能优化神器~  Facebook 工程师打造,与 React 同期出现,但没有被默认放到 React 工具集里(React 提供了简化的 H...
  • u012125579
  • u012125579
  • 2016年12月07日 23:12
  • 656

Component 组件的详细说明和生命周期

组件的详细说明和生命周期(Component Specs and Lifecycle) Edit on GitHub 组件的详细说明(Component Specification...
  • qq_32014215
  • qq_32014215
  • 2017年03月28日 14:52
  • 3784

Redux 学习笔记(三)

组件的重新渲染说到 react 组件,肯定离不开组件的 props 和 state,我们可以在 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状...
  • pepping798
  • pepping798
  • 2016年08月21日 22:37
  • 412

reactjs性能优化之shouldComponentUpdate

性能优化 每当开发者选择将react用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护。此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶...
  • jjx0224
  • jjx0224
  • 2015年11月16日 18:00
  • 19799

ReactJS性能优化(上)

shouldComponentUpdate? 详情先参考InfoQ上什么时候要在React组件中写shouldComponentUpdate?  React已经替我们实现了一个shouldCompo...
  • u012125579
  • u012125579
  • 2016年12月07日 23:10
  • 965

React学习笔记_常用工具 插件使用

常用组件axios(http请求模块,可用于前端任何场景,很强大)echarts-for-react(可视化图表,别人基于react对echarts的封装,足够用了)recharts(另一个基于rea...
  • qq_27384769
  • qq_27384769
  • 2017年12月17日 14:54
  • 189

Reactjs性能优化(下)

React 实现pure render的时候,bind(this)导致re-render? 先上代码: export default class extends Component { ... r...
  • u012125579
  • u012125579
  • 2016年12月08日 20:53
  • 439

react-native仿qq登录界面布局

使用react-native中的TextInput、Text、Image三个组件,编写的一个简单的仿照qq登录的界面。 截图如下: 还挺像的哈,代码都写在了index.android.js这个...
  • cjs68
  • cjs68
  • 2016年12月14日 15:31
  • 343

【React】什么时候使用shouldComponentUpdate方法?

你听说React是一个很快的前端框架,决定试一试。然后你找了个样例开始了React之旅,这时你注意到shouldComponentUpdate和PureRenderMixin,通过google找到一些...
  • u012937029
  • u012937029
  • 2017年08月01日 14:11
  • 537
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ReactJS性能优化(上)
举报原因:
原因补充:

(最多只允许输入30个字)