手挽手帶你學React：二檔 React生命周期以及組件開發

izhuhaodev 發布于2019-08-23 15:11 / 945人閱讀

摘要：手挽手帶你學入門二檔組件開發的開始，合理運用生命周期和組件，能夠讓你的開發變地流利又這篇文章帶你學會創建組件，運用組建。

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

React 組件生命周期

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

組件初始化的時候

1、getDefaultProps()

設置默認的props，也可以用dufaultProps設置組件的默認屬性.

2、getInitialState()

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

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

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

4、 render()

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

5、componentDidMount()

組件渲染之后調用，只調用一次。

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

組件初始化時不調用，組件接受新的props時調用。

7、shouldComponentUpdate(nextProps, nextState)

react性能優化非常重要的一環。組件接受新的state或者props時調用，我們可以設置在此對比前后兩個props和state是否相同，如果相同則返回false阻止更新，因為相同的屬性狀態一定會生成相同的dom樹，這樣就不需要創造新的dom樹和舊的dom樹進行diff算法對比，節省大量性能，尤其是在dom結構復雜的時候

8、componentWillUpdate(nextProps, nextState)

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

9、render()

組件渲染

10、componentDidUpdate()

組件初始化時不調用，組件更新完成后調用，此時可以獲取dom節點。

組件卸載的時候

11、componentWillUnmount()

組件將要卸載時調用，一些事件監聽和定時器需要在此時清除。

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

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

    }
}

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

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

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

生命周期簡單介紹就這些了，真正工作中要根據業務需求來調用，大大增加你的開發效率，處理你開發中遇到的難題。

組件創建

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

那么我們如何創建一個子組件呢？

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

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

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

組件傳參

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

父子傳參

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

我們接著使用上面的代碼

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

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

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

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

Children.defaultProps = {
    params: "我是默認的東西"
};

// 設置了默認props以后 如果我們不傳參就會默認展示我們默認規定好的屬性了

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

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

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

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

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


        // children的內容為 [
            // {$$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中 并且 這是個數組 內部存儲的就是虛擬dom
        
        return(
            
                我是子組件
                {/* 這里我用循環的方式把三個children取出來直接渲染即可 */}
                {this.props.children.map((item,key)=>{
                    return item
                })}
                {/* 我們更加直觀一點 */}
                {this.props.children[1]}
                {this.props.children[0]}
                {this.props.children[2]}
                 {/* 看到這里大家應該可以知道插槽的簡單用法了吧 */}
            
        )
    }
    // 如果父組件沒有傳遞 params 我們又想使用默認的props 那么就要使用下面的寫法
}

Children.defaultProps = {
    params: "我是默認的東西"
};

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

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

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

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

        return(
            
                我是子組件
                
                {/* 我們在這里調用父組件傳遞過來的方法，并且傳入參數 */}
            
        )
    }
}

Children.defaultProps = {
    params: "我是默認的東西"
};

非父非子傳參（events 方法）
這種非關系型組件傳參一般使用redux來傳參，這里我們還有沒學習到，我們借助node的EventEmitter也可以輕松實現

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

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

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

        return(
            
                {this.state.emit}
                
                {/* 我們在這里調用父組件傳遞過來的方法，并且傳入參數 */}
            
        )
    }
}

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

        return(
            
                我是子組件
                
            
        )
    }
}

組件抽離

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

這里我給大家抽離一下

// App.js
import React,{Component} from "react"
import {Children} from "./components/Children.js"  // 因為我們的Children中使用的是 export 來暴露

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

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

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

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

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

        return(
            
                我是子組件
                
                {/* 我們在這里調用父組件傳遞過來的方法，并且傳入參數 */}
            
        )
    }
}

Children.defaultProps = {
    params: "我是默認的東西"
};

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

總結

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

視頻制作中

GPU云服務器云服務器帶你學c帶你飛 react開發神器 docker react 開發 webrtc音視頻開發react

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

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

手挽手帶你學VUE：二檔組件開發以及常用全局api

摘要：我們想要在中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。所在組件的更新時調用，但是可能發生在其子更新之前。指令所在組件的及其子全部更新后調用。視頻教程由于思否不支持視頻鏈接視頻請移步 http://www.henrongyi.top 你能學到什么二檔視頻當然要比一檔視頻難一點，如果前面的內容還沒有消化完畢的話，還是建議大家繼續消化前面的內容，然后再看接下來的部分。...

fredshare 2019-08-02 14:02 評論0 收藏0
手挽手帶你學VUE：二檔組件開發以及常用全局api

摘要：我們想要在中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。所在組件的更新時調用，但是可能發生在其子更新之前。指令所在組件的及其子全部更新后調用。視頻教程由于思否不支持視頻鏈接視頻請移步 http://www.henrongyi.top 你能學到什么二檔視頻當然要比一檔視頻難一點，如果前面的內容還沒有消化完畢的話，還是建議大家繼續消化前面的內容，然后再看接下來的部分。...

Pink 2019-08-23 14:28 評論0 收藏0
手挽手帶你學React：一檔 React環境搭建，語法規則，基礎使用

摘要：當屬性是一個回調函數時，函數接收底層元素或類實例取決于元素的類型作為參數。手挽手帶你學React入門第一期,帶你熟悉React的語法規則,消除對JSX的恐懼感,由于現在開發中都是使用ES6語法開發React，所以這次也使用ES6的模式進行教學，如果大家對ES6不熟悉的話,先去看看class相關內容吧，這里我也慢慢帶大家一步一步學會React。視頻教程視頻教程可移步我的個人博客：h...

BicycleWarrior 2019-08-23 15:11 評論0 收藏0
手挽手帶你學React：三檔 React-router4.x的使用

摘要：我們在內部來渲染不同的組件我們這里采用哈希路由的方式，鑒于的渲染機制，我們需要把值綁定進入內部。手挽手帶你學React入門三檔,帶你學會使用Reacr-router4.x,開始創建屬于你的React項目什么是React-router React Router 是一個基于 React 之上的強大路由庫，它可以讓你向應用中快速地添加視圖和數據流，同時保持頁面與 URL 間的同步。通俗一...

SunZhaopeng 2019-08-23 15:11 評論0 收藏0
手挽手帶你學React：四檔（上）一步一步學會react-redux （自己寫個Redux）

手挽手帶你學React入門四檔,用人話教你react-redux，理解redux架構，以及運用在react中。學完這一章，你就可以開始自己的react項目了。之前在思否看到過某個大神的redux搭建忘記了大神的名字這里只記得內容了憑借記憶和當時的學習路線寫下本文隔空感謝本人學習react-redux的時候遇到了很多坎，特別是不理解為什么這么用，這是什么東西，用來做什么。加上各種名詞讓人...

sixgo 2019-08-23 15:11 評論0 收藏0