React 函数组件

 1： React 组件 (函数式组件)

1：React提供了两种创建组件方式:
  1.1：函数式组件   1.2: 类组件

 执行了ReactDOM.render(<myComponent />... 之后, 发生了什么)
 1： React 解析组件标签。 找到myComponent 组件
 2： 发现组件使用是函数定义, 随后调用该函数, 将返回的虚拟DOM转化为真实DOM, 随后呈现在页面中。

 JSX 就是一个语法糖: 就是可以简单的创建虚拟DOM 
------------------------------------------------------------------
创建函数时组件: 
<div id="test"></div>
// 一定要写text/babel
<script type="text/babel">
   // 创建函数式组件
   function MyComponent() {
      console.log(this);  // undefined
      // 为什么是undefined, 因为我们写的是jsx 语法, 在经过babel 翻译之后，开启了严格模式
      // 禁止指向window 顶层的对象, 在babeljs.cn 在babel js 官网中可以测试
      return <h2>我使用函数定义组件, 适用于简单组件的定义</h2>
   }
   // 2: 渲染组件到页面
   ReactDOM.render(MyComponent/>, document.getElementById('test'))
</script>
// 注意:  定义函数式组件首字母必须大写,
          调用函数是组件的时候,  必须使用单闭合标签使用。

jsx 就是一个语法糖可以更加简单创建VDOM, 方便 快捷创建VDOM

2： 类的基本知识：

<script>
  // 创建一个Person类
  class Person {
    // 构造方法 == 就是当我们实例化这个类的时候这个构造函数会自动调用
    constructor(name, age) {
      this.name = name
      this.age = age
    }
   // 一般方法
   speak() 方法在类的原型对象上, 供实例调用
   通过Person 实例调用speak时， speak中的this就是Persons实例。
   speak() {
     console.log(`我名字是${this.name}, 我年龄是${this.age}`)
   } 
  }

 let p1 = new Person('xxx', 18);  // p: 就是一个实例对象  Person: 就是一个类
 let p2 = new Person('aaa', 20)
 console.log(p1); 
 console.log(p2); 
 p1.speak();
 p2.speak();
---------------------------------------------------------------------
继承
// 创建一个Student类,  继承Person 类
class Student extends Person {
 
}
let student = new Student('Bob, 20');
student.speak(); // 继承
</script>
--------------------------------------------------------------------
创建一个Student类， 继承Person 类
class Student extends Person {
  constructor(name, age, grade) {
    super();   // 子类重写父类的构造方法,  一定要使用super() 关键字
    this.name = name
    this.age = age
    this.grade = grade
  }

  // 重写父类的speak() 方法
  speak() {
    console.log(`我名字是${this.name}, 我年龄是${this.age}， 我的成绩是${this.grade}`)
  } 
}