手挽手帶你學(xué)React：二檔 React生命周期以及組件開發(fā)

izhuhaodev 發(fā)布于2019-08-23 15:11 / 955人閱讀

摘要：手挽手帶你學(xué)入門二檔組件開發(fā)的開始，合理運(yùn)用生命周期和組件，能夠讓你的開發(fā)變地流利又這篇文章帶你學(xué)會創(chuàng)建組件，運(yùn)用組建。

手挽手帶你學(xué)React入門二檔,組件開發(fā)的開始，合理運(yùn)用生命周期和組件，能夠讓你的開發(fā)變地流利又happy,這篇文章帶你學(xué)會創(chuàng)建組件，運(yùn)用組建。學(xué)起來吧！

React 組件生命周期

學(xué)習(xí)React，生命周期很重要，我們了解完生命周期的各個組件，對寫高性能組件會有很大的幫助.
我們先來看一張圖

組件初始化的時候

1、getDefaultProps()

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

2、getInitialState()

在使用es6的class語法時是沒有這個鉤子函數(shù)的，可以直接在constructor中定義this.state。此時可以訪問this.props

3、componentWillMount()( 感謝原罪大神：此聲明周期在react16已經(jīng)被廢棄，到17直接刪除)

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

4、 render()

react最重要的步驟，創(chuàng)建虛擬dom，進(jìn)行diff算法，更新dom樹都在此進(jìn)行。此時就不能更改state了。

5、componentDidMount()

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

組件更新的時候
6、componentWillReceiveProps(nextProps)( 感謝原罪大神：此聲明周期在react16已經(jīng)被廢棄，到17直接刪除)

組件初始化時不調(diào)用，組件接受新的props時調(diào)用。

7、shouldComponentUpdate(nextProps, nextState)

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

8、componentWillUpdate(nextProps, nextState)

組件初始化時不調(diào)用，只有在組件將要更新時才調(diào)用，此時可以修改state，render 的時候會用你更改的值，但是這里面不能調(diào)用 this.setState()，會讓你陷入死循環(huán)

9、render()

組件渲染

10、componentDidUpdate()

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

組件卸載的時候

11、componentWillUnmount()

組件將要卸載時調(diào)用，一些事件監(jiān)聽和定時器需要在此時清除。

// 在我們組件第一次加載完的時候會這樣執(zhí)行生命周期
export default class App extends Component {
    constructor(){
        super()
        this.state={
        
        }
    }

    // getDefaultProps(){
    // es6 不支持這個
    // console.log("1.執(zhí)行g(shù)etDefaultProps")
    // 具體用法在下面
    // }
    
    // getInitialState(){
    // es6里不用它了
    // console.log("2.執(zhí)行g(shù)etInitialState")
    // 這個實(shí)際上是上面的state 在 constructor實(shí)現(xiàn)
    // }
    componentWillMount(){
        console.log("3.執(zhí)行componentWillMount")
    }
    render() {
        console.log("4.執(zhí)行render")
        return (
            
        )
    }
    componentDidMount(){
        console.log("5.執(zhí)行componentWillMount")

    }
}

// 接 getDefaultProps
// 在ES6里這么玩

// 還有一種玩法是ES7里面的
// static defaultProps = {
 //     name: "demo"
 // };  這里我們不多講了。。講多了該暈了 感興趣的加我微信 shouzi_1994
App.defaultProps = {
    name: "demo"
};

// 在我們組件更新的時候我們進(jìn)行如下生命周期
export default class App extends Component {
    constructor(){
        super()
        this.state={
            name:"test"
        }
    }
    componentWillReceiveProps(nextProps){
        // props 更新的時候調(diào)用
        console.log("1.執(zhí)行componentWillReceiveProps")
    }
    shouldComponentUpdate(nextProps, nextState){
        console.log("2.執(zhí)行shouldComponentUpdate")
        // 這個需要著重強(qiáng)調(diào)，我們優(yōu)化性能用它很重要！如果我們即將更新的東西和原來的數(shù)據(jù)相同，return一個false就停止組件更新節(jié)約性能
        if(nextState.name == this.state.name){
            return false
        }else{
            return true
        }
    }
    componentWillMount(nextProps, nextState){
        // 在組件渲染前 調(diào)用這個
        console.log("3.執(zhí)行componentWillMount")
    }
    change=()=>{
        this.setState({name:"QM"})
    }
    render() {
        console.log("4.執(zhí)行render")
        return (
            
        )
    }
   componentDidUpdate(){
        console.log("5.執(zhí)行componentDidUpdate")       
   }
   componentWillUnmount(){
    //    這個在卸載的時候會調(diào)用 業(yè)務(wù)邏輯寫里面就好了 
   }
}

生命周期簡單介紹就這些了，真正工作中要根據(jù)業(yè)務(wù)需求來調(diào)用，大大增加你的開發(fā)效率，處理你開發(fā)中遇到的難題。

組件創(chuàng)建

其實(shí)我們前面的App實(shí)際上就是一個組件了，我們類比到vue里面，它就是腳手架為我們創(chuàng)建的App.vue 是一個根組件，我們別的組件都渲染到這個組件的內(nèi)部就好了。

那么我們?nèi)绾蝿?chuàng)建一個子組件呢？

export default class App extends Component {
    constructor(){
        super()
        this.state={
        
        }
    }
  
    render() {
        //要想使用子組件也很簡單 用標(biāo)簽的形式拿進(jìn)來就好了
        return (
            
        )
    }
  
}

//下面我們再寫一個class 并且繼承 Component 這就是一個組件了

class Children extends Component{
    constructor(){
        super()
        this.state={
        
        }
    }
    render(){
        return(
            我是子組件
        )
    }
}

組件傳參

我們學(xué)會了如何創(chuàng)建組件，那么組件怎么傳參呢？這個是非常重要的東西，畢竟組件之間不能通訊，那就沒有創(chuàng)建它的意義了。

父子傳參

在React中父子傳參極其類似Vue 直接在標(biāo)簽上填寫屬性，但是在子組件接收的時候會有所不同

我們接著使用上面的代碼

export default class App extends Component {
    constructor(){
        super()
        this.state={
        
        }
    }
  
    render() {
        //要想使用子組件也很簡單 用標(biāo)簽的形式拿進(jìn)來就好了
        return (
            
        )
    }
  
}

//下面我們再寫一個class 并且繼承 Component 這就是一個組件了

class Children extends Component{
    constructor(){
        super()
        this.state={
        
        }
    }
    // 通過這種形式 我們就可以把父組件的東西傳遞給子組件了，所有的屬性存儲在props里面，上面我們介紹生命周期的時候，也提了一下如何創(chuàng)建默認(rèn)props。這里我們寫一下

    render(){
        return(
            
                我是子組件
                {this.props.params}
            
        )
    }
    // 如果父組件沒有傳遞 params 我們又想使用默認(rèn)的props 那么就要使用下面的寫法
}

Children.defaultProps = {
    params: "我是默認(rèn)的東西"
};

// 設(shè)置了默認(rèn)props以后 如果我們不傳參就會默認(rèn)展示我們默認(rèn)規(guī)定好的屬性了

插槽（類似Vue solt）
為什么要把插槽放在這里講解呢？實(shí)際上React的插槽是通過傳參的形式下來的，怎么理解呢？我覺得放進(jìn)代碼中是最容易理解的。

export default class App extends Component {
    constructor(){
        super()
        this.state={
        
        }
    }
  
    render() {
        //要想使用子組件也很簡單 用標(biāo)簽的形式拿進(jìn)來就好了
        return (
            
                傳遞第一個
                傳遞第二個
                傳遞第三個
            
        )
    }
  
}

//下面我們再寫一個class 并且繼承 Component 這就是一個組件了

class Children extends Component{
    constructor(){
        super()
        this.state={
        
        }
    }
    // 通過這種形式 我們就可以把父組件的東西傳遞給子組件了，所有的屬性存儲在props里面，上面我們介紹生命周期的時候，也提了一下如何創(chuàng)建默認(rèn)props。這里我們寫一下

    render(){
        console.log(this.props)
        // {children:Array(3)
        // params:"我從父組件傳過來"}


        // children的內(nèi)容為 [
            // {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …},
            // {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …},
            // {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}
            // ]
        //我們可以看到 他們被順序放到了 this.props.children中 并且 這是個數(shù)組 內(nèi)部存儲的就是虛擬dom
        
        return(
            
                我是子組件
                {/* 這里我用循環(huán)的方式把三個children取出來直接渲染即可 */}
                {this.props.children.map((item,key)=>{
                    return item
                })}
                {/* 我們更加直觀一點(diǎn) */}
                {this.props.children[1]}
                {this.props.children[0]}
                {this.props.children[2]}
                 {/* 看到這里大家應(yīng)該可以知道插槽的簡單用法了吧 */}
            
        )
    }
    // 如果父組件沒有傳遞 params 我們又想使用默認(rèn)的props 那么就要使用下面的寫法
}

Children.defaultProps = {
    params: "我是默認(rèn)的東西"
};

子傳父參
在Vue中我們可以通過定義函數(shù)，以實(shí)參的形式傳遞，在父組件捕獲的形式來獲取想要傳遞的參數(shù)，那么在React中這個辦法是否也同樣適用呢？答案是肯定的，依舊是通過父組件聲明函數(shù)，傳遞給子組件，子組件調(diào)用并傳入?yún)?shù)，在父組件捕獲即可。

export default class App extends Component {
    constructor(){
        super()
        this.state={
            myPatams:"test"
        }
    }
    getParams(params){
        console.log(params,this)
        this.setState({
            myPatams:params
        })
    }
    render() {
        //要想使用子組件也很簡單 用標(biāo)簽的形式拿進(jìn)來就好了
        return (
                
                {this.state.myPatams}
                
                {/* 這里我們把函數(shù)傳遞下去，一定要bind this 否則在我們在子組件中使用bind來調(diào)用的時候，this的指向會跑到子組件中 我們拿到的參數(shù)意義就不大了 當(dāng)然箭頭函數(shù)也是完全沒問題的 */}
            
        )
    }
  
}

//下面我們再寫一個class 并且繼承 Component 這就是一個組件了

class Children extends Component{
    constructor(){
        super()
        this.state={
        
        }
    }
    render(){

        return(
            
                我是子組件
                
                {/* 我們在這里調(diào)用父組件傳遞過來的方法，并且傳入?yún)?shù) */}
            
        )
    }
}

Children.defaultProps = {
    params: "我是默認(rèn)的東西"
};

非父非子傳參（events 方法）
這種非關(guān)系型組件傳參一般使用redux來傳參，這里我們還有沒學(xué)習(xí)到，我們借助node的EventEmitter也可以輕松實(shí)現(xiàn)

import React,{Component} from "react"
// 首先我們創(chuàng)建一個監(jiān)聽器
import EventEmitter from "events"; //事件監(jiān)控對象
let emitter = new EventEmitter; //創(chuàng)建一個事件監(jiān)控者 普通級別的監(jiān)聽
emitter.setMaxListeners(100000); //設(shè)置監(jiān)控管理器的最大監(jiān)聽數(shù)量
export default class App extends Component {
    constructor(){
        super()
        this.state={
            myPatams:"test"
        }
    }
    getParams(params){
        console.log(params,this)
        this.setState({
            myPatams:params
        })
    }
    render() {
        //要想使用子組件也很簡單 用標(biāo)簽的形式拿進(jìn)來就好了
        return (
                
                {this.state.myPatams}
                
                {/* 這里我們把函數(shù)傳遞下去，一定要bind this 否則在我們在子組件中使用bind來調(diào)用的時候，this的指向會跑到子組件中 我們拿到的參數(shù)意義就不大了 當(dāng)然箭頭函數(shù)也是完全沒問題的 */}
                
            
        )
    }
  
}

//下面我們再寫一個class 并且繼承 Component 這就是一個組件了

class Children extends Component{
    constructor(){
        super()
        this.state={
            emit:""
        }
    }
    componentWillMount(){
        emitter.on("childrenEmit",(param)=>{  //我們在這里設(shè)置監(jiān)聽
            console.log(param)
            this.setState({
                emit:param
            })
        })
    }
    render(){

        return(
            
                {this.state.emit}
                
                {/* 我們在這里調(diào)用父組件傳遞過來的方法，并且傳入?yún)?shù) */}
            
        )
    }
}

class ChildrenTwo extends Component{
    constructor(){
        super()
        this.state={
        
        }
    }
    gaveParams(param){
        emitter.emit("childrenEmit",param)  //從第二個子組件觸發(fā)并且傳遞參數(shù)
    }
    render(){

        return(
            
                我是子組件
                
            
        )
    }
}

組件抽離

寫了這么多，相信大家差不多會寫自己的組件并且在組件中傳遞參數(shù)了，這里還有一個問題，大家是不是發(fā)現(xiàn)我的所有組件都寫在了一個JS內(nèi)部，這樣如果是一個大項目，我們的這個JS就會變地非常臃腫，這時候我們就要抽離這個組件。實(shí)際上非常簡單，用到的就是我們ES6的 export 導(dǎo)出即可如果只有一個組件那么還可以像我們書寫App這個基礎(chǔ)組件一樣使用 export default 默認(rèn)導(dǎo)出

這里我給大家抽離一下

// App.js
import React,{Component} from "react"
import {Children} from "./components/Children.js"  // 因?yàn)槲覀兊腃hildren中使用的是 export 來暴露

//import Children from "./components/Children.js" //  如果使用的是 export default 則應(yīng)該這樣寫

export default class App extends Component {
    constructor(){
        super()
        this.state={
            myPatams:"test"
        }
    }
    getParams(params){
        console.log(params,this)
        this.setState({
            myPatams:params
        })
    }
    render() {
        //要想使用子組件也很簡單 用標(biāo)簽的形式拿進(jìn)來就好了
        return (
                
                {this.state.myPatams}
                
                {/* 這里我們把函數(shù)傳遞下去，一定要bind this 否則在我們在子組件中使用bind來調(diào)用的時候，this的指向會跑到子組件中 我們拿到的參數(shù)意義就不大了 當(dāng)然箭頭函數(shù)也是完全沒問題的 */}
            
        )
    }
  
}

// children.js
import React,{Component} from "react"

// 當(dāng)我們抽離出來以后 必須要再次引入 react的必要組件

export class Children extends Component{  //我們這里使用的是export來暴露  如果只有一個組件 也可以使用 export default 來暴露
    constructor(){
        super()
        this.state={
        
        }
    }
    render(){

        return(
            
                我是子組件
                
                {/* 我們在這里調(diào)用父組件傳遞過來的方法，并且傳入?yún)?shù) */}
            
        )
    }
}

Children.defaultProps = {
    params: "我是默認(rèn)的東西"
};

大功告成了代碼是不是清晰多了？？

總結(jié)

這一期內(nèi)容不多主要是介紹組件的生命周期使用方法以及如何傳參，這些內(nèi)容可全都是干貨，工作中會經(jīng)常經(jīng)常使用到，希望大家能自己寫小demo來熟悉一下寫法，下一期將會帶大家學(xué)習(xí)React-Router 以及context和高階組件的創(chuàng)建，為我們學(xué)習(xí)Redux打下基礎(chǔ)

視頻制作中

云服務(wù)器 GPU云服務(wù)器帶你學(xué)c帶你飛 react開發(fā)神器 docker react 開發(fā) webrtc音視頻開發(fā)react

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

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

發(fā)表評論

登陸后可評論

0條評論

izhuhaodev

男|高級講師

我要關(guān)注我要私信

TA的文章

【線代&NumPy】第八章 - 特征值和特征向量 | Eigenvalue and

閱讀 3361·2021-11-25 09:43
樹莓派4B安裝uboot

閱讀 3152·2021-10-11 10:58
MoeCloud：249元/月/2核/2GB內(nèi)存/20GB空間/12TB流量/300Mbps-1Gb

閱讀 2757·2021-09-27 13:59
快云科技：賀中秋迎國慶云VPS7折年付僅5折獨(dú)立服務(wù)器85折以上產(chǎn)品續(xù)費(fèi)永久同價

閱讀 3088·2021-09-24 09:55
如何檢測css特性

閱讀 2179·2019-08-30 15:52
不知道層疊，別說你懂CSS

閱讀 1839·2019-08-30 14:03
大三下學(xué)期實(shí)訓(xùn)，錄制的視頻【雖然感覺沒什么用吧】

閱讀 2267·2019-08-30 11:11
CSS：關(guān)于元素寬度與高度的討論系列文章（一）

閱讀 2033·2019-08-28 18:12

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

手挽手帶你學(xué)React：二檔 React生命周期以及組件開發(fā)

我是子組件

我是子組件

{this.props.params}

我是子組件

我是子組件

{this.state.emit}

我是子組件

我是子組件

相關(guān)文章

**手挽手帶你學(xué)VUE：二檔組件開發(fā)以及常用全局api**

**手挽手帶你學(xué)VUE：二檔組件開發(fā)以及常用全局api**

**手挽手帶你學(xué)React：一檔 React環(huán)境搭建，語法規(guī)則，基礎(chǔ)使用**

**手挽手帶你學(xué)React：三檔 React-router4.x的使用**

**手挽手帶你學(xué)React：四檔（上）一步一步學(xué)會react-redux （自己寫個Redux）**

發(fā)表評論

0條評論

izhuhaodev

男|高級講師

TA的文章

【線代&NumPy】第八章 - 特征值和特征向量 | Eigenvalue and

樹莓派4B安裝uboot

MoeCloud：249元/月/2核/2GB內(nèi)存/20GB空間/12TB流量/300Mbps-1Gb

快云科技：賀中秋迎國慶云VPS7折年付僅5折獨(dú)立服務(wù)器85折以上產(chǎn)品續(xù)費(fèi)永久同價

如何檢測css特性

不知道層疊，別說你懂CSS

大三下學(xué)期實(shí)訓(xùn)，錄制的視頻【雖然感覺沒什么用吧】

CSS：關(guān)于元素寬度與高度的討論系列文章（一）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

手挽手帶你學(xué)React：二檔 React生命周期以及組件開發(fā)

我是子組件

我是子組件

{this.props.params}

我是子組件

我是子組件

{this.state.emit}

我是子組件

我是子組件

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！