React生命周期方法之componentDidMount的使用

 更新时间:2023年06月06日 14:26:47   作者:star_zone  
这篇文章主要介绍了React生命周期方法之componentDidMount的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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生命周期(getDerivedStateFromProps,componentDidMount)

之前的开发过程中没有遇到太多复杂的功能,所以就没有使用到react的生命周期。最近在mars3d React基础项目开发中涉及了,生命周期的使用。

componentDidMount

先看一下官方解释

https://zh-hans.reactjs.org/docs/react-component.html#componentdidmount

componentDidMount() 会在组件挂载后(插入 DOM 树中)立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据,此处是实例化请求的好地方。

这个方法是比较适合添加订阅的地方。如果添加了订阅,请不要忘记在 componentWillUnmount() 里取消订阅

你可以在 componentDidMount() 里直接调用 setState()。它将触发额外渲染,但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下,用户也不会看到中间状态。请谨慎使用该模式,因为它会导致性能问题。

通常,你应该在 constructor() 中初始化 state。如果你的渲染依赖于 DOM 节点的大小或位置,比如实现 modals 和 tooltips 等情况下,你可以使用此方式处理

使用场景介绍:目前场景比较简单,就是初始化的时候要渲染dom,加载数据。

当我的组件被插入到 DOM 树之后,就会执行 componentDidMount 生命周期,后面就不会再次执行这个函数。

getDerivedStateFromProps

在使用getDerivedStateFromProps生命周期之前我使用的是componentWillReceiveProps生命周期,但是最新的react会有警告,推荐使用getDerivedStateFromProps,具体两者的区别可以自己查阅资料了解一下。

先说一下我的使用场景:

父组件中数据发生变化,要求子组件可以监听到数据发生变化,并且将数据重新渲染。

class RoamLineList extends Component<any, any> {
  constructor(props) {
    super(props)
    this.state = {
      tableData: [], // 表格,
    }
//
demo() {
this.state.setState({
 tableData:[
      {
        id:1,
        key:1,
        name:"测试"
      }
         ]
})
}
  render() {
    return <RoamRoute flyData={this.state.tableData}></RoamRoute>
    }

执行demo方法向tableData中添加一条数据,在子组件中监听到。

每次执行demo()方法子组件都可以通过getDerivedStateFromProps生命周期获取数据

static getDerivedStateFromProps(nextProps: any) {
    const data = nextProps.flyData
    return {
      roamLineData: [...data]
    }
  }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • react-router-domV6嵌套路由实现详解

    react-router-domV6嵌套路由实现详解

    这篇文章主要为大家介绍了react-router-domV6嵌套路由实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • React实现分页效果

    React实现分页效果

    这篇文章主要为大家详细介绍了React实现分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • windows下create-react-app 升级至3.3.1版本踩坑记

    windows下create-react-app 升级至3.3.1版本踩坑记

    这篇文章主要介绍了windows下create-react-app 升级至3.3.1版本踩坑记,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • React实现翻页时钟的代码示例

    React实现翻页时钟的代码示例

    本文给大家介绍了React实现翻页时钟的代码示例,翻页时钟把数字分为上下两部分,翻页效果的实现需要通过设置 position 把所有的数组放在同一个位置叠加起来,文中有详细的代码讲解,需要的朋友可以参考下
    2023-08-08
  • React 代码拆分的几种方法示例详解

    React 代码拆分的几种方法示例详解

    这篇文章主要为大家介绍了React 代码拆分的几种方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • React的特征单向数据流学习

    React的特征单向数据流学习

    这篇文章主要为大家介绍了React的特征单向数据流学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • React Native项目框架搭建的一些心得体会

    React Native项目框架搭建的一些心得体会

    React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。接下来通过本文给大家分享React Native项目框架搭建的一些心得体会,感兴趣的朋友跟随小编一起看看吧
    2021-05-05
  • 详解react的两种动态改变css样式的方法

    详解react的两种动态改变css样式的方法

    这篇文章主要介绍了详解react的两种动态改变css样式的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 深入理解react 组件类型及使用场景

    深入理解react 组件类型及使用场景

    这篇文章主要介绍了深入理解react 组件类型及使用场景,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • React不能将useMemo设置为默认方法原因详解

    React不能将useMemo设置为默认方法原因详解

    这篇文章主要为大家介绍了React不能将useMemo设置为默认方法原因详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2022-07-07

最新评论