React生命周期方法之 componentDidMount

本文探讨了React中componentDidMount方法的应用,特别是在数据初始化和编辑/新增页面的状态管理方面。通过对比不同的组件引用方式,阐述了如何确保每次打开编辑页面都能正确重置初始值,避免数据残留问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. componentDidMount() 这个生命周期方法应该是用的最多的,一般用在进入页面后,数据初始化,这种情况下,跟model中的 subscription方法作用是一样的。但是当你数据初始化方法都写在subscription方法时,当你改了页面访问路径,model里面的path没改过来,初始化方法就调不到了。但是要是把数据初始化接口都放在componentDidMount函数里,只要进入页面就会去执行。

2.当你有种情况:一个父页面,一个编辑或新增(编辑新增通常为同一个页面)页被父页面引用:

{
  editVisible ? <PartDesignEdit form={form} editVisible={editVisible} editValue={editValue} designList={designList} colseEdit={this.colseEdit} setLoading={this.setLoading} /> : null
}
{/* <PartDesignEdit form={form} editVisible={editVisible} editValue={editValue} designList={designList} colseEdit={this.colseEdit} setLoading={this.setLoading} /> */}

上图是在父页面引用编辑页,编辑页是个Modal,通过editVisible控制,1  和  2 这两种方式看起来是一样的

但是当有时候你可能碰到这样的情况:

1.就是在编辑页面,你修改完数据后,关掉编辑页,第二次打开后,发现还是上次修改后的内容。

2.或者,本来新增页面某些输入框的值是有初始值的,被编辑一次之后再进去,初始值变上次修改后的值

这时就有区别了。

下图是每次进入到编辑页面,就重置初始值(根据自己业务):

我们想,只要在每次进入到编辑页的时候,去重置页面的数据不就好了,所以可以通过在编辑/新增页面的componentDidMount方法中,去每次的设置页面的初始值。但是,当你用图1的 2方式,你会发现,编辑页面只有第一次加载时会被执行,后面再进去,还是出现值重置不了的问题。但是,截图一种的方式1就不一样了,编辑页打开(editVisible=true)时编辑页才被引用,editVisible=false时,不被引用,所以,每次editVisible=true时,相当于编辑页每次都是第一次加载,所以componentDidMount方法中的方法每次都会被执行,这样问题就解决了。这个可以用在其他相似的情形。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值