【react框架】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的_H5之家

凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说，其state的改变（调用this.setState()方法）以及从父组件接受的props发生变化时，会导致组件重渲染，正所谓"学而不思则罔"，在不断的学习中，我开始思考这一些问题：

1.setState()函数在任何情况下都会导致组件重渲染吗？如果setState()中参数还是原来没有发生任何变化的state呢？

2.如果组件的state没有变化，并且从父组件接受的props也没有变化，那它就一定不会重渲染吗？

3.如果1，2两种情况下都会导致重渲染，我们该如何避免这种冗余的操作，从而优化性能？

下面我就用实例一一探讨这些问题：

没有导致state的值发生变化的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} style ={{margin:30}}> {this.state.Number} </h1>) } } export default Test //省略reactDOM的渲染代码...

demo：

点击1一共15次，其间demo没有发生任何变化

控制台输出：（我点击了1一共15次 _(:3 」∠)_）

那么问题就来了，我的UI明明就没有任何变化啊，为什么要做着中多余的重渲染的工作呢？把这工作给去掉吧！

于是这里react生命周期中的shouldComponentUpdate函数就派上用场了！shouldComponentUpdate函数是重渲染时render()函数调用前被调用的函数，它接受两个参数：nextProps和nextState，分别表示下一个props和下一个state的值。并且，当函数返回false时候，阻止接下来的render()函数的调用，阻止组件重渲染，而返回true时，组件照常重渲染。

我们对上面的情况做一个小小的改动：

import React from 'react' class Test extends React.Component{ constructor(props) { super(props); this.state = { Number:1 } } //这里调用了setState但是并没有改变setState中的值 handleClick = () => { const preNumber = this.state.Number this.setState({ Number:this.state.Number }) } //在render函数调用前判断：如果前后state中Number不变，通过return false阻止render调用 shouldComponentUpdate(nextProps,nextState){ if(nextState.Number == this.state.Number){ return false } } render(){ //当render函数被调用时，打印当前的Number console.log(this.state.Number) return(<h1 onClick = {this.handleClick} style ={{margin:30}}> {this.state.Number} </h1>) } }

点击标题1，UI仍然没有任何变化，但此时控制台已经没有任何输出了，没有意义的重渲染被我们阻止了！

组件的state没有变化，并且从父组件接受的props也没有变化，那它就还可能重渲染吗？——【可能！】

import React from 'react' class Son extends React.Component{ render(){ const {index,number,handleClick} = this.props //在每次渲染子组件时，打印该子组件的数字内容 console.log(number); return <h1 onClick ={() => handleClick(index)}>{number}</h1> } } class Father extends React.Component{ constructor(props) { super(props); this.state = { numberArray:[0,1,2] } } //点击后使numberArray中数组下标为index的数字值加一，重渲染对应的Son组件 handleClick = (index) => { let preNumberArray = this.state.numberArray preNumberArray[index] += 1; this.setState({ numberArray:preNumberArray }) } render(){ return(<div style ={{margin:30}}>{ this.state.numberArray.map( (number,key) => { return <Son key = {key} index = {key} number ={number} handleClick ={this.handleClick}/> } ) } </div>) } } export default Father