（17）React 进阶——⑦ React 生命周期函数（中）：巧用 shouldComponentUpdate 提升组件性能 | React 基础理论实操

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

涉及面试题：
如何提高性能？

编号：[react_17]

1 为什么只有 render 函数需要我们自己定义

❗️为了便于讲解，请将 TodoList 里的代码同步至《React 入门：⑥ TodoList 代码优化》中的版本。

在这个版本中，我们发现：上一篇讲的所有“生命周期函数”，在这里只出现了一个 render 。基于此，我们也可以反向得出：在 React 里，除了 render ，其他剩余的“生命周期函数”都可以不显式地写出来。

因为，在 TodoList 组件里：

class TodoItem extends Component {
  
}

TodoList 组件是继承自 Component 这个组件的。在 React 的 Component 组件里，它默认内置了除 render 以外的所有“生命周期函数”。

故，我们需要自己去定义 render 函数，否则程序就会报错（不信，你可以删掉 render 试一下）。

接着，我们开始本篇的重点：怎样用“生命周期函数” shouldComponentUpdate 去提升组件性能？

2 shouldComponentUpdate 怎么用

打开 TodoItem.js 文件：

import React, { Component } from "react";

class TodoItem extends Component {
  constructor(props) {
    super(props);
    
    this.handleClick = this.handleClick.bind(this);
  } 
  
  render() {
    console.log("child render") /*
    														我们在这里让控制台打印一些信息，
    														以帮助我们直观地观察到 render 函数被自动执行；
                                 */
    
    const {content} = this.props
    
    return(
      <div onClick={this.handleClick}> 
        {content}  
      </div>
    )
  }
  
  handleClick() {  
    const {itemDelete, index} = this.props
    
    itemDelete(index)
  }
}

export default TodoItem;

2️⃣观察以下短视频中我在页面的操作（会发现，我们在页面 input 框——父组件里的任何操作，都会触发子组件 render  函数的执行）：

❌这就带来一个“性能损耗”的问题： 因为，我在页面 input 框输入内容且未提交时，子组件根本就没必要跟着不停渲染。

❓怎样去做“性能”优化呢？ 答：利用“生命周期函数” shouldComponentUpdate 。

import React, { Component } from "react";

class TodoItem extends Component {
  constructor(props) {
    super(props);
    
    this.handleClick = this.handleClick.bind(this);
  } 
  
  // 🏆我们可以在这个“生命周期函数”里去定义一些逻辑：
  shouldComponentUpdate(nextProps, nextState) { /*
  																		1️⃣首先，这个函数会接收两个参数：
  																		nextProps 和 nextState。
                                      
                                      它们分别指，当我的这个组件要被“更新”的时候：
                                  		①nextprops——“接下来，我的 props”会被变成什么样；
                                 		  ②nextState——“接下来，我的 state”会被变成什么样。
                                 		             */
    
    if(nextProps.content !== this.props.content) { /*
    																						2️⃣如果“接下来，我的 props”里的 content，
                                                不等于当前 props 里的 content；
                                                	  */
      
      return true; // 3️⃣我就返回 true，因为 content 的值发生了变化，我需要让这个子组件重新渲染；
    }else {
      return false; // 4️⃣否则，返回 false，不用渲染子组件。
    }
  
    
  }
  
  render() {
    console.log("child render")  
    const {content} = this.props
    
    return(
      <div onClick={this.handleClick}> 
        {content}  
      </div>
    )
  }
  
  handleClick() {  
    const {itemDelete, index} = this.props
    
    itemDelete(index)
  }
}

export default TodoItem;

返回页面控制台查看变化（子组件不再作无谓的渲染）：

祝好，qdywxs ♥ you！