“hust> rm -rf”, 了结过往, 面向未来, 是我为HUST计算机学院设计的毕业衫图案

JSX和createElement

我们在实现一个React组件时可以选择两种编码方式，第一种是使用JSX编写：

1
2
3
4
5

class Hello extends Component {
  render() {
    return <div>Hello ConardLi</div>;
  }
}

第二种是直接使用React.createElement编写：

1
2
3
4
5

class Hello extends Component {
  render() {
    return React.createElement('div', null, `Hello ConardLi`);
  }
}

实际上，上面两种写法是等价的，JSX只是为 React.createElement(component, props, ...children)方法提供的语法糖。也就是说所有的JSX代码最后都会转换成React.createElement(...)，Babel帮助我们完成了这个转换的过程。

• 为什么React自定义组件需要大写首字母? 注意，babel在编译时会判断JSX中组件的首字母，当首字母为小写时，其被认定为原生DOM标签，createElement的第一个变量被编译为字符串；当首字母为大写时，其被认定为自定义组件，createElement的第一个变量被编译为对象；

Webpack是基于模块化打包的工具:

#Loader和Plugin的不同？

1.实现一个构造函数 Foo，构造函数里面实现一个属性 a，和一个方法 getA，属性 a 能够在构造函数被实例化的时候通过参数设置

1
2
3
4

function Foo (a){
    this.a = a;
}
Foo.prototype.getA = function(){return this.a };

2. 写一个构造函数 Bar 继承上面的 Foo, 并且它有一个方法 getB,能够获取到 Bar 实例对象的 b 属性

1
2
3
4
5
6
7

function Bar (a,b){
	Foo.call(this, a);
    this.b = b;
}
Bar.prototype = Object.create(Foo.prototype); //Object.create
Bar.prototype.constructor = Bar;
Bar.prototype.getB = function(){return this.b };

3. 讲一讲 new 的工作原理

new 做的三件事

1. 为实例添加私有属性；
2. 让实例可以访问到构造函数原型所在原型链上的属性；
3. 如果构造函数返回的不是引用类型，则返回自己创建的 obj;

1
2
3
4
5
6
7

function myNew (func,...arg) {
	let obj = {};
	let res = func.apply(obj,arg);
	Object.setProtoTypeof(obj,func.prototype); // Object.setPrototypeOf
	if ((typeof res == 'object'&& res!=null) || typeof res == 'function') return res;
    return obj;
}

4. 看代码说输出

1
2
3
4
5
6
7
8
9
10
11
12

var Item = {
  id: 1,
  getId: function() {
    return this.id;
  }
};

console.log(Item.getId()); // 1
var func = Item.getId; // 
console.log(func());//undefined
 //再提问：怎么不修改 Item，使调用 Item 能够输出Item.id
console.log(func.call(Item));

学习来源: 深入理解JS中的对象（三）：class 的工作原理 - forcheng - 博客园

学习方法: 在babelijc网站 利用ES6转ES5原码功能, 阅读class原码.

1. 数组扁平化

   let flatArray = board.flat(Infinity);