react之组件的shouldcomponentUpdate使用&&Component与PureComponent

1). Component存在的问题?

a. 父组件重新render(), 当前组件也会重新执行render(), 即使没有任何变化

b. 当前组件setState(), 重新执行render(), 即使state没有任何变化

  测试代码如下,首先是a情况

/**父组件 */
import React, { Component } from ‘react‘
import Child from ‘./Child‘
class Parent extends Component {
    state = {
        money:100
    }
    changeFn = () => {
        this.setState(state=>({
            money:state.money+1
        }))
    }
    render() {
        console.log(‘parent render‘)
        return (
            <>
                <h2>parent组件:{this.state.money}</h2>
                <button onClick={this.changeFn}>Parent测试</button>
                <Child></Child>
            </>
        );
    }
}

export default Parent;

/**子组件 */

import React, { Component } from ‘react‘

class Child extends Component {

state = {

money:100

}

changeFn = () => {

this.setState(state=>({

money:state.money+1

}))

}

render() {

console.log(‘child render‘)

return (

<>

<h2>child组件:{this.state.money}</h2>

<button onClick={this.changeFn}>Child测试</button>

</>

);

}

}

export default Child;

  此时修改父组件

  

  如果父组件传入子组件状态,状态更新,两者都更新,这符合正常逻辑,如下所示。但上述的两者并不存在状态继承

  

  b情况测试如下:

  

  此时state并没有更新,但还是触发了render。

  这里的问题便涉及到react生命周期相关,钩子图如下

  

  局部放大我们查看下

  

  这里shouldcomponentUpdate默认值为true,所以会往下执行更新流程。如下所示

  

b. 办法1: 重写shouldComponentUpdate(), 判断如果数据有变化返回true, 否则返回false
c. 办法2: 使用PureComponent代替Component
d. 说明: 一般都使用PureComponent来优化组件性能

  重写方案进行优化完整如下

  

  此时测试如下,子组件点击时不再render

  

  但是目前为止state都是基本数据类型,如果较为复杂时则该方案较难比较,需要自行进行依次对比----浅比较.

  

  

2). 解决Component存在的问题

a. 原因: 组件的shouldcomponentUpdate()默认返回true, 即使数据没有变化render()都会重新执行

b. 办法1: 重写shouldComponentUpdate(), 判断如果数据有变化返回true, 否则返回false

c. 办法2: 使用PureComponent代替Component

d. 说明: 一般都使用PureComponent来优化组件性能

3). PureComponent的基本原理

  

  如下所示

  

  此时便解决了以上问题

a. 重写实现shouldComponentUpdate()

b. 对组件的新/旧state和props中的数据进行浅比较, 如果都没有变化, 返回false, 否则返回true

c. 一旦componentShouldUpdate()返回false不再执行用于更新的render()

  这里可以结合项目角色授权组件进行测试。 

  

  测试发现没有更新子组件,关闭时父组件render,子组件也会触发render。修改如下

  

4). 面试题:

组件的哪个生命周期勾子能实现组件优化?

PureComponent的原理?

区别Component与PureComponent?

5)PureComponent使用注意:

  如果组件内部的state为对象或数组格式,当该对象或数组内部发生改动时,不能直接获取setState,这里必须使用解构赋值,将对象或数组内部展开,再重新赋值,才会改动

  1、该写法无效,不会触发更新

  

  2、解构赋值展开内部才会触发更新

  

  所以为了避免不必要问题,尽量多用解构赋值写法。

***  PureComponent使用注意事项:  即如果改变的是数组或对象内部的某个状态,则必须使用解构赋值语法重新setState,否则不会更新***.

  

  

.

原文地址:https://www.cnblogs.com/jianxian/p/12630708.html

时间: 2024-11-04 05:02:18

react之组件的shouldcomponentUpdate使用&&Component与PureComponent的相关文章

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

React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px } 组件类型 说明 React.createClass 不使用ES6语法,只能使用 React.createClass 来创建组件:React对属性中的所有函数都进行了this绑定 Component 使用ES6语法创建组件:React并没有对内部的函数,进行this绑定 PureComponent shouldComponentUp

react常见组件问题Can&#39;t perform a React state update on an unmounted component

在些react组件的时候,会有这个警告 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method” 这是因为在写一

react项目Bug:组件销毁清除监听(Can&#39;t perform a React state update on an unmounted component.)

最近一直在做react项目,发现一个bug,困扰了我两天. Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount metho

React Native组件、生命周期及属性传值props详解

创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { render (){ return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text> } } 第二种:通过ES5的方式创建 /** * 方式二:ES5 */ var HelloComponent= React.c

React 的组件生命周期

React组件的state或者props发生改变后会导致这个组件重新渲染,此时DOM也会有相应的变化.其中只有Render方法在上一篇博文中提到过,就是DOM渲染时的方法.当然,只有这个方法是不够的哦!,引文在实际的开发中,开发者们需要对组件的各个阶段进行控制,这样就可以高效的进行开发了,为此,就有了React的组件生命周期的概念. 对于一个基本的React组件,可以把每一个React组件的生命周期分为初始化.挂载.更新.卸载四个阶段,在React的这四个阶段中提供了不同的方法,以方便开发者有足

React学习—组件

一.定义 组件就像JavaScript的函数.组件可以接收任意输入(称为"props"), 并返回 React 元素,用以描述屏幕显示内容. 二.组件的分类 1.函数式组件(无状态组件) 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作.在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构建成其他的组件等:这种通过多个简单然后合并成一个大应用的设计模式被提倡. function Welcome(props) { re

浅谈react受控组件与非受控组件

最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为空值而不是具体的传入的值.具体编辑页面中文本框相关的代码如下:         ... //render方法上面的内容省略  <FormItem       label="问题描述:"       hasFeedback      {...props.formItemLayout}  &g

3.React Native在Android中自定义Component和Module

React Native最终展示的UI全是Native的UI,将Native的信息封装成React方便的调用.那么Native是如何封装成React调用的?Native和React是如何交互的? ViewManager UI组件:将Native的UI暴露出来供JS调用. Native组件封装成JS组件供JS调用.这里的一个问题是怎么将Native中的属性用在JS中,以及属性可以有哪些类型的?可以先思考一下. 下面Native的代码自定义了一个View并定义了一个变化的属性color. publi

Android React Native组件的生命周期及回调函数

熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开发中,React Native组件的生命周期,大致分为三个阶段,分别是: 1.组件第一次绘制阶段,这个阶段主要是组件的加载和初始化: 2.组件在运行和交互阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面: 3.组件卸载消亡的阶段,这个阶段主要是组件的清理工作. 在Android React