react更新props后this.props === nextProps

2023-10-30

1. this.props always equals to nextProps

结构:父组件:ComparisonChart,子组件:UniversalChart

问题:父组件中state>data传到子组件作为props>data,但是在子组件的shouldComponentUpdate中,this.props和nextProps总是相等。

原因:

// 问题所在
const { data } = this.state
...
data.push(..)
this.setState({ data })
// 写改为
const data = [...this.state.data]

const { data } = this.state其实只是对state.data进行了浅拷贝,此时data指向了state.data的地址,所以data.push(..)已经导致state.data的值改变了,所以this.setState({ data })导致的子组件更新时,this.props和nextProps一样。

参考:

  1. After updating props, this.props is always === nextProps / prevProps:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react更新props后this.props === nextProps 的相关文章

  • react项目按需加载报错 .libraryName is not a valid Plugin property

    babel presets react app plugins import libraryName antd style true 原配置如上会报错 libraryName is not a valid Plugin property g
  • React Native 环境搭建, 新建项目, 运行和调试

    React Native 可以理解为一个基于 JavaScript 具备动态配置能力 面向前端开发者的移动端开发框架 目前为止虽然一直还没有V1 0 0版本 但是相信很多小伙伴都了解过或者已经入坑了 为什么RN那么有人气呢 我们可以先简单分
  • React学习之扩展浅比较(三十四)

    注意 这玩意也已经被React PureComponent的功能取代了 这里依旧是提一下 主要是React v15的版本中的react with addons js 这些玩意还存在 哎 害人呐 引入 import shallowCompar
  • react的条件渲染(或者组件渲染)五种方式 --开发基础总结

    1 使用if的方式判断是否渲染某个组件 function UserGreeting props return h1 Welcome back h1 function GuestGreeting props return h1 Please
  • React的State Hook用法详解

    一 State Hook是啥 State Hook 就是指 useState 这个特殊函数 让你不用编写class 就可以使用state特性 换言之就是让 函数组件 拥有 state 特性 对数据进行动态更新 二 class中的state
  • 对 React Hook的闭包陷阱的理解,有哪些解决方案?

    hooks中 奇怪 其实符合逻辑 的 闭包陷阱 的场景 同时 在许多 react hooks 的文章里 也能看到 useRef 的身影 那么为什么使用 useRef 又能摆脱 这个 闭包陷阱 搞清楚这些问题 将能较大的提升对 react h
  • vue 全局组件注册_如何注册vue3全局组件

    vue 全局组件注册 With the new versions of Vue3 out now it s useful to start learning how the new updates will change the way w
  • Ionic3开发教程 - 开发(2)

    Ionic3开发系列教程Ionic3开发教程 环境准备 1 Ionic3开发教程 开发 2 Ionic3开发教程 发布Android版本 3 Ionic3开发教程 发布IOS版本 4 Ionic3开发教程 更新 5 本文中介绍的Ionic3
  • react 使用 scss

    react 使用 scss 日常记录开发中遇到的坑 1 使用 npm install sass loader node sass S 进行安装 2 在页面中直接使用 有时候可以 有时候不行 原因 我个人觉得安装的两个插件本版兼容问题 nod
  • react组件状态同步-状态提升

    假设定义组件TemperatureInputSon import React from react class TemperatureInputSon extends React Component constructor props su
  • 关于Vue.js和React.js,听听国外的开发者怎么说?

    VueJS 与 ReactJS 到底怎么样如何 听听别人怎么说 使用所有新的库和框架 很难跟上所有这些库和框架 也就是说 这就需要您决定哪些是值得花时间的 让我们看看人们说什么 和Vue JS一起工作是很愉快的 我发现学习曲线很浅 然而 这
  • hook中使用ref使用

    对于antd的fom表单 hook使用ref import React useState useEffect useRef from react const dateRef useRef dateRef current setFieldsV
  • useEffect详情用法

    1 为什么要使用useEffect 想必大家都是用过vue吧 在vue框架所写的项目中 我们通过在与后端进行数据交互的过程中 通常都是会在生命周期中进行数据的请求 然后将数据返回给页面进行渲染 在React中我们也是这样 但是在函数式组件中
  • 前端学科面试题大全

    作用域和值类型引用类型的传递 变量作用域 作用域变量访问区域 变量值存在栈中 变量赋值相当于值赋值 值传递与引用传递有哪些区别 函数内部 变量会先声明 形式参数变量声明提升 整个函数体有var声明的变量 如果没有访问全局定义的num2 函数
  • React实现关键字高亮

    先看效果 实现很简单通过以下这个函数 highLight text keyword gt return text split keyword flatMap str gt span keyword span str slice 1 展示某段
  • quill编辑器使用

    官方git https github com quilljs quill 官方文档 https quilljs com 中文文档 https kang bing kui gitbook io quill 编辑器是个正经编辑器 就是文档太不正
  • vue发展历史简介

    基本介绍 Vue 是一套用于构建用户界面的 渐进式框架 与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用 最初它不过是个人项目 时至今日 已成为全世界三大前端框架之一 github 上拥有 17 8万 Star 领先于 Reac
  • reactJS 干货(reactjs 史上最详细的解析干货)

    一 State和 Props state是状态机 应该包括 那些可能被组件的事件处理器改变并触发用户界面更新的数据 譬如需要对用户输入 服务器请求或者时间变化等作出响应 不应该包括 计算所得数据 React组件 在render 里使用pro
  • React Jsx转换成真实DOM过程?

    面试官 说说React Jsx转换成真实DOM过程 一 是什么 react 通过将组件编写的 JSX 映射到屏幕 以及组件中的状态发生了变化之后 React 会将这些 变化 更新到屏幕上 在前面文章了解中 JSX 通过 babel 最终转化
  • React安装依赖 node_modules中有下载依赖项但package.json文件中没有依赖

    React安装依赖 node modules中有下载依赖项但package json文件中没有依赖 直接在下载依赖项后 加 S 就可以解决 随机 id 生成器 uuid nanoid npm install nanoid S S save

随机推荐