React 性能调优记录（下篇），如何写高性能的代码

react性能非常重要，性能优化可以说是衡量一个react程序员水平的重要标准。

减少你的渲染

这个大家都明白，只要是父组件中用了子组件，子组件就算没用prop也会进行依次渲染，

可以用pureComponent 或者 shouldComponentUpdate来控制渲染次数，

pureComponent 要注意它是浅比较，如果你的prop是对象，你直接修改对象的值是不会触发子组件渲染的，要改内存地址

也就是把整个对象给替换了，比如说

这个其实就是官网极力推荐的数据不可变,说白了就是不改变原来的复杂对象，深拷贝一份原对象再做更改

当然也可以使用Immutable.js也可以，不过写法有些繁琐，个人不喜欢

shouldComponentUpdate 放在下一节生命周期来讲

少用生命周期

看了官方文档让我感觉，官方是强力推荐用无状态组件的，我想其中一部分原因就是生命周期的问题

componentWillUpdate、componentWillReceiveProps、shouldComponentUpdate、static getDerivedStateFromProps都是消耗性能的，上一篇就举例了componentWillReceiveProps，

要做处理请使用componentDidMount、componentDidUpdate（猜想componentDidMount、componentDidUpdate这2个是在渲染之后执行）

componentWillReceiveProps

第一点：上一篇就说过使用了这个componentWillReceiveProps生命周期是很消耗性能的，尽量不要使用，如果要处理props请放在componentDidMount、componentDidUpdate里使用

第二点：不管是componentWillReceiveProps还是static getDerivedStateFromProps，都最好不要改变子组件state的值，因为改变了state又要再一次触发渲染，本身生命周期就耗性能，你还要在里面增加渲染....

用惯了vue的，经常用watch监听改变data的值，自然就想着在监听改变state的值，一开始我也觉得不使用这种方式的监听某些功能会实现起来很困难，但是后面自己举了几个工作中的实际例子发现目前确实还没有一定要改变state的地方（如果有人看我的博客，也希望有人反驳我）
shouldComponentUpdate

这个相信大家都知道，是专门用来通过手写代码做某些对比来判断是否进行重新渲染的，但是网上有大神测试过（找不到链接了）shouldComponentUpdate执行是很消耗性能的，如果不是渲染特别慢，让它渲染算了~（把自己代码写好了让它少渲染几次其实更重要）
static getDerivedStateFromProps

这是一个静态方法，不能通过this获取任何东西，它改变state只能通过返回对象的形式，这个生命周期官网说是非常少用（基本替代了componentWillReceiveProps，也就是说componentWillReceiveProps也很少用），基本找不到用它的地方，官网是不会错的，既然它这么说了，你相信它就没错了，你想用getDerivedStateFromProps实现的功能用其他方式也可以很轻松的实现，官网有给出解决方案 https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops

提高代码本身的质量

这点很关键，vue上手简单，还有watch、computed等帮助你完成工作，你用久了就会发现它很多东西定的比较死，但是react不一样，一个东西有很多种完美的实现方式（一千个人心中有一千个哈姆雷特），写vue可能看不出2个人的差距，但是react很多东西要自己选择设计实现，就能看出2个人代码功底。

设计好自己的组件，多用无状态组件（函数组件），一个页面相信你不会就用一个组件写完吧，组件设计的合理不仅让人看着舒服让人理解你的逻辑，还能方便维护提高复用的程度，说到复用，我就想到一个同事，他理解的设计组件，就是其他地方需要用他才抽成一个组件，否则一口气写完,,,,

针对这种我只能说写代码是需要动脑子思考的（这点我不接受任何反驳，深有感触有感而发），我们即是代码的搬运工、码农、也要成为工程师，不要一辈子只会复制黏贴，多思考，组件怎么设计，问题更好的解决方案，你才能进步，有一门新技术出现，你只学学怎么使用，不如深入研究一些东西你如何进步呢，这话其实是说给我自己听的，希望自己能不断前行，不前进就会被it这个行业所淘汰

巴特西

React 性能调优记录（下篇），如何写高性能的代码

react性能非常重要，性能优化可以说是衡量一个react程序员水平的重要标准。

减少你的渲染

少用生命周期

提高代码本身的质量

最新文章

热门文章