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

資訊專欄INFORMATION COLUMN

react生命周期

dunizb / 953人閱讀

摘要：參考資料組件的生命周期這個(gè)文檔利用的，有些陳舊。組件初始化時(shí)只調(diào)用，以后組件更新不調(diào)用，整個(gè)生命周期只調(diào)用一次，此時(shí)可以修改。

參考資料：
React：組件的生命周期
   這個(gè)文檔利用es5的creatClass，有些陳舊。需要研究?jī)烧卟顒e的，移步
React 生命周期
   這個(gè)過(guò)于粗暴，沒(méi)有示例
一個(gè)React組件的生命周期分為三個(gè)部分：實(shí)例化、存在期和銷毀時(shí)，如下圖：

實(shí)例化

getDefaultProps()
設(shè)置默認(rèn)的props，也可以用dufaultProps設(shè)置組件的默認(rèn)屬性.

getInitialState()
在使用es6的class語(yǔ)法時(shí)是沒(méi)有這個(gè)鉤子函數(shù)的，可以直接在constructor中定義this.state。
每一個(gè)React組件都有自己的 state，其與 props 的區(qū)別在于 state只存在組件的內(nèi)部，props 在所有實(shí)例中共享。

componentWillMount()
組件初始化時(shí)只調(diào)用，以后組件更新不調(diào)用，整個(gè)生命周期只調(diào)用一次，此時(shí)可以修改state。

render()
react最重要的步驟，創(chuàng)建虛擬dom，進(jìn)行diff算法，更新dom樹(shù)都在此進(jìn)行。此時(shí)就不能更改state了。
只能通過(guò) this.props 和 this.state 訪問(wèn)數(shù)據(jù)（不能修改），也就是不能調(diào)用this.setState()。
只能出現(xiàn)一個(gè)頂級(jí)組件，不能返回一組元素。例如：

render(){
    //這樣不行
    this.setState({
     newState:_newState
    });
    return (
    

    //去掉下面一行
    

    );
}

componentDidMount()
組件渲染之后調(diào)用，只調(diào)用一次。

demo 
import React,{Component} from "react";
import ReactDOM from "react-dom";
class Clock extends Component{

    constructor(props){
        super(props);
        this.state = {
            date:new Date()
        }
    }

    //渲染前render執(zhí)行
    componentWillMount(){
        //this.timer///////////////////////////
        this.timer =setInterval(()=>{
            this.setState({
                date: new Date()
            })
        },1000)
    }
    componentDidMount(){
        this.clock.focus();
    }
    componentWillUnmount(){
        clearInterval(this.timer)
    }
    render(){
        return(
            

                

                    
this.clock=clock}>now time:

                    {this.state.date.toLocaleTimeString()}
                

            

        )
    }
}
ReactDOM.render(, document.getElementById("root"));
存在期，更新操作改變

componentWillReceiveProps(nextProps)
只有props改變時(shí)調(diào)用

shouldComponentUpdate(nextProps, nextState)
react性能優(yōu)化非常重要的一環(huán)。組件接受新的state或者props時(shí)調(diào)用，我們可以設(shè)置在此對(duì)比前后兩個(gè)props和state是否相同，如果相同則返回false阻止更新，因?yàn)橄嗤膶傩誀顟B(tài)一定會(huì)生成相同的dom樹(shù)，這樣就不需要?jiǎng)?chuàng)造新的dom樹(shù)和舊的dom樹(shù)進(jìn)行diff算法對(duì)比，節(jié)省大量性能，尤其是在dom結(jié)構(gòu)復(fù)雜的時(shí)候

componentWillUpdata(nextProps, nextState)
組件初始化時(shí)不調(diào)用，只有在組件將要更新時(shí)才調(diào)用，此時(shí)可以修改state。

render()

componentDidUpdate()
組件初始化時(shí)不調(diào)用，組件更新完成后調(diào)用，此時(shí)可以獲取dom節(jié)點(diǎn)。

demo 
import React from "react";
import ReactDOM from "react-dom";
class Content extends React.Component {
    constructor(){
        super();
        this.state = {
            test:0
        }
    }
    componentWillMount() {
        console.log("Component WILL MOUNT!")
    }
    componentDidMount() {
        console.log("Component DID MOUNT!")
    }
    componentWillReceiveProps(newProps) {
        console.log(newProps)
        console.log("Component WILL RECEIVE PROPS!")
    }
    shouldComponentUpdate(newProps, newState) {
        console.log(newProps,newState)
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log(nextProps,nextState)
        console.log("Component WILL UPDATE!");
    }
    componentDidUpdate(prevProps, prevState) {
        console.log(prevProps,prevState)
        console.log("Component DID UPDATE!")
    }
    componentWillUnmount() {
        console.log("Component WILL UNMOUNT!")
    }
    _handleClick(){
        this.setState({
            test:this.state.test + 1
        })
    }
    render() {
        return (
            

                
{this.props.myNumber}

                
                {this.state.test}
            

        );
    }
}

class Button extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: 0};
        this.setNewNumber = this.setNewNumber.bind(this);
    }

    setNewNumber() {
        this.setState({data: this.state.data + 1})
    }
    render() {
        return (
            

            
            
            

    );
    }
}
ReactDOM.render(
卸載

componentWillUnmount()
組件將要卸載時(shí)調(diào)用，一些事件監(jiān)聽(tīng)和定時(shí)器需要在此時(shí)清除，主要是優(yōu)化性能，例子見(jiàn)Clock。

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

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

相關(guān)文章

  • React專題：生命周期

    摘要：而生命周期鉤子，就是從生到死過(guò)程中的關(guān)鍵節(jié)點(diǎn)。異步渲染下的生命周期花了兩年時(shí)間祭出渲染機(jī)制。目前為這幾個(gè)生命周期鉤子提供了別名，分別是將只提供別名，徹底廢棄這三個(gè)大活寶。生命周期鉤子的最佳實(shí)踐是在這里初始化。 本文是『horseshoe·React專題』系列文章之一，后續(xù)會(huì)有更多專題推出來(lái)我的 GitHub repo 閱讀完整的專題文章來(lái)我的 個(gè)人博客 獲得無(wú)與倫比的閱讀體驗(yàn) 生命周期...

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

  • 捋一捋React的生命周期

    摘要：卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個(gè)鉤子函數(shù)這些方法會(huì)在組件初始化的時(shí)候被調(diào)用，只跟實(shí)例的創(chuàng)建有關(guān)。 前言：React 的版本從 v15 到 v16.3 ，再到v16.4，現(xiàn)在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入，而最令人困惑的卻是它的生命周期，新舊生命周期函數(shù)混雜在一起，難免會(huì)讓許多新來(lái)者有很多困惑。所以這一篇我們來(lái)...

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

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

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

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

  • React組件生命周期詳解

    摘要：組件生命周期構(gòu)造方法是對(duì)類的默認(rèn)方法，通過(guò)命令生成對(duì)象實(shí)例時(shí)自動(dòng)調(diào)用該方法。該生命周期可以發(fā)起異步請(qǐng)求，并。后廢棄該生命周期，可以在中完成設(shè)置渲染組件是一個(gè)組件必須定義的生命周期，用來(lái)渲染。該生命周期內(nèi)可以進(jìn)行。 React組件生命周期 constructor( ) 構(gòu)造方法 constructor是ES6對(duì)類的默認(rèn)方法，通過(guò) new 命令生成對(duì)象實(shí)例時(shí)自動(dòng)調(diào)用該方法。并且，該方法是...

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

  • React.js 小書(shū) Lesson20 - 更新階段的組件生命周期

    摘要：所以對(duì)于組件更新階段的組件生命周期，我們簡(jiǎn)單提及并且提供一些資料給大家。這里為了知識(shí)的完整，補(bǔ)充關(guān)于更新階段的組件生命周期你可以通過(guò)這個(gè)方法控制組件是否重新渲染。大家對(duì)這更新階段的生命周期比較感興趣的話可以查看官網(wǎng)文檔。 React.js 小書(shū) Lesson20 - 更新階段的組件生命周期 本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

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

  • React組件生命周期

    摘要：組件生命周期此文章適合之前的版本，，添加了一些新的生命周期函數(shù)，同時(shí)準(zhǔn)備廢棄一些會(huì)造成困擾的生命周期函數(shù)。每個(gè)生命周期階段調(diào)用的鉤子函數(shù)會(huì)略有不同。 React組件生命周期 此文章適合 React@17 之前的版本，[email protected]，添加了一些新的生命周期函數(shù)，同時(shí)準(zhǔn)備廢棄一些會(huì)造成困擾的生命周期函數(shù)。所有如果在React@17 發(fā)布之前，這篇文章還是適用的。新的生命周期請(qǐng)看官...

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

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

0條評(píng)論

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