React之shouldComponentUpdate的用法

简介: React之shouldComponentUpdate的用法

为什么要使用shouldComponentUpdate?

只要是组件继承自React.Component就会存在当父组件重新render的时候,子组件也会重新执行render,即使这个子组件没有任何变化。子组件只要调用setState就会重新执行render,及时setState的参数是一个空对象。

shouldComponentUpdate的用法

在子组件中:

shouldComponentUpdate(nextProps,nextState) {
    if (nextProps.m1 === this.props.m1 && nextState.m2 === this.state.m2) {
        return false;
    } else {
        return true;
    }
}
复制代码

根据下面的React生命周期流程图可知,当shouldComponentUpdate返回为true的时候,当前组件进行render,如果返回的是false则不进行render.

image.png

codeSandBox在线演示

相关文章
react-withRouter 用法
react-withRouter 用法
131 0
|
3月前
|
缓存 JavaScript 前端开发
react.js高级用法
【8月更文挑战第27天】react.js高级用法
40 2
|
3月前
|
Web App开发 监控 前端开发
React 性能监测工具大揭秘!Chrome DevTools 高级用法来袭,让你的 React 应用性能飙升!
【8月更文挑战第31天】在前端开发中,React 框架虽简化了高效、交互性强的用户界面构建,但应用复杂性增加亦可能引发性能问题。此时,Chrome DevTools 凭其性能面板成为了优化应用性能的重要工具,能帮助开发者记录与分析加载时间、渲染及脚本执行等性能指标,定位并解决性能瓶颈。同时,其 React 开发者扩展工具允许实时监控组件状态变化,进一步提升性能。结合运用这些功能,将有助于打造流畅的用户体验。
107 0
|
6月前
|
前端开发 UED
React 防抖与节流用法
React 防抖与节流用法
184 0
|
6月前
|
前端开发 JavaScript
react中refs的作用是什么?有几种用法?
react中refs的作用是什么?有几种用法?
|
6月前
|
存储 前端开发 JavaScript
[React] useRef用法和特性
[React] useRef用法和特性
102 0
|
前端开发 JavaScript
React Hooks 用法详解3
React Hooks 用法详解
|
前端开发 JavaScript API
React Hooks 用法详解2
React Hooks 用法详解
|
缓存 前端开发 JavaScript
React Hooks 用法详解1
React Hooks 用法详解
|
前端开发
react中使用shouldComponentUpdate生命周期函数调用setState引起的无限循环的错误
react中使用shouldComponentUpdate生命周期函数调用setState引起的无限循环的错误
131 0