美文网首页
React生命周期

React生命周期

作者: 风之伤_3eed | 来源:发表于2018-09-10 13:26 被阅读0次
    componentWillMount()        创建之前
    componentDidMount()         创建之后
    
    componentWillUpdate()       更新之前
    componentDidUpdate()        更新之后
    
    componentWillUnmount()      卸载之前
    componentWillReceiveProps() 组件参数更新
    

    组件加载:componentWillMount

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

    组件加载: componentDidMount

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

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

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

    组件更新: componentWillReceiveProps

    componentWillReceiveProps(object nextProps)

    在组件接收到一个新的prop时被执行。这个方法在初始化render时不会被调用。
    旧的props可以通过this.props来获取。在这个函数内调用this.setState()方法不会增加一次新的render.

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

    组件更新: shouldComponentUpdate

    boolean shouldComponentUpdate(object nextProps, object nextState)

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

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

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

    如果shouldComponentUpdate返回false, render()则会在下一个state change之前被完全跳过。(另外componentWillUpdate和 componentDidUpdate也不会被执行)

    默认情况下shouldComponentUpdate会返回true.
    如果你需要考虑性能,特别是在有上百个组件时,可以使用shouldComponentUpdate来提升应用速度。

    组件更新: componentWillUpdate

    componentWillUpdate(object nextProps, object nextState)
    

    在组件接收到新的props或者state但还没有render时被执行。在初始化时不会被执行。

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

    组件更新: componentDidUpdate

    componentDidUpdate(object prevProps, object prevState)
    

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

    Unmounting: componentWillUnmount

    在组件从DOM unmount后立即执行.

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

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

    相关文章

      网友评论

          本文标题:React生命周期

          本文链接:https://www.haomeiwen.com/subject/wnnjgftx.html