欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React生命周期方法之 componentDidMount

程序员文章站 2022-07-02 22:45:52
...

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

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

React生命周期方法之 componentDidMount

{
  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 这两种方式看起来是一样的

React生命周期方法之 componentDidMount

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

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

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

这时就有区别了。

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

React生命周期方法之 componentDidMount

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

相关标签: reactjs