react中如何阻止无效重渲染

今天小编给大家分享一下react中如何阻止无效重渲染的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。在开发React组件的过程中，我们经常会遇到这个问题：什么情况下组件会重新渲染？当内部data发生改变，state发生改变(通过调用this.setState()) 以及父组件传过来的props发生改变时，会导致组件重新渲染。以下几个问题同样值得我们思考：
setState()函数在任何情况下都会导致组件重渲染吗？如果setState中的state没有发生改变呢？如果state和从父组件传过来的props都没 香港云主机变化，那他就一定不会发生重渲染吗？首先，我们来解决这两个问题没有导致state的值发生变化的this.setState(）是否会导致重渲染—会从控制台的打印结果可以看出：共打印了15次1，但是组件并没有发生任何变化！！！
这样的结果不是我们想要的，如何阻止组件的重渲染呢？这时我们想到了React的一个生命周期钩子shouldComponentUpdatereact生命周期中有这样一个钩子，叫shouldComponentUpdate函数，是重渲染时render()函数调用前被调用的函数，两个参数 nextProps和nextState ，分别表示下一个props和state的值。当函数返回false时，阻止接下来的render()函数的调用，阻止组件重渲染，返回true时，组件照常渲染加入上述代码后，打开控制台，点击按钮，还是白白的，说明无效的重渲染被我们阻止了第二个问题，组件的state和从父组件传递过来的props都没改变，组件还会重渲染吗 —可能同样可以通过shouldComponentUpdate钩子进行阻止所以说，前后不改变state的值的setState和无数据交换的父组件的重渲染都会导致组件的重渲染，但我们可以通过shouldComponentUpdate来阻止这两种情况shouldComponentUpdate并不是完美的，只能阻止扁平的对象如果调用层次比较深
Number 是一个数字变量
NumberObject是一个对象
数字变量(number类型)和对象(Object)类型的内存存储机制不同
这时候，因为两者都指向堆中的同一个对象，所以一直都是true shouldComponentUpdate失效了
js变量分为基本类型的变量和引用类型的变量
对于number,string,boolean,undefined,null这些基本类型变量，值存在栈中
对于object,Array,function这些引用类型变量，引用存在栈中，而不同的引用却可以指向堆内存中的同一个对象
那么，问题就来了怎么样才能取到不同的NumberObject呢？四种方法：1、ES6的扩展语法Object.assign()2、深拷贝/浅拷贝或利用JSON.parse(JSON.stringify(data))相当于深拷贝，但使用受一定限制3、引入immutable.js react官方推荐的第三方库4、继承react的PureComponent组件（代替Component）在js中，引用类型的数据，优点在于频繁的操作数据都是在原对象的基础上修改，不会创建新对象，从而可以有效的利用内存，不会浪费内存，这种特性称为mutable（可变），但恰恰它的优点也是它的缺点，太过于灵活多变在复杂数据的场景下也造成了它的不可控性，假设一个对象在多处用到，在某一处不小心修改了数据，其他地方很难预见到数据是如何改变的，针对这种问题的解决方法，一般就像刚才的例子，会想复制一个新对象，再在新对象上做修改，这无疑会造成更多的性能问题以及内存浪费。为了解决这种问题，出现了immutable对象，每次修改immutable对象都会创建一个新的不可变对象，而老的对象不会改变。immutable.js主要有三大特性：Persistent data structure （持久化数据结构）structural sharing （结构共享）support lazy operation （惰性操作）Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享三个最重要的数据结构： Map List SetMap：键值对集合，对应于 Object，ES6 也有专门的 Map 对象List：有序可重复的列表，对应于 ArraySet：无序且不可重复的列表对于两个一样的数据，只有通过equals进行比较才是相等的 == ===都不行
如果 某个是另一个克隆出来的，那么全部都相等
push添加 unshift在头部添加 concat组合 返回的是新数据，而不是数据的长度
优点：降低mutable带来的复杂度节省内存历史追溯性（时间旅行）：时间旅行指的是，每时每刻的值都被保留了，想回退到哪一步只要简单的将数据取出就行，想一下如果现在页面有个撤销的操作，撤销前的数据被保留了，只需要取出就行，这个特性在redux或者flux中特别有用拥抱函数式编程：immutable本来就是函数式编程的概念，纯函数式编程的特点就是，只要输入一致，输出必然一致，相比于面向对象，这样开发组件和调试更方便缺点：需要重新学习api资源包大小增加（源码5000行左右）容易与原生对象混淆：由于api与原生不同，混用的话容易出错。
以上就是“react中如何阻止无效重渲染”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注开发云行业资讯频道。

相关推荐: Git与SVN的区别是什么

本篇内容主要讲解“Git与SVN的 香港云主机区别是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Git与SVN的区别是什么”吧!Git 不仅仅是个版本控制系统，它也是个内容管理系统(CMS)，工作管理系统等。…