React 使用總結:setState回調 + 設置延時 + promise.then(onCompleted, onRejected) +.....

1.React setState方法回調的寫法:

因爲js是異步的,所以有時候會用到setState的回調方法,其作用是在setState()執行完後再調用回調方法:

this.setState({
    days: daysLimit
}, () => {
    console.log("可選日期範圍是:" + this.state.days);
});

如果不考慮異步,直接輸出this.state.days的話,可能會是修改前的days值。

2.React 修改字體顏色

style期待的是一個js對象,所以才加了2個括號,外層表示是js代碼,裏層表示是個字典

<span style={{color: '#F00'}}>
{
this.state.a > this.state.b ? "超出可選擇的時間範圍" : ""
}
</span>

3.this相關的一個錯誤

new Util().generateAnswer().then(function () {  this....  }

像這種如果new 一個對象然後再裏面用this的話, 是引用不到代碼所在類的對象的,應該是會引用到new Util()這個對象。
組件方法的‘調用者’不同會導致this的不同(這裏的 “調用者” 指的是函數執行時的當前對象)

4.設置延時

// 示例:等待5秒後,如果判斷成功,則提示
function stateChange(newState) {
    setTimeout(function () {
        if (newState == -1) {
            alert('VIDEO HAS STOPPED');
        }
    }, 5000);}
setTimeout(code,millisec)

code:必需。要調用的函數後要執行的 JavaScript 代碼串。
millisec:必需。在執行代碼前需等待的毫秒數。

5.promise.then(onCompleted, onRejected) 方法

let p1 = new Promise(function(resolve, reject) {
  resolve("Success!"); // 成功
  // or
  // reject ("Error!");  // 拒絕
});

p1.then(function(value) {
  console.log(value); // Success!
}, function(reason) {
  console.log(reason); // Error!
});

參數:
promise
必需:Promise 對象。
onCompleted
必需:承諾成功完成時要運行的履行處理程序函數。
onRejected
可選:承諾被拒絕時要運行的錯誤處理程序函數。
中文官方文檔鏈接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

6.always()方法(deferred.always())

deferred.always(alwaysCallbacks [, alwaysCallbacks ] ) :不管這個請求成功或者失敗都會調用參數裏的方法
參數alwaysCallbacks
描述:Function類型 一個函數或者函數數組,當Deferred(延遲)對象得到解決或被拒絕時被調用
後一個alwaysCallbacks:
可選。Function類型 一個函數或者函數數組,當Deferred(延遲)對象得到解決或被拒絕時被調用

7.爲什麼函數 要綁定到this上(爲什麼要bind(this))

this.handleClick = this,handleClick.bind(this)

因爲類的方法默認是不會綁定 this 的。如果你忘記綁定 this.handleClick 並把它傳入 onClick, 當你調用這個函數的時候 this 的值會是 undefined。

8.調用父組件的onChange()方法:

this.props.onChange(event, this.props.label);

9.所有的React組件必須像純函數那樣使用它們的props。

純函數: 它沒有改變它自己的輸入值,當傳入的值相同時,總是會返回相同的結果。
function sum(a, b) { return a + b; }

10.React的大括號內可以嵌入任何JavaScript代碼(不知道這麼說準確嗎?):

<Select style={{'min-width': '110px'}} />

11.通過三目表達式來改變樣式,看起來代碼更簡潔:

<li id="Tab" className={this.state.Tab == 'mytab' ? "active" : null}>啦啦啦</li>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章