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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章