React生命周期方法之 componentDidMount

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

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

React生命周期方法之 componentDidMount_第1张图片

{
  editVisible ?  : null
}
{/*  */}

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

React生命周期方法之 componentDidMount_第2张图片

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

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

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

这时就有区别了。

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

React生命周期方法之 componentDidMount_第3张图片

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

你可能感兴趣的:(React生命周期方法之 componentDidMount)