国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

簡單談談我理解的React組件生命周期

lowett / 3408人閱讀

摘要：用處你在組建中所有的移除所有組建中的監(jiān)聽生命周期父子組件渲染順序父組件代碼引入子組件子組件代碼瀏覽器中的執(zhí)行結(jié)果如下圖結(jié)論所以在的組件掛載及過程中，最底層的子組件是最先完成掛載及更新的。

原文首發(fā)在我的個人博客：歡迎點此訪問我的個人博客

學了一段時間的react了，現(xiàn)在對自己學習的react的生命周期做一個簡單總結(jié)（如有錯誤請留言指正，謝謝）
react一共有如下幾個生命周期函數(shù)

constructor( props, context){}

componentWillMount (){}

componentDidMount (){}

componentWillReceiveProps( nextProps ){}

shouldComponentUpdate( nextProps, nextState){}

componentWillUpdate (nextProps,nextState){}

render()

componentDidUpdate(prevProps,prevState){}

componentWillUnmount (){}

下面我們分別看看這幾個函數(shù)的用法 1. constructor( props, context){}

constructor可接收兩個參數(shù)，獲取到父組件傳下來的的props,context

只要組件存在constructor,就必要要寫super,否則this指向會錯誤

constructor(props,context) {
  super(props,context)
}
2.componentWillMount (){}組件將要掛載

此時組件還未渲染完成，dom還未渲染

3.componentDidMount (){}

組件渲染完成，此時dom節(jié)點已經(jīng)生成，可以在這里調(diào)用ajax請求

4.componentWillReceiveProps (nextProps){}

在接受父組件改變后的props需要重新渲染組件時需要用到這個函數(shù)

5.shouldComponentUpdate(nextProps,nextState)｛｝

setState以后，state發(fā)生變化，組件會進入重新渲染的流程，return false可以阻止組件的更新

6.componentWillUpdate (nextProps,nextState)｛｝

當組件進入重新渲染的流程才會進入componentWillUpdate函數(shù)

7.render函數(shù)

render是一個React組件所必不可少的核心函數(shù)，render函數(shù)會插入jsx生成的dom結(jié)構(gòu)，react會生成一份虛擬dom樹，在每一次組件更新時，在此react會通過其diff算法比較更新前后的新舊DOM樹，比較以后，找到最小的有差異的DOM節(jié)點，并重新渲染

用法：

render () {
  return (
    
something
 
  )
｝
8.componentDidUpdate(prevProps,prevState){}

組件更新完畢后，react只會在第一次初始化成功會進入componentDidmount,之后每次重新渲染后都會進入這個生命周期，這里可以拿到prevProps和prevState，即更新前的props和state。

9.componentWillUnmount ()

用處：

1.clear你在組建中所有的setTimeout,setInterval
2.移除所有組建中的監(jiān)聽 removeEventListener
react生命周期父子組件渲染順序

父組件代碼：

import React,{Component} from "react"
import ChildComponent from "./component/ChildComponent"http://引入子組件

class App extends Component{
    constructor(props,context) {
        super(props,context)
        console.log("parent-constructor")
    }
    componentWillMount () {
        console.log("parent-componentWillMount")
    }
    componentDidMount () {
        console.log("parent-componentDidMount")
    }
    componentWillReceiveProps (nextProps) {
        console.log("parent-componentWillReceiveProps")
    }
    shouldComponentUpdate (nextProps,nextState) {
        console.log("parent-shouldComponentUpdate")
    }
    componentWillUpdate (nextProps,nextState) {
        console.log("parent-componentWillUpdate")
    }
    componentDidUpdate (prevProps,prevState) {
        console.log("parent-componentDidUpdate")
    }
    render() {
        return ""
    }
    componentWillUnmount () {
        console.log("parent-componentWillUnmount")
    }
}
export default App

子組件代碼：

import React,{Component} from "react"

class ChildComponent extends Component{
    constructor(props,context) {
        super(props,context)
        console.log("child-constructor")
    }
    componentWillMount () {
        console.log("child-componentWillMount")
    }
    componentDidMount () {
        console.log("child-componentDidMount")
    }
    componentWillReceiveProps (nextProps) {
        console.log("child-componentWillReceiveProps")
    }
    shouldComponentUpdate (nextProps,nextState) {
        console.log("child-shouldComponentUpdate")
    }
    componentWillUpdate (nextProps,nextState) {
        console.log("child-componentWillUpdate")
    }
    componentDidUpdate (prevProps,prevState) {
        console.log("child-componentDidUpdate")
    }
    render(){
        return ""
    }
    componentWillUnmount () {
        console.log("child-componentWillUnmount")
    }
}
export default ChildComponent

瀏覽器中的執(zhí)行結(jié)果如下圖：

結(jié)論：

所以在react的組件掛載及render過程中，最底層的子組件是最先完成掛載及更新的。

constructor()構(gòu)造函數(shù)、componentWillMount執(zhí)行順序：

頂層父組件--子組件--子組件--...--底層子組件

render、componentDidMount順序：

底層子組件--子組件--子組件--...--頂層父組件

（如有錯誤，麻煩留言指正，謝謝~~）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107229.html

相關(guān)文章

  • 從Mixin到hooks，談談對React16.7.0-alpha中即將引入的hooks的理解

    摘要：已經(jīng)被廢除，具體缺陷可以參考二為了解決的缺陷，第二種解決方案是高階組件簡稱。我們定義了父組件，存在自身的，并且將自身的通過的方式傳遞給了子組件。返回一個標識該的變量，以及更新該的方法。 ??為了實現(xiàn)分離業(yè)務邏輯代碼，實現(xiàn)組件內(nèi)部相關(guān)業(yè)務邏輯的復用，在React的迭代中針對類組件中的代碼復用依次發(fā)布了Mixin、HOC、Render props等幾個方案。此外，針對函數(shù)組件，在Reac...

    ZweiZhao 評論0 收藏0

  • 從Mixin到hooks，談談對React16.7.0-alpha中即將引入的hooks的理解

    摘要：已經(jīng)被廢除，具體缺陷可以參考二為了解決的缺陷，第二種解決方案是高階組件簡稱。我們定義了父組件，存在自身的，并且將自身的通過的方式傳遞給了子組件。返回一個標識該的變量，以及更新該的方法。 ??為了實現(xiàn)分離業(yè)務邏輯代碼，實現(xiàn)組件內(nèi)部相關(guān)業(yè)務邏輯的復用，在React的迭代中針對類組件中的代碼復用依次發(fā)布了Mixin、HOC、Render props等幾個方案。此外，針對函數(shù)組件，在Reac...

    funnyZhang 評論0 收藏0

  • 從Mixin到hooks，談談對React16.7.0-alpha中即將引入的hooks的理解

    摘要：已經(jīng)被廢除，具體缺陷可以參考二為了解決的缺陷，第二種解決方案是高階組件簡稱。我們定義了父組件，存在自身的，并且將自身的通過的方式傳遞給了子組件。返回一個標識該的變量，以及更新該的方法。 ??為了實現(xiàn)分離業(yè)務邏輯代碼，實現(xiàn)組件內(nèi)部相關(guān)業(yè)務邏輯的復用，在React的迭代中針對類組件中的代碼復用依次發(fā)布了Mixin、HOC、Render props等幾個方案。此外，針對函數(shù)組件，在Reac...

    wizChen 評論0 收藏0

  • 前端面試整理

    摘要：新布局基本數(shù)據(jù)類型，幾種種也是返回類型非負區(qū)別創(chuàng)建對象的方式閉包的理解原型鏈原理手寫判斷是一個數(shù)組深拷貝原生操作創(chuàng)建元素刪除元素你覺得有哪些好處還用過什么工具庫事件委托事件理解規(guī)范怎么寫插件怎么給數(shù)組原型添加方法怎么合并兩個對象常 h5 html5 新api storage geolocation history webworker indexDB websocket can...

    yvonne 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<