在开发React组件的过程中，我们经常会遇到这个问题：什么情况下组件会重新渲染？
当内部data发生改变，state发生改变(通过调用this.setState()) 以及父组件传过来的props发生改变时，会导致组件重新渲染。
以下几个问题同样值得我们思考：
setState()函数在任何情况下都会导致组件重渲染吗？如果setState中的state没有发生改变呢？
如果state和从父组件传过来的props都没变化，那他就一定不会发生重渲染吗？
首先，我们来解决这两个问题
没有导致state的值发生变化的this.setState(）是否会导致重渲染 --- 会
import React from 'react' class Test extends React.Component{ constructor(props) { super(props); this.state = { Number:1//设state中Number值为1 } } //这里调用了setState但是并没有改变setState中的值 handleClick = () => { const preNumber = this.state.Number this.setState({ Number:this.state.Number }) } render(){ //当render函数被调用时，打印当前的Number console.log(this.state.Number) return(<h1 onClick = {this.handleClick}> {this.state.Number} </h1>) } }
从控制台的打印结果可以看出：共打印了15次1，但是组件并没有发生任何变化！！！
这样的结果不是我们想要的，如何阻止组件的重渲染呢？这时我们想到了React的一个生命周期钩子shouldComponentUpdate
react生命周期中有这样一个钩子，叫shouldComponentUpdate函数，是重渲染时render()函数调用前被调用的函数，
两个参数 nextProps和nextState ，分别表示下一个props和state的值。
当函数返回false时，阻止接下来的render()函数的调用，阻止组件重渲染，返回true时，组件照常渲染
//加入shouldComponentUpdate钩子
//在render函数调用前判断：如果前后state中Number不变，通过return false阻止render调用 shouldComponentUpdate(nextProps,nextState){ if(nextState.Number == this.state.Number){ return false } }
加入上述代码后，打开控制台，点击按钮，还是白白的，说明无效的重渲染被我们阻止了
第二个问题，组件的state和从父组件传递过来的props都没改变，组件还会重渲染吗 ---可能
同样可以通过shouldComponentUpdate钩子进行阻止
所以说，前后不改变state的值的setState和无数据交换的父组件的重渲染都会导致组件的重渲染，但我们可以通过shouldComponentUpdate来阻止这两种情况
shouldComponentUpdate并不是完美的，只能阻止扁平的对象
nextState.Number == this.state.Number 如果调用层次比较深 nextState.NumberObject.number == this.state.NumberObject.number Number 是一个数字变量 NumberObject是一个对象 数字变量(number类型)和对象(Object)类型的内存存储机制不同 这时候，因为两者都指向堆中的同一个对象，所以一直都是true shouldComponentUpdate失效了 js变量分为基本类型的变量和引用类型的变量
对于number,string,boolean,undefined,null这些基本类型变量，值存在栈中
对于object,Array,function这些引用类型变量，引用存在栈中，而不同的引用却可以指向堆内存中的同一个对象
那么，问题就来了
怎么样才能取到不同的NumberObject呢？
