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

資訊專欄INFORMATION COLUMN

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

lowett / 3409人閱讀

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

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

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

constructor( props, context){}

componentWillMount (){}

componentDidMount (){}

componentWillReceiveProps( nextProps ){}

shouldComponentUpdate( nextProps, nextState){}

componentWillUpdate (nextProps,nextState){}

render()

componentDidUpdate(prevProps,prevState){}

componentWillUnmount (){}

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

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

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

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

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

3.componentDidMount (){}

組件渲染完成，此時dom節點已經生成，可以在這里調用ajax請求

4.componentWillReceiveProps (nextProps){}

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

5.shouldComponentUpdate(nextProps,nextState)｛｝

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

6.componentWillUpdate (nextProps,nextState)｛｝

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

7.render函數

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

用法：

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

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

9.componentWillUnmount ()

用處：

1.clear你在組建中所有的setTimeout,setInterval
2.移除所有組建中的監聽 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

瀏覽器中的執行結果如下圖：

結論：

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

constructor()構造函數、componentWillMount執行順序：

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

render、componentDidMount順序：

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107229.html

相關文章

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

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

    ZweiZhao 評論0 收藏0

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

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

    funnyZhang 評論0 收藏0

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

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

    wizChen 評論0 收藏0

  • 前端面試整理

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

    yvonne 評論0 收藏0

發表評論

0條評論

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