React生命周期方法之 componentDidMount
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方法中的方法每次都会被执行,这样问题就解决了。这个可以用在其他相似的情形。
上一篇: React的生命周期
下一篇: React的生命周期
推荐阅读
-
React性能优化系列之减少props改变的实现方法
-
Vue.js实例方法之生命周期详解
-
react-native之ART绘图方法详解
-
React数据传递之组件内部通信的方法
-
react中fetch之cors跨域请求的实现方法
-
Spring bean生命周期之doCreateBean方法详解
-
荐 JavaWeb之Servlet(二)Servlet生命周期方法与GET/POST请求分发
-
react生命周期方法
-
React 生命周期 constructor->componentWillMount->render->componentDidMount->componentWillUnmount
-
「React 基础」组件生命周期函数componentDidMount()介绍