【第4天】移動App-學習筆記

移動App第4天

組件的生命週期

• 概念：組件從創建、到運行、再到銷燬，這期間總是伴隨着各種各樣的事件，那麼，這些事件統稱爲 組件的生命週期函數；
• 組件生命週期分爲三部分：

  • 組件創建階段：生命週期函數，有一個顯著的特點：組件一生只執行一次；

  • 組件運行階段：這些函數，也有顯著的特點： 一生會根據屬性props 和 狀態 state 的改變，有選擇性的觸發0次或多次；

  • 組件銷燬階段：這些函數，也有顯著的特點：一生只執行一次；

vue中的生命週期圖
React Native 中組件的生命週期

defaultProps

在組件創建之前，會先初始化默認的props屬性，這是全局調用一次，嚴格地來說，這不是組件的生命週期的一部分。在組件被創建並加載候，首先調用 constructor 構造器中的 this.state = {}，來初始化組件的狀態。

React生命週期的回調函數總結成表格如下：

組件生命週期的執行順序：

• Mounting：

• constructor()
• componentWillMount()
• render()
• componentDidMount()

• Updating：

• componentWillReceiveProps(nextProps)
• shouldComponentUpdate(nextProps, nextState)
• componentWillUpdate(nextProps, nextState)
• render()
• componentDidUpdate(prevProps, prevState)

• Unmounting：

• componentWillUnmount()

通過Counter計數器的小案例 - 瞭解生命週期函數

1. 給組件設置默認屬性：
2. 給屬性進行類型校驗，需要先運行cnpm i prop-types --save

組件初始化時生命週期事件總結

1. componentWillMount：
2. render：
3. componentDidMount：
4. 注意：在render函數中，不能調用setState()方法

通過原生的方式獲取元素並綁定事件

React中使用ref屬性獲取DOM元素引用

使用React中的事件，綁定count自增

組件運行中事件的對比

1. shouldComponentUpdate：
2. componentWillUpdate：
3. render：
4. componentDidUpdate：

綁定this並傳參的三種方式

1. 在事件中綁定this並傳參：

    <input type="button" value="在事件中綁定this並傳參" onClick={this.handleMsg1.bind(this, '🍕', '🍟')} />

    // 在事件中綁定this並傳參
    handleMsg1(arg1, arg2) {
        console.log(this);
        // 此時this是個null
        this.setState({
            msg: '在事件中綁定this並傳參：' + arg1 + arg2
        });
    }

2. 在構造函數中綁定this並傳參:

    // 修改構造函數中的代碼：
    this.handleMsg2 = this.handleMsg2.bind(this, '🚗', '🚚');

    <input type="button" value="在構造函數中綁定this並傳參" onClick={this.handleMsg2} />

    // 在構造函數中綁定this並傳參
    handleMsg2(arg1, arg2) {
        this.setState({
            msg: '在構造函數中綁定this並傳參：' + arg1 + arg2
        });
    }

3. 用箭頭函數綁定this並傳參：

    <input type="button" value="用箭頭函數綁定this並傳參" onClick={() => { this.handleMsg3('👩', '👰') }} />

    // 用箭頭函數綁定this並傳參
        handleMsg3(arg1, arg2) {
            this.setState({
                msg: '用箭頭函數綁定this並傳參：' + arg1 + arg2
            });
        }

綁定文本框與state中的值

1. 在Vue.js中，默認可以通過v-model指令，將表單控件和我們的data上面的屬性進行雙向數據綁定，數據變化和頁面之間的變化是同步的！
2. 在React.js中，默認沒有提供雙向數據綁定這一功能，默認的，只能把state之上的數據同步到界面的控件上，但是不能默認實現把界面上數據的改變，同步到state之上，需要程序員手動調用相關的事件，來進行逆向的數據傳輸！
3. 綁定文本框和state的值：

    {/*只要將value屬性，和state上的狀態進行綁定，那麼，這個表單元素就變成了受控表單元素，這時候，如果沒有調用相關的事件，是無法手動修改表單元素中的值的*/}
    <input style={{ width: '100%' }} ref="txt" type="text" value={this.state.msg} onChange={this.handleTextChange} />

    // 這是文本框內容改變時候的處理函數
    handleTextChange = () => {
        this.setState({
            msg: this.refs.txt.value
        });
    }

4. 注意setState的一個問題：

// 保存最新的state狀態值，在保存的時候，是異步地進行保存的，所以，如果想要獲取最新的，剛剛保存的那個狀態，需要通過回掉函數的形式去獲取最新state
this.setState({
    msg: this.refs.txt.value
    // msg: e.target.value
}, function () {
    // 獲取最新的state狀態值
    console.log(this.state.msg);
});

發表評論案例

擴展

context特性

記住一串單詞組合getChildContextTypes
前3個、後3個、後兩個
一個方法、兩個靜態屬性

相關文章

類型校驗
Animation Add-Ons
移動端 關於 鍵盤將input 框 頂上去的解決思路—個人見解

內容來自網上，記錄學習筆記方便後期查看，如有問題請與我聯繫，謝謝

---

【第6天】React-學習筆記

【第5天】移動App-學習筆記

【第4天】移動App-學習筆記

【第3天】移動App-學習筆記

【第2天】移動App-學習筆記

【第1天】移動App-學習筆記