qijingpei

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代码，里层表示是个字典


{
this.state.a > this.state.b ? "超出可选择的时间范围" : ""
}

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; }