reactJS -- 8 组件生命周期

最新推荐文章于 2024-10-20 19:52:39 发布

weixin_34185364

最新推荐文章于 2024-10-20 19:52:39 发布

阅读量68

点赞数

文章标签： python javascript ui ViewUI

原文链接：https://my.oschina.net/u/2991733/blog/1142772

版权

2019独角兽企业重金招聘Python工程师标准>>>

https://fraserxu.me/2014/08/31/react-component-lifecycle/

React入门教程 - 组件生命周期

每一个阵营组件在加载时都有特定的生命周期，在此期间不同的方法会被执行。

组件加载：componentWillMount

componentWillMount()

componentWillMount在会组件render之前执行，并且永远都只执行一次。

由于这个方法始终只执行一次，如果所以这里在定义了setState方法之后，页面永远都只会在加载前更新一次。

组件加载：componentDidMount

componentDidMount()

这个方法会在组件加载完毕之后立即执行。在这个时候之后组件已经生成了对应的DOM结构，通过可以this.getDOMNode()来进行访问。

如果你想和其他的JavaScript框架一起使用，可以在这个方法中执行setTimeout，setInterval或者发送AJAX请求等操作（防止异部操作阻塞UI）。

componentDidMount: function() {
  setTimeout(function() {
    this.setState({items: {name: 'test'}})
  }, 1000)
}

组件更新：componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在组件接收到一个新的道具时被执行。这个方法在初始化渲染时不会被调用。

通过使用this.setState（）更新状态调用render（）之前，将此作为对prop转换的反应的机会。（不太懂这句话...）

旧的道具通过可以this.props来电子杂志。这个在函数内调用this.setState()方法不会增加一次新的渲染。

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

组件更新：shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)

返回一个布尔值。在组件接收到新的道具或者状态时被执行。初始化在时或者使用forceUpdate时不被执行。

可以在你确认不需要更新组件时使用。

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

如果shouldComponentUpdate返回false，render()则会在下一个状态改变之前被完全跳过（另外componentWillUpdate和componentDidUpdate也不会被执行）

情况默认下shouldComponentUpdate会报道查看真实的。

默认情况下，shouldComponentUpdate总是返回true，以防止在状态变为现实时的细微错误，但是如果您注意总是将状态视为不可变的，并且只能从render（）中的道具和状态中读取，那么可以使用一个实现来覆盖shouldComponentUpdate比较旧的道具和状态与他们的替代品（这句也不太懂...）

如果你需要考虑性能，特别是在有上百个组件时，使用可以shouldComponentUpdate来提升应用速度。

组件更新：componentWillUpdate

componentWillUpdate(object nextProps, object nextState)

在组件接收到新的道具或者状态但还没有渲染时被执行。在初始化时不会被执行。

一般用在组件发生更新之前。

组件更新：componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

在组件完成更新后立即执行。在初始化时不会被执行。一般会在组件完成更新后被使用。例如清除通知文字等操作。

卸载：componentWillUnmount

在组件从DOM卸载后立即执行。

componentDidMount:function(){
    this.inc = setInterval(this.update,500)
},
componentWillUnmount:function(){
    console.log("goodbye cruel world!")
    clearInterval(this.inc)
}

主要用来执行一些必要的清理任务。清除例如setTimeout等函数，任意或者在的componentDidMount创建³³的DOM元素。

转载于:https://my.oschina.net/u/2991733/blog/1142772