java 刷新component_React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命...

最新推荐文章于 2023-05-11 23:05:30 发布
最新推荐文章于 2023-05-11 23:05:30 发布
阅读量344 收藏
点赞数
文章标签： java 刷新component
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39836860/article/details/115075339
版权

React应用在初始化和更新的过程中，会经过一系列的逻辑，React在不同的逻辑时期会执行不同的生命周期函数，用来给我们做一些处理。

对于初次挂载来说，也就是整个React应用初始化时会执行componentWillMount和componentDidMount生命周期函数

对于更新应用时,比如父组件修改了子组件的props、组件执行了setState()更改了state, 还有组件所在的context环境发生变化时，都会执行更新操作，对于更新来说，会执行componentWillUpdate和componentDidUpdate生命周期函数

这几个生命周期函数的用法如下:

componentWillMount()　　　　　　　　　　　　　　　　;组件将要挂载时触发的函数

componentDidMount() 　　　　　　　　　　　　　　　　;组件挂载完成时触发的函数

componentWillUpdate(newProps,newState,newContext)    ;组件将要更新数据时触发的函数，参数如下

newProps　　;新的props

newState 　   ;新的State

newContext   ;新的context

componentDidUpdate(newProps,newState,Snapshot)   ;组件数据更新完成时触发的函数，参数如下:

newProps　　;新的props

newState 　   ;新的State

Snapshot       ;由componentWillReceiveProps生命周期返回的快照

对于componentWillMount和componentDidMount来说它们是没有参数的，而且一个组件挂载时只会执行一次。

举个栗子，需求:定义了两个组件:App组件和Person组件，App组件引用了Person组件并且传入了一个名为no的props,另外在App组件和Person组件内都定义了一个button按钮，分别用于修改Person组件的props和state变化，另外我们在Person组件内分别定义了上面讲解到的4个生命周期函数，代码如下:

weixin_39836860
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SwitchHosts_installer_x64_4.1.2.6085.exe
06-01
SwitchHosts 是一个管理 hosts 文件的应用，基于 Electron 、React、UmiJS 、Chakra UI、CodeMirror 等技术开发
组件化开发-05.01-组件状态的修改——componentDidMount组件更新是异步的；setState连续调用，不保证每次调用都会更新页面；通过返回一个新的state的方式来修改原有的状态数据
weixin_44867717的博客
02-02 930
组件状态的修改——componentDidMount组件更新是异步的；setState连续调用，不保证每次调用都会更新页面；通过返回一个新的state的方式来修改原有的状态数据 类组件中状态的变化必须使用setState，不可以直接修改 状态的修改操作是异步的 不建议频繁调用setState class AboutState extends React.Component { constructor(props) { super(props); this.state = {
react面试题（自学记录）
qq_47522010的博客
12-30 125
React面试题（自用版）
componentWillMount 和 componentDidMount的区别
热门推荐
qq_38719039的博客
09-04 8万+
一、 调用时期不同 转自：https://www.cnblogs.com/xyn0909/p/8516074.html 1、componentWillMount 将要装载，在render之前调用； componentDidMount，（装载完成），在render之后调用 2、componentWillMount 每一个组件render之前立即调用； compo...
React生命周期方法之 componentDidMount
star_zone的博客
03-22 3万+
1. componentDidMount() 这个生命周期方法应该是用的最多的，一般用在进入页面后，数据初始化，这种情况下，跟model中的subscription方法作用是一样的。但是当你数据初始化方法都写在subscription方法时，当你改了页面访问路径，model里面的path没改过来，初始化方法就调不到了。但是要是把数据初始化接口都放在componentDidMount函数里，只要进...
「React 基础」组件生命周期函数componentDidMount()介绍
前端达人
02-04 1万+
大家好，今天我们将通过一个实例——番茄计时器，学习下如何使用函数生命周期的一个重要函数componentDidMount()：在组件加载完成， render之后进行调用，只会执行一次。番...
REACT生命周期：componentwillmount(), componentWillReceiveProps()替换方案（2023更新useEffect）
09-03 4509
},[]), useEffect中的cleanup，它会在组件从UI中remove的时候执行，看上去完美适配了componentWillUnmount这个生命周期的作用，但需要注意的是，useEffect多次执行的时候，cleanup其实会在第二次执行的时候也先执行一遍cleanup。,[someValue])，填了依赖的useEffect，当依赖someValue改变的时候，useEffect重新执行，组件被重新evaluated & rendered，依赖也随之被重新evaluated。
componentDidMount 用法
秋霜梦红尘的博客
05-31 4240
componentDidMount 用法 import React, { Component } from 'react'; // 封装组件 class Hellow extends React.Component{ constructor(props){ super(props); // 设置初始透明度为1 this.state = {opacity:1.0} } // 组件渲染后调用 componentDidMount(){
zhangmeng.React.rar_React_www.zhangmeng.com
09-23
一个关于react.js的测试小dome
Python库 | lino_react-21.6.4.tar.gz
05-17
资源分类：Python库 所属语言：Python 资源全名：lino_react-21.6.4.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
Python库 | lino_react-22.1.2.tar.gz
04-10
资源分类：Python库 所属语言：Python 资源全名：lino_react-22.1.2.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
React Native的同步存储_Synchronous_storage_for_React_Native.
06-03
React Native的同步存储_Synchronous_storage_for_React_Native. html javascript
componentDidMount()
GoodIdea
02-20 5757
componentDidMount()紧跟在组件装载后（被插入树中）调用。要求的DOM节点初始化应该放到这里。若你需要从远端加载数据，这是一个适合实例化网络请求的好地方。 这个方法是建立任何订阅的一个好地方。如果你那么做了，别忘了在componentWillUnmount()取消订阅。 在componentDidMount()中，你 可以立即调用setState()。它将会触发一次额外的渲染，...
React生命周期的各个阶段是什么？
油墨香^-^的博客
10-14 504
官方将更新state与触发回调重新分配到了componentWillReceiveProps()中，让组件整体的更新逻辑更加清晰，并且在当前生命周期中，禁止使用this.props，强制让开发者们通过比较nextProps和PrevState去保证数据的正确行为。在每次组件更新时，react通过diff算法比较更新前和更新之后的dom节点，找到最小的有差异的dom位置并更新，花费最小的开销。5componentWillUnmount()： 在这个生命周期完成组件的数据销毁和卸载，移除所有的定时器和监听。
React生命周期钩子函数
越努力，越幸运！
01-28 7574
前言 所谓的生命周期就是指某个事物从开始到结束的各个阶段，就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。当然在 React.js 中指的是组件从创建到销毁的过程，React 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是React 的生命周期，各个阶段有相对应的事件钩子，用户可以在特定的阶段调用特定的方法。每个阶段组件内部的属性都是不一样的，所以一般特定的钩子做特定的事。 一、React生命周期..
React父组件在componetDidMount中传值给子组件问题
街道口扛把子的博客
05-11 405
React代码中，父组件在componentDidMount中初始化各种数据，最后通过this.setState传值给子组件的props，子组件在componentDidMount中读取this.props设置给它的state。但测试时会发现页面初始化时，子组件在componentDidMount中并没有接收到父组件初始化的数据，但此时若打印出子组件的props时，可以看到这里有父组件传递的值。因此猜测应当是父组件setState还未完成时，组件便已完成渲染，子组件的props此时还没有接收到数据。
组件化开发-05-生命周期——componentDidUpdate-更新&componentDidMount-载入-须使用setState方法修改状态值&componentWillUnmount-卸载
weixin_44867717的博客
02-01 3317
react生命周期——componentDidUpdate-组件更新 & componentDidMount-组件载入–修改状态的值-不可以直接修改，必须使用setState方法 & componentWillUnmount-组件卸载 组件的生命周期 图解 componentDidMount 完成组件挂载后触发，类似于Vue中mounted 一般用于调用后台接口获取数据并更新state中的数据 组件内部状态的修改必须使用setState方法 componentWillUnmount
componentDidMount周期函数连续执行两次
qq_43704742的博客
06-24 4376
在react中， 当你排除其他props更新两次 且在你运行的时候构造函数和render函数都只调用的了一次，而componentDidMount函数却在后面连续执行了两次，只需要在index.tsx文件中把严格模式组件 React.StrictMode给删掉就可以了， 这是一个经典的问题。 但是目前为什么其会导致componentDidMount函数重复调用，博主还不知道为什么， 因为在博主这次实践中、构造函数和render函数都只调用了一次，只有componentDidMount连续调用了两次。...
infrared-remote-candroid studiodemo
最新发布
05-05
android studio下载
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
06-13
通常情况下，当组件在`componentWillUpdate`或`componentDidUpdate`方法中调用`setState`方法时，就会出现这个错误。这是因为组件在更新状态时会触发重新渲染，而重新渲染又会触发更新状态，形成无限循环。 为了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值