首页 > 其他分享 >React - shouldComponentUpdate细化无效更新

React - shouldComponentUpdate细化无效更新

时间:2023-03-22 14:57:36浏览次数:42  
标签:shouldComponentUpdate const nextProps 细化 list React state props

import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'
import { nanoid } from 'nanoid'

const root = ReactDOM.createRoot(document.getElementById('root'))

// PureComponent实现浅比较
class MyApp01 extends React.Component {
  state = {
    list: [1, 2, 3],
  }

  handleClick = () => {
    // ✔ [..this.state.list]表示一个新的数组,内存地址已经发生改变
    // ❌ 浅比较:会导致list的内存地址,一致没有变化
    this.state.list.push(4)
    this.setState(this.state)
  }

  render() {
    const { list } = this.state
    return (
      <>
        <div>
          <button onClick={this.handleClick}>点击修改list</button>
          <Child list={list} />
        </div>
      </>
    )
  }
}

class Child extends React.PureComponent {
  shouldComponentUpdate(nextProps) {
    console.log('this.props.list => ', this.props.list)
    console.log('nextProps.list => ', nextProps.list)
    console.log(
      'nexProps.list === this.props.list ===> ',
      nextProps.list === this.props.list
    )
    if (nextProps.list === this.props.list) {
      return false
    } else {
      return true // 表示更新
    }
  }

  render() {
    const { list } = this.props
    return <h1>Child - {list}</h1>
  }
}

const divNode = (
  <div>
    <MyApp01 />
  </div>
)
root.render(divNode)


标签:shouldComponentUpdate,const,nextProps,细化,list,React,state,props
From: https://www.cnblogs.com/openmind-ink/p/17243919.html

相关文章

  • Argon creative-tim UI with create-react-native-app
    ReactNativeElements开发环境&生成项目&虚拟机调试&本地生成APK档&虚拟机运行APK档1.0 Argoncreative-timUIhttps://demos.creative-tim.com/argon-pro-rea......
  • 在 React 组件中使用 JSON 数据文件,怎么去读取请求数据呢?
    要在React组件中使用JSON数据,有多种方法。常用的有以下几种方法:1、直接将JSON数据作为一个变量或常量引入组件中。importjsonDatafrom'./data.json';functio......
  • react 官网学习笔记
    1.元素(html片段)和组件的关系(js函数)2.写组件的方式(function还是class)3.一个括号和两个括号的使用场景{}(获取值/js函数调用){{}}4.props和render都是做什......
  • 【笔记】electron + react + antd
    electronElectron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。嵌入Chromium和Node.js到二进制的Electron允许您保持一个JavaScript代码代码库......
  • 初学React useEffect Hook
    ReactHooks是从功能组件访问React的状态和生命周期方法的最佳方式。​​useEffect​​​Hook是一个在渲染之后和每次DOM更新时运行的函数(效果)。在本文中,将讨论一些......
  • react循环与条件判断
    react没有语法糖,循环和条件判断都是通过原生js来实现1.条件判断//三元表达式constgetDiv=(flag)=>{return(<div>XXX</div>{flag?<div>条件1</d......
  • react 咻咻咻
    #react必知必会1.函数式组件(简单无状态场景)/class类式组件(复杂有状态场景)2.react思想:状态驱动UI3.组件实例三大核心:refs/props/state4.class=function+hoo......
  • React 限制 Props 和 State 类型
    下面是Component的接口,P代表Props、S代表State。interfaceComponent<P={},S={},SS=any>extendsComponentLifecycle<P,S,SS>{}所以,在tsx中写两个......
  • vue/react关与key的面试题
    虚拟dom中key的作用当状态中的数据发生改变时,react会根据新数据生成新的虚拟dom,随后react进行新虚拟dom与旧虚拟dom的diff算法比较,比较规则如下:1.旧虚拟dom找到了与新......
  • 好客租房44-react组件基础综合案例-5发表评论-1
    发表评论1给按钮绑定点击事件2在事件处理程序中通过state获取评论信息3将评论信息添加到state中并调用setState()方法更新数据//导入reactimportReactfrom'react'imp......