成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

簡(jiǎn)單談?wù)勎依斫獾腞eact組件生命周期

lowett / 3426人閱讀

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

原文首發(fā)在我的個(gè)人博客：歡迎點(diǎn)此訪問(wèn)我的個(gè)人博客

學(xué)了一段時(shí)間的react了，現(xiàn)在對(duì)自己學(xué)習(xí)的react的生命周期做一個(gè)簡(jiǎn)單總結(jié)（如有錯(cuò)誤請(qǐng)留言指正，謝謝）
react一共有如下幾個(gè)生命周期函數(shù)

constructor( props, context){}

componentWillMount (){}

componentDidMount (){}

componentWillReceiveProps( nextProps ){}

shouldComponentUpdate( nextProps, nextState){}

componentWillUpdate (nextProps,nextState){}

render()

componentDidUpdate(prevProps,prevState){}

componentWillUnmount (){}

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

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

只要組件存在constructor,就必要要寫(xiě)super,否則this指向會(huì)錯(cuò)誤

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

此時(shí)組件還未渲染完成，dom還未渲染

3.componentDidMount (){}

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

4.componentWillReceiveProps (nextProps){}

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

5.shouldComponentUpdate(nextProps,nextState)｛｝

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

6.componentWillUpdate (nextProps,nextState)｛｝

當(dāng)組件進(jìn)入重新渲染的流程才會(huì)進(jìn)入componentWillUpdate函數(shù)

7.render函數(shù)

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

用法：

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

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

9.componentWillUnmount ()

用處：

1.clear你在組建中所有的setTimeout,setInterval
2.移除所有組建中的監(jiān)聽(tīng) 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過(guò)程中，最底層的子組件是最先完成掛載及更新的。

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

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

render、componentDidMount順序：

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

（如有錯(cuò)誤，麻煩留言指正，謝謝~~）

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107229.html

相關(guān)文章

  • 從Mixin到hooks，談?wù)?/em>對(duì)React16.7.0-alpha中即將引入的hooks的理解

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

    ZweiZhao 評(píng)論0 收藏0

  • 從Mixin到hooks，談?wù)?/em>對(duì)React16.7.0-alpha中即將引入的hooks的理解

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

    funnyZhang 評(píng)論0 收藏0

  • 從Mixin到hooks，談?wù)?/em>對(duì)React16.7.0-alpha中即將引入的hooks的理解

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

    wizChen 評(píng)論0 收藏0

  • 前端面試整理

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

    yvonne 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<