react 类组件避免无意义渲染提高组件性能

桃扇骨 2021-07-25 00:18 288阅读 0赞

当组件重新渲染时,会浅比较(如比较引用)props和state,如果发生改变就重新渲染组件,当不改变就不渲染组件
    当使用Component时,只要改变了props/state,不管内容是否变化,都会渲染组件
    	
    方案一:
    	在组件中添加shouldComponentUpdate生命周期函数,对数据进行把控后再决定是否渲染
    	shouldComponentUpdate(nextProps,nextState)
    	{
    		if(nextProps.xx===this.props.xx)
    		{
    			return false;
    		}else if(nextState.xx===this.state.xx)
    		{
    			return false;
    		}else{
    			return true;
    		}
    		
    	}
    
    方案二:
    
    	类组件:
    		将Component替换成PureComponent
    			PureComponent内置了shouldComponentUpdate,组件中不能再写shouldComponentUpdate
    			当使用PureComponent时,建议使用immutable.js来管理数据
    				原因:
    					redux中使用immutable.js会每次重新返回immutable对象
    					若只是js,如果只改变了对象属性等,会因为引用没改变,不触发render渲染
    		
    	函数组件:
    		const xx=React.memo(函数)
    		export default xx;

代码示例:

import React,{ PureComponent} from 'react'
    import {  WriterWrapper } from '../style';
    
    
    class Writer extends PureComponent{ 
    
        render()
        { 
            return(
    
                <div>
                   <WriterWrapper>writer</WriterWrapper>
                </div>
            )
        }
    }
    
    export default Writer

发表评论取消回复

表情：

评论列表（有 0 条评论，288人围观）

还没有评论，来说两句吧...

相关阅读

相关避免react重新渲染

段时间一个面试官问我如何避免react重新渲染，当场很懵逼，因为看深入浅出react技术栈这本书的时候，是酱紫讲的：当修改props或者state，diff能够自动计算组...

淩亂°似流年/ 2024年04月19日 09:40/ 0 赞/ 7 阅读

相关 React函数式组件渲染、useEffect顺序总结

> 参考资料： > [深入React的生命周期(上)：出生阶段(Mount)][React_Mount] > [深入React的生命周期(下)：更新(Update)][

﹏ヽ暗。殇╰゛Y/ 2023年10月13日 23:16/ 0 赞/ 57 阅读

相关 react类组件里面使用props

因为项目中的组件，有的用函数组件，有的用类组件，所以两种组件的用法都要掌握，今天说这个`react的类组件里面使用props`： class HomeSupport

深碍√TFBOYSˉ_/ 2022年11月19日 11:17/ 0 赞/ 122 阅读

相关 react创建一个组件（函数组件和类组件及区别）

函数组件和class组件 1、函数组件：编写 JavaScript 函数，返回一个react元素（组件名首字母要大写） function Welcome(pro

今天药忘吃喽~/ 2022年11月12日 15:59/ 0 赞/ 123 阅读

相关 React —— 函数式组件和类式组件

React —— 函数式组件和类式组件 React —— 函数式组件和类式组件一、函数式组件二、类式组件 React —— 函数式

我不是女神ヾ/ 2022年11月07日 14:43/ 0 赞/ 96 阅读

相关 html 无组件上传图片,javascript无组件上传图片类

javascript无组件上传图片类首先声明本代码是转自其他网站的，版权应该归属其所有者，贴出来的目的是为了和大家一起探讨、共同学习。下面是代码： default.asp

野性酷女/ 2022年10月06日 07:52/ 0 赞/ 152 阅读

相关 React之UI组件、容器组件以及无状态组件

一：三种组件的简单理解 > 1.UI组件：只负责页面的渲染 > > 2.容器组件：只负责业务逻辑和数据的处理 > > 3.无状态组件：把UI组件用函数表示（可以省去生

冷不防/ 2022年05月21日 13:45/ 0 赞/ 164 阅读

相关 02-React受控组件及非受控组件、数据渲染、事件处理、组件通信

一、受控组件和非受控组件 React组件的数据渲染是否被调用是通过传递过来的props完全控制控制则为受控组件，否则非受控组件。二、数据渲染 1、条件渲染

「爱情、让人受尽委屈。」/ 2021年07月25日 12:09/ 0 赞/ 358 阅读

相关 react 类组件避免无意义渲染提高组件性能

当组件重新渲染时,会浅比较(如比较引用)props和state,如果发生改变就重新渲染组件,当不改变就不渲染组件当使用Component时,只要改变了prop

桃扇骨/ 2021年07月25日 00:18/ 0 赞/ 289 阅读

相关 react 函数式组件React.memo避免多次渲染

React.memo针对函数式组件使用 (1)第一个参数是函数式组件,第二个参数可选 (2)当props改变时,才会重新渲染组

傷城~/ 2021年07月24日 12:12/ 0 赞/ 517 阅读