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

資訊專欄INFORMATION COLUMN

React的生命周期與應(yīng)用

TZLLOG / 3460人閱讀

摘要:不能在,和中調(diào)用組件各生命周期的應(yīng)用方法或者對(duì)象只在組件類創(chuàng)建的時(shí)候調(diào)用一次,之后會(huì)被緩存起來。會(huì)和父組件設(shè)置的進(jìn)行合并。在接收到新的或者之前立刻調(diào)用。如果需要更新來響應(yīng)某個(gè)的改變,請(qǐng)使用。橫向滾動(dòng)寬度在組件從中移除的時(shí)候立刻被調(diào)用。

目錄

1.react組件的兩種創(chuàng)建寫法

2.組件的生命周期在不同狀態(tài)下的執(zhí)行順序

3.組件各生命周期的應(yīng)用

1.react組件的兩種創(chuàng)建寫法

第一種ES5寫法,React.createClass

React.createClass({
    getDefaultProps() {
        return {
            key1:value1
        }
    },
    getInitialState() {
        return {
            state1:state1
        }
    }
});

第二種是ES6寫法,繼承React.Component類

export default class Test1 extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            state1: state1
        }
    }
    static defaultProps = {
        data: 2,
    };
    static propTypes = {
        optionsData: React.PropTypes.array,
        onSelect: React.PropTypes.func,
        selectedOption: React.PropTypes.object,
        topStyle: React.PropTypes.any,
        placeholder: React.PropTypes.string
    }
 
}

getDefaultProps、getInitialState是在createClass時(shí)調(diào)用的方法,而在繼承component類時(shí),getDefaultProps方法對(duì)應(yīng)給類添加靜態(tài)屬性 defaultProps ,getInitialState 對(duì)應(yīng)在類的構(gòu)造函數(shù)中設(shè)置 state屬性

2.組件的生命周期在不同狀態(tài)下的執(zhí)行順序

組件首次裝載(first-Mount):

getDefaultProps() →

getInitialState() →

componentWillMount() →

render() →

componentDidMount()

卸載組件時(shí)(Unmount):componentWillUnmount()

當(dāng)重新裝載組件時(shí)(Re-Mount):

getInitialState()→

componentWillMount()→

render() →

componentDidMount(),

但并不執(zhí)行 getDefaultProps; defaultProps是放在組件類上的static屬性

當(dāng)再次渲染組件時(shí)(Re-Render),此時(shí)按順序執(zhí)行

componentWillReceiveProps(nextProps )(組件接收到新的props才會(huì)調(diào)用,只是改變state時(shí)不調(diào)用)→

shouldComponentUpdate(組件接收到新的props才會(huì)調(diào)用,只是改變state時(shí)不調(diào)用)→

componentWillUpdate→

render →

componentDidUpdate。

多帶帶調(diào)用setState的重新渲染

componentWillUpdate→

render →

componentDidUpdate

1、在單頁(yè)應(yīng)用中,用react-router的history做頁(yè)面跳轉(zhuǎn)時(shí),是將當(dāng)前route的所有組件卸載,再跳轉(zhuǎn)回來時(shí)是重新裝載組件,而不是首次裝載。

2、在使用react-native的Navigator時(shí),每次push新頁(yè)面的時(shí)候是首次加載,舊頁(yè)面沒有卸載,在pop新頁(yè)面的時(shí)候,新頁(yè)面會(huì)卸載 調(diào)用Unmount,舊頁(yè)面是重新渲染

componentWillReceiveProps→

componentWillUpdate→

render →

componentDidUpdate。
,不是重新裝載,也沒有重新渲染的shouldComponentUpdate控制,所以pop回來肯定重新渲染。

3、組件在內(nèi)存中裝載過一次之后,組件的defaultProps就初始化了,之后裝載就不會(huì)重新設(shè)置。

4、父組件的render都會(huì)引起子組件的重新渲染。

5、 不能在componentWillUpdate ,render和componentDidUpdate 中調(diào)用setState

3.組件各生命周期的應(yīng)用

3.1 getDefaultProps方法 或者 defaultProps 對(duì)象

只在組件類創(chuàng)建的時(shí)候調(diào)用一次,之后會(huì)被緩存起來。

defaultProps在組件實(shí)例之前創(chuàng)建,實(shí)例間共享。

會(huì)和父組件設(shè)置的props進(jìn)行合并。

3.2 getInitialState方法或constructor的state屬性

項(xiàng)目中會(huì)把組件用到的state初始化在這里

constructor (props) {
    super(props);
    this.state = {
        poi: null,
        activeTabId: null,
        cartCount: Shopcart.size(),
        domSize:{
            headerHeight: 100,
            bannerHeight: 200,
            categoryTabHeight: 100,
        },
        hiddenBanner: false //是否隱藏banner
    };

}

3.3 componentWillMount()

組件初次render之前調(diào)用,如果在此方法中調(diào)用setState,render將感知到更新后的state,并且只執(zhí)行這一次render,可以在此方法中fetch數(shù)據(jù),不需要dom操作的數(shù)據(jù)獲取。

3.4 render()

組件渲染的方法,是組件唯一的必須實(shí)現(xiàn)的方法,在該方法中,我們可以通過props和state渲染不同的組件。返回null或者false代表不渲染任何東西。

render () {
    return (
        
{this.renderLeftComponent()} {this.props.title || "美團(tuán)商超"} {this.renderRightComponent()}
); }

3.5 componentDidMount()

組件裝載后調(diào)用的方法,因?yàn)樵摲椒ㄕ{(diào)用的時(shí)候,組件已經(jīng)裝載,并且該方法不在render的循環(huán)當(dāng)中,一般在該方法中做一些fetch數(shù)據(jù)或者改變state的方法。
還可以通過ReactDOM.findDOMNode(_this.refs.wrapper) 來獲取DOM節(jié)點(diǎn) 進(jìn)行操作。

componentDidMount() {
    this.mounted = true;
    if(this.props.poi){
        this.fetchCategoryTabs(this.props.poi.poiId);
    }
    if(!this.isCalculate) {
        this.calculateWidth(); 
    }
}

3.6 componentWillReceiveProps(nextProps)

在組件接收到新的 props 的時(shí)候調(diào)用。在初始化渲染的時(shí)候,該方法不會(huì)調(diào)用。可以在該方法中判斷,當(dāng)props變化時(shí),是否再去重新fetch數(shù)據(jù),setState。

componentWillReceiveProps (nextProps) {
    if(nextProps.poi &&(nextProps.poi != this.props.poi)) {
        this.fetchBannerList(nextProps.poi.poiId);
    }
}

3.7 shouldComponentUpdate(nextProps, nextState)

在接收到新的props或者state變化時(shí),被調(diào)用,該方法在初始化渲染和forceUpdate的時(shí)候不會(huì)被調(diào)用。

 默認(rèn)返回true,如果返回false,則render不會(huì)執(zhí)行。可以在這個(gè)方法中來阻止不必要的render,因?yàn)橛袝r(shí)是因?yàn)楦附M件的render引起的子組件不必要的render。
shouldComponentUpdate(nextProps, nextState) {
    const isStateChanged = Object.keys(nextState).some(key=> {
        return nextState[key] !== this.state[key]
    });
    const isPropsChanged = Object.keys(nextProps).some(key=> {
        return nextProps[key] !== this.props[key]
    });
    return isStateChanged || isPropsChanged
}

3.8 componentWillUpdate(nextProps, nextState)

在接收到新的 props 或者 state 之前立刻調(diào)用。在初始化渲染的時(shí)候該方法不會(huì)被調(diào)用。使用該方法做一些更新之前的準(zhǔn)備工作。你不能在剛方法中使用 this.setState()。如果需要更新 state 來響應(yīng)某個(gè) prop 的改變,請(qǐng)使用 componentWillReceiveProps。 項(xiàng)目中應(yīng)用不多。

3.9 componentDidUpdate

在組件的更新已經(jīng)同步到 DOM 中之后立刻被調(diào)用。該方法不會(huì)在初始化渲染的時(shí)候調(diào)用。使用該方法可以在組件更新之后操作 DOM 元素。

有些操作可能需要操作DOM元素,并且在第一次componentDidMount時(shí)還沒有達(dá)到條件,所以需要在componentDidUpdate時(shí)再做操作,但是componentDidUpdate在render的循環(huán)函數(shù)中,
所以需要設(shè)置變量做控制。

下面例子中 this.isCalculate 就是判斷是否計(jì)算過的變量。

componentDidMount() {
    this.mounted = true;
    if(this.props.poi){
        this.fetchCategoryTabs(this.props.poi.poiId);
    }
    if(!this.isCalculate) {
        this.calculateWidth(); 
    }
}
componentDidUpdate () {
    if(!this.isCalculate) {
        this.calculateWidth(); 
    }
}
calculateWidth () {
    if(this.isCalculate) {
        return;
    }
    let tablist = this.state.categoryTabs;
    if(tablist.length == 0) {
        return;
    }
    let tabsDOM = this.refs.tablist,
        childrensDOM = tabsDOM.childNodes,
        container = this.refs.tabcontainer,
        wrapper = this.refs.wrapper,
    // 橫向滾動(dòng)寬度
        scrollwidth = 5;
    for(let i=0; i

3.10 componentWillUnmount

在組件從 DOM 中移除的時(shí)候立刻被調(diào)用。在該方法中執(zhí)行任何必要的清理,比如無效的定時(shí)器,或者清除在 componentDidMount 中創(chuàng)建的 DOM 元素。
可以記錄組件的mount狀態(tài),在 componentDidMount 中設(shè)置this.mounted = true 。 在componentWillUnmount 中設(shè)置 this.mounted = false。

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/91133.html

相關(guān)文章

  • ReactV16.3,即將更改生命周期

    摘要:我們目前的計(jì)劃是為不安全生命周期引入別名,和。從現(xiàn)在開始,只有新的生命周期名稱將起作用。從版本開始,更新以響應(yīng)更改的推薦方法是使用新的靜態(tài)生命周期。 注釋:本文是根據(jù)React的官方博客翻譯而成(文章地址:https://reactjs.org/blog/2018...)。主要講述了React之后的更新方向,以及對(duì)之前生命周期所出現(xiàn)的問題的總結(jié),之后的React將逐步棄用一些生命周期和...

    wendux 評(píng)論0 收藏0
  • 業(yè)內(nèi)首個(gè) React Native轉(zhuǎn)微信小程序引擎 Alita 正式發(fā)布

    摘要:得益于運(yùn)行階段處理邏輯的設(shè)計(jì),支持將使用的應(yīng)用轉(zhuǎn)換成微信小程序。我們也在考察這一新的跨端方案和微信小程序融合轉(zhuǎn)化的可行性。 作者:京東ARES多端技術(shù)團(tuán)隊(duì) 前言 Alita是一套由京東ARES多端技術(shù)團(tuán)隊(duì)打造的React Native代碼轉(zhuǎn)換引擎工具。它對(duì)React語法有全新的處理方式,支持在運(yùn)行時(shí)處理React語法,實(shí)現(xiàn)了React Native和微信小程序之間的主要組件對(duì)齊,可以用...

    陸斌 評(píng)論0 收藏0
  • [譯]React 生命周期使用場(chǎng)景

    摘要:譯的生命周期的使用場(chǎng)景原文鏈接作者翻譯上名這個(gè)圖片,就是組件的生命周期,從形成到銷毀的過程。這并不意味著沒有用。最常見的用例更新以響應(yīng)或更改。是否可以調(diào)用總結(jié)在理想的世界中,我們不會(huì)使用生命周期方法。 [譯]React 的生命周期的使用場(chǎng)景 showImg(https://segmentfault.com/img/bVLTCt?w=2000&h=800); 原文鏈接:React Lif...

    klinson 評(píng)論0 收藏0
  • react 生命周期

    摘要:一個(gè)組件的生命周期分為三個(gè)部分實(shí)例化存在期和銷毀時(shí)。如果回調(diào)函數(shù)以函數(shù)的方式來指定,那么在組件更新的時(shí)候回調(diào)會(huì)被調(diào)用次。 一個(gè)React組件的生命周期分為三個(gè)部分:實(shí)例化、存在期和銷毀時(shí)。 實(shí)例化階段 客戶端渲染時(shí),如下依次被調(diào)用 getDefaultProps() getInitialState() componentWillMount() render() component...

    Fundebug 評(píng)論0 收藏0
  • React 生命周期

    摘要:同步渲染的痛點(diǎn)當(dāng)應(yīng)用的組件樹特別龐大時(shí),由于是單線程的,重新渲染一旦開始,中間不會(huì)停,如果這時(shí)候用戶去操作,比如輸入,點(diǎn)擊按鈕,此時(shí)頁(yè)面是沒有響應(yīng)的。 React生命周期 基礎(chǔ)生命周期鉤子 constructor 如果你不初始化狀態(tài),也不綁定方法,那么你就不需要為React組件實(shí)現(xiàn)構(gòu)造函數(shù)。在這里初始化狀態(tài)可以直接對(duì)this.state賦值,在這里使用props時(shí),應(yīng)當(dāng)通過this.p...

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

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

0條評(píng)論

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