react基础<Ⅰ>

Day1

1.var 与 let 的区别

声明后未赋值，表现相同

(function() {
      var varTest;
      let letTest;
      console.log(varTest); //输出undefined
      console.log(letTest); //输出undefined
    }());

使用未声明的变量，表现不同:

(function() {
  console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行)
  console.log(letTest); //直接报错：ReferenceError: letTest is not defined

  var varTest = 'test var OK.';
  let letTest = 'test let OK.';
}());

重复声明同一个变量时，表现不同：

(function() {
      "use strict";
      var varTest = 'test var OK.';
      let letTest = 'test let OK.';

      var varTest = 'varTest changed.';
      let letTest = 'letTest changed.'; //直接报错：SyntaxError: Identifier 'letTest' has already been declared

      console.log(varTest); //输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)
      console.log(letTest);
    }());

变量作用范围，表现不同：

(function() {
  var varTest = 'test var OK.';
  let letTest = 'test let OK.';

  {
    var varTest = 'varTest changed.';
    let letTest = 'letTest changed.';
  }

  console.log(varTest); //输出"varTestchanged."，内部"{}"中声明的varTest变量覆盖外部的letTest声明
  console.log(letTest); //输出"test letOK."，内部"{}"中声明的letTest和外部的letTest不是同一个变量
}());

参考：https://www.cnblogs.com/asand/p/7205632.html

2. https://www.bootcdn.cn -->可以搜索开源库

3. react的局部更新(Dom diff)

将要更新的代码与原代码相对比，只更新不同的部分

4. JSX与虚拟对象

jsx的由来：
为实现react的构想，react的创始人将页面上的代码搬到了js中，通过渲染->回传的方式达到节约一半时间的目的
（原生js是通过document.getElementById获取，操作，回传给元素来实现数据的更新）
为了在js中写html，需要运用React.createElement这一API来实现，结果呈现出来的代码与html语句惊人的相似，这促使了react创始人的思考，能不能直接在js中写html呢？
jsx因运而生
jsx其实是js的一种拓展，一般x表示拓展，jsx就是用html来写js，大体不变的情况下将变量用{}括起来以区分字符串与变量
react创始人设计了一款程序，可以将html翻译成js，我们在js里面写的“html”就是jsx，这个程序就是jsx翻译器
虚拟dom就是表示dom结点的对象
例如：<App/>
就是一个虚拟的Dom，它是由React.creareElement(App)产生的