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>