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

复制代码
转载请注明出处,未经同意,不可修改文章内容。

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

javascript 复制代码
涉及面试题:
如何提高性能?

编号:[react_17]

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

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

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

因为,在 TodoList 组件里:

javascript 复制代码
class TodoItem extends Component {
  
}

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

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

接着,我们开始本篇的重点:怎样用"生命周期函数" shouldComponentUpdate 去提升组件性能?

2 shouldComponentUpdate 怎么用

打开 TodoItem.js 文件:

jsx 复制代码
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

jsx 复制代码
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!

相关推荐
前端_学习之路35 分钟前
React--Fiber 架构
前端·react.js·架构
coderlin_38 分钟前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码1 小时前
1.
react.js·node.js·angular.js
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui