关键词：
这几天陆陆续续看了一些关于React性能优化的博客，大部分提到的都是React 15.3新加入的PureComponent ，通过使用这个类来减少React的重复渲染，从而提升页面的性能。使用过React的朋友都知道，React组件只有在state和props发生改变时才会触发render，如果state和props没有发生改变，render就不执行。通常在写页面的时候，如果没有使用PureComponent类，为了避免重复渲染而产生的性能问题，我们会使用shouldComponentUpdate手动来比较页面是否需要重新渲染，这时我们是可以进行深比较的，也就是将当前的state与nextState或者props与nextProps一层一层进行比较，如果比较发现不相等，这个函数就返回true从而使组件重新渲染，如果比较后发现值没有改变则返回false来阻止组件重新渲染。当我们使用了PureComponent类后，就不再需要手动检查组件是否需要重新渲染了，因为PureComponent会帮我们检查state和prop是否发生改变，从而决定是否要调用render方法，从而提高性能。但是需要注意的是，使用PureComponent时，React只是做了最外层的浅比较：
if (this._compositeType === CompositeTypes.PureClass)
shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
shadowEqual只会浅检查组件的props和state，所以嵌套对象和数组是不会被比较的。所以使用了PureComponent的时候，我们要特别注意这一点。
好了，今天要分享的除了上面的关于PureComponent的原理外，还要分享一篇关于React性能优化的干货博客，
英文原文： React Performance Fixes on Airbnb Listing Pages:https://medium.com/airbnb-engineering/recent-web-performance-fixes-on-airbnb-listing-pages-6cd8d93df6f4
译文：Airbnb 爱彼迎房源详情页中的 React 性能优化:https://juejin.im/entry/5bab390c5188255c8a06013f
转载地址：https://www.f2ecoder.net/857.html
react16加载性能优化指南(代码片段)
关于React应用加载的优化，其实网上类似的文章已经有太多太多了，随便一搜就是一堆，已经成为了一个老生常谈的问题。但随着React16和Webpack4.0的发布，很多过去的优化手段其实都或多或少有些“过时”了，而正好最近一段时... 查看详情
你可能没有关注过的react性能优化(代码片段)
...此机会让大家卷起来，毕竟能力是自己的。先说两句关于我今天想写的内容，大部分你其实都可以在React官方文档上学习到。那为什么我 查看详情
[react]react的性能优化在哪个生命周期？它优化的原理是什么？
[react]react的性能优化在哪个生命周期？它优化的原理是什么？shouldComponentUpdate减少不必要的重新渲染 个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目... 查看详情
react组件性能优化总结(代码片段)
性能优化的思路影响网页性能最大的因素是浏览器的重排(repaint)和重绘(reflow)。React的VirtualDOM就是尽可能地减少浏览器的重排和重绘。从React渲染过程来看，如何防止不必要的渲染是解决问题的关键。性能优化的具体办法1.尽量多... 查看详情
react组件性能
一、渲染原理二、性能优化三、Immutable在性能优化中的作用 查看详情
react性能优化
1.shouldComponentUpdate 一个组件更新时，无论是设置了新的props/调用了setState方法/调用forceUpdate方法，React都会调用该组件所有子组件的render方法。在组件树深度嵌套或render方法十分复杂的页面上这可能会带来延... 查看详情
react组件性能优化
转自：https://segmentfault.com/a/1190000006100489React:一个用于构建用户界面的JAVASCRIPT库.React仅仅专注于UI层；它使用虚拟DOM技术，以保证它UI的高速渲染；它使用单向数据流，因此它数据绑定更加简单；那么它内部是如何保持简单高效的... 查看详情
react性能优化(代码片段)
...安插在JavaScript逻辑和实际的DOM之间。这一概念提高了Web性能。在UI渲染过程中，React通过在虚拟DOM中的微操作来实对现实际DOM的局部更新。在Web开发中，我们总需要将变化的数据 查看详情
react+redux渲染性能优化原理
大家都知道，react的一个痛点就是非父子关系的组件之间的通信，其官方文档对此也并不避讳：Forcommunicationbetweentwocomponentsthatdon‘thaveaparent-childrelationship,youcansetupyourownglobaleventsystem.SubscribetoeventsincomponentDidMount(),unsub 查看详情
react的几种性能优化
1shouldComponentUpdate PureComponent2 循环key3 路由懒加载(react-loadable)4 图片懒加载5 事件绑定不要写在标签里，从外面引方法6immutable 持续更新---- 陆续把几种优化原理跟使用方法更新上来 查看详情
react-性能优化
开发中遇到一个需要优化的性能，页面需要渲染很多table，而且可以自己添加table，所以就导致router改变时，清除这些DOM结构就会很慢，这就给用户造成不好的体验。问题所在：清除渲染过多的DOM结构才导致迟... 查看详情
react实用的性能优化方式
react组件渲染分为初始化渲染和更新渲染，当我们更新某个组件的时候，只是想关键路径上组件的render,但react的默认做法是调用所以组件的reder,再生成虚拟dom进行对比，如不变则不进行更新。这样的render和虚拟DOM的对比明显是在... 查看详情
React Native - 在使用 React 钩子时减少渲染时间以优化性能
】ReactNative-在使用React钩子时减少渲染时间以优化性能【英文标题】：ReactNative-reducerendertimestooptimizeperformancewhileusingReacthooks【发布时间】：2020-09-1218:30:15【问题描述】：背景在释放Reactv16.8之后，现在我们可以在ReactNative中使用钩... 查看详情
react组件性能优化探索实践
转自：http://www.tuicool.com/articles/Ar6ZruqReact本身就非常关注性能，其提供的虚拟DOM搭配上Diff算法，实现对DOM操作最小粒度的改变也是非常的高效。然而其组件渲染机制，也决定了在对组件进行更新时还可以进行更细致的优化。react... 查看详情
优化 React 应用程序 - 仅根据 React [React.JS]
...高“React应用程序”的性能-仅就反应而言。他不想要任何关于CSS（连接/缩小）、JS（连接/缩小）、图像（Image-Sprites或使用SVG 查看详情
如何对react进行性能优化
...this.props(不要滥用，请只传递component需要的props，传得太多，或者层次传得太深，都会加重shouldComponentUpdate里面的数据比较负担，因此，也请慎用spreadattributes（<Component...props/>）)。::this.handleChange()。(请将方法的bind一律置... 查看详情
react.component与react.purecomponent（react之性能优化）(代码片段)
前言先说说shouldComponentUpdate提起React.PureComponent，我们还要从一个生命周期函数shouldComponentUpdate说起，从函数名字我们就能看出来，这个函数是用来控制组件是否应该被更新的。React.PureComponent通过prop和state的浅对比来实现shouldComp... 查看详情
[react]你知道的react性能优化有哪些方法？(代码片段)
[react]你知道的react性能优化有哪些方法？shouldComponentUpdatePureComponent：ClassComponentReact.Memo：FunctionComponentuseCallback：MemoizedFunctionuseMemo：MemoziedValue 个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃... 查看详情