React生命周期方法之 componentDidMount-优快云博客

本文链接：https://blog.youkuaiyun.com/star_zone/article/details/105035518

本文探讨了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方法中的方法每次都会被执行，这样问题就解决了。这个可以用在其他相似的情形。