1. Component存在的问题?
    1). 父组件重新render(), 当前组件也会重新执行render(), 即使没有任何变化
    2). 当前组件setState(), 重新执行render(), 即使state没有任何变化
  2. 解决Component存在的问题
    1). 原因: 组件的componentShouldUpdate()默认返回true, 即使数据没有变化render()都会重新执行
    2). 办法1: 重写shouldComponentUpdate(), 判断如果数据有变化返回true, 否则返回false
    3). 办法2: 使用PureComponent代替Component
    4). 说明: 一般都使用PureComponent来优化组件性能
  3. PureComponent的基本原理
    1). 重写实现shouldComponentUpdate()
    2). 对组件的新/旧state和props中的数据进行浅比较, 如果都没有变化, 返回false, 否则返回true
    3). 一旦componentShouldUpdate()返回false不再执行用于更新的render()
  4. 面试题:
    组件的哪个生命周期勾子能实现组件优化?
    PureComponent的原理?
    区别Component与PureComponent?

react中component存在性能问题的更多相关文章

  1. react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

    第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...

  2. React 中的 Component、PureComponent、无状态组件 之间的比较

    React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...

  3. React Native 中 component 生命周期

    React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/518136 ...

  4. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  5. React中Props 和 State用法

    React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...

  6. 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

  7. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

  8. React中静态类型校验 - PropTypes

    1.基本说明PropTypes定义为组件类自身的属性,用以定义prop的类型.在开发模式下,当提供一个不合法的值作为prop时,控制台会出现警告: 在产品模式下,为了性能考虑应忽略propTypes ...

  9. 【React】393 深入了解React 渲染原理及性能优化

    如今的前端,框架横行,出去面试问到框架是常有的事. 我比较常用React, 这里就写了一篇 React 基础原理的内容, 面试基本上也就问这些, 分享给大家. React 是什么 React是一个专注 ...

随机推荐

  1. 如何使用Laravel Debugbar?

    非常好用的Laravel debug工具,一定要安装 Chrome/FireFox 都会自带一些 debug 工具可以帮助我们 debug 前端,如 CSS.JavaScript… 等,但若要 deb ...

  2. python在pycharm中导包一直出错的问题

    之前的net在code的子目录中,怎么调试都无法解决.最后用一个简单粗暴的方式,将net直接拿到项目的根目录中.如此即可

  3. kudu安装

    安装前提和准备: 硬件: 一台或者多台机器跑kudu-master.建议跑一个master(无容错机制).三个master(允许一个节点运行出错)或者五个master(允许两个节点出错). 一台或者多 ...

  4. fullpage.js最后一屏不满一屏时,滚动方式

    这两天公司网页改版用到fullpage.js这个滚屏插件,页面内容整屏的滚动,不成问题,各种设置在网上也都有文档.而我遇到的问题就是,页面内容不满屏的时候,和上面的内容放一块就太挤,单独放一屏就太空, ...

  5. 数据管理必看!Kendo UI for jQuery过滤器状态保持

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  6. Vue 页面 前进刷新 后退不刷新(keepAlive)

    前言 遇到这一个个问题  需要是这样的 Vue里面的不刷新问题 页面分为: A 主页  B列表页  C 详情页 A  beforeRouteLeave 时设置 to.meta.keepAlive = ...

  7. shell编程初探

    #! /bin/sh #这是神圣丁的第一个shell脚本 name="陈培昌" echo "我就喜欢\"$name\"" echo '我就喜 ...

  8. sql 为空不做查询条件

    select * from usertable where 1=1 and (name=@name or @name='') and (page=@page or @page='')

  9. Jmeter工具使用-分布式架构和服务器性能监控解决方案

    在对项目做大并发性能测试时,常会碰到并发数比较大(比如需要支持10000并发),单台电脑的配置(CPU和内存)可能无法支持,这时可以使用Jmeter提供的分布式测试的功能来搭建分布式并发环境. 一.J ...

  10. Neko does Maths CodeForces - 1152C 数论欧几里得

    Neko does MathsCodeForces - 1152C 题目大意:给两个正整数a,b,找到一个非负整数k使得,a+k和b+k的最小公倍数最小,如果有多个k使得最小公倍数最小的话,输出最小的 ...