React Component生命周期方法,第一部分

在组件的生命周期中,React附带了许多内置的方法和工具。 这些方法使开发人员可以轻松地更新UI和应用程序状态。 知道何时使用它们以及它们的每个警告,对于正确理解如何使用React进行构建至关重要。

以上是React组件从启动(预安装)到死亡(卸载)的生命周期。

React最吸引人的部分是将复杂的UI分成较小的微小部分的概念。 我们不仅可以组织和划分React应用程序,而且还可以使每个组件完全可定制。 如果我们正确使用生命周期方法,则可以控制应用程序的每个小部分呈现,更新,考虑重新呈现然后完全消失时发生的情况。

我将最终讨论React的所有生命周期方法。 但是对于本博客,我将重点介绍构造函数,componentWillMount和componentDidMount函数。

构造函数

这是一个特殊的函数,每当创建一个新对象时都会调用该函数-因此,从本质上讲,它是面向对象编程的基本部分,该语言在多种语言中通用。 构造函数也是定义组件状态的方便位置。

 从'react'导入React; 
 类Hello扩展了React.Component { 
构造函数(){
超();
  this.state = { 
你好你好”,
世界:“世界!
}
}
  render(){ 
return(

{this.state.hello} {this.state.world}


}
  } 
导出默认Hello

注意,在构造函数中,我们调用了另一个特殊函数super() 。 这在我们的类扩展具有定义的构造函数的任何其他类的情况下非常重要。 因此,调用super()将调用父类的构造函数并允许其初始化。 只有在构造函数中调用super() ,我们才能访问this.props 。 非常非常重要!

还要记住,构造函数是唯一可以使用this.state定义/设置组件状态的this.state 。 在状态更改的所有其他情况下,建议使用this.setState 。 尽管从技术上可以通过直接写入this.state来更改状态,但是这不会导致组件使用新数据重新呈现,并且通常会导致状态不一致和可能的异步问题。

componentWillMount

就是这样……没人喜欢这种方法。 这就是为什么它在React v16.3中于2018年初贬值的原因。 尽管如此,还是要回顾一下为什么这种方法在过去无法奏效的优良作法。

关于componentWillMount的事情是,当调用它时,尚不存在任何组件可以实际执行任何操作。 因此,从技术上讲,您不能做任何涉及DOM的事情。 您在这里可以做的事情很少,而在constructor中您还不能做。 另外,自从调用组件的constructor以来,没有任何改变,所以……目前,我们有点像JSX的困境。 您的组件目前处于默认位置, constructor和其余组件代码已经处理了几乎所有应注意的设置问题。

但是,这是一个例外。 只有在运行应用程序时,才需要准备只能在运行时完成的任何设置(连接到外部API,用于Firebase启动的设置等)。 但是请记住,任何此类配置都应在应用程序的最高级别组件(根组​​件)上进行。 因此,除非您在根组件中,否则请不要使用componentWillMount!

componentDidMount

可以说,这是您在市场上可以找到的任何React应用程序中最喜欢和使用率最高的生命周期方法。 在创建组件并将其安装在DOM中并准备使用后,将调用此方法。

在给定组件的整个生命周期中,只会调用一次此函数,并且仅在正确渲染组件之后才调用此函数。 由于此函数从未被调用过多次,因此它是执行任何引起副作用的操作(例如AJAX请求)的理想场所。

至此,您已经准备好加载数据并完成所有没有DOM便无法完成的设置。 但是,请尝试避免直接在componentDidMount调用this.setState() 。 这是因为一旦成功更改状态,调用this.setState()将导致重新渲染,如果其他组件也以相同的方式更新其状态,则可能导致一些异步问题。 为避免这种情况,我通常喜欢使用获取的数据来处理状态更改来调用辅助函数。

 从'react'导入React; 
 类Hello扩展了React.Component { 
构造函数(){
超();
  this.state = { 
你好你好”,
world:“世界!,
产品:[]
}
}
  componentDidMount(){ 
this.getProducts()
}
  getProducts =()=> { 
提取(API_LINK)
.then(res => res.json())
.then(res =>
this.setState({products:[... this.state.products,... res]}))
}
  render(){ 
返回(在此处插入DOM标记)
}
}
导出默认Hello

所有人,到此为止。 我们已经介绍了所有内置的React方法,这些方法处理组件的创建,设置和安装到DOM上。 在我的下一个博客中,我们将进一步探讨涉及道具更改的React生命周期方法。