react阻止无效重渲染的多种方式

在开发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，但是组件并没有发生任何变化！！！