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]
    }
  }

总结

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

最新评论