React开发实战——问题集

1、import Row 和 import {Row}的区别，同样是import一个内容时，为什么一个要加{ }，一个不加？
答：如果引用的是组件的话，即使只有一个也要加上花括号 { }；
如果引用的是类/函数且数量大于一，则需要加上{ }

2、.then 的作用？
事实上 .then 是 ES6 里Promise的一个方法。

因为在JavaScript中，所有代码都是单线程执行的。所以JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：

function yibu(success,yichang){
    let a = Math.random()*1000;
    setTimeout(()=>{
        console.log("我是随机 a",a);
        if(a > 10){
            success(666);
        }else {
            yichang(999);
        }
    },2000)
}

let xiaoP = new Promise(yibu);
// x 是异步执行成功之后返回的值
let success = xiaoP.then((x)=>{
    console.log(x);
});
let failed = success.catch((y)=>{
    console.log("我是失败 y",y);
});

但是这样子嵌套不利于代码的可读性，所以就有了.then .catch方法

new Promise(yibu).then((x)=>{
    console.log(x);
}).catch((y)=>{
    console.log("我是失败 y",y);
});

3、什么是链式函数？
闭包函数就是在函数内部的函数，可以写成链式函数，这样子更容易表达其逻辑关系。

class Promises{
    then(x){
        console.log("我是 then x",x);
        return this;
    }
    catch(y){
        console.log("我是 catch y",y);
        return this;
    }
}

链式函数

new Promises().catch("xiaojing").then("zhangzhao")
.then("naguo").then("laoda");

4、执行上下文的中的this（掘金小册）

var a = {
    name: 'A',
    fn: function () {
        console.log(this.name)
    }
}
a.fn()  // this === a
a.fn.call({name: 'B'})  // this === {name: 'B'}
var fn1 = a.fn
fn1()  // this === window

4、ES6语法中的 更加简介的模块化
如果只是输出一个唯一的对象，使用export default即可，代码如下

// 创建 util1.js 文件，内容如
export default {
    a: 100
}

// 创建 index.js 文件，内容如
import obj from './util1.js'
console.log(obj)...

行不通呀

6、 let {getFieldProps} = this.props.form; 为什么可以这样写？
答：这是ES6的一个语法糖，其实就是变量的结构赋值。其实就相当于下面代码：

let this.props.form = {
  "getFieldProps":123
}
let getFieldProps = this.props.form.getFieldProps