（二）React的创建组件
简介组件化和模块化
模块：
1.理解：向外提供特定功能的js程序, 一般就是一个js文件
2.为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
3.作用：复用js, 简化js的编写, 提高js运行效率
组件：
1.理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2.为什么要用组件： 一个界面的功能更复杂
3.作用：复用编码, 简化项目编码, 提高运行效率
模块化:
1.当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化:
2.当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
函数式组件
创建函数式组件：
<script type="text/babel">
//1.创建函数式组件
function MyComponent(){
console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/
</script>
类式组件
复习js类的知识
1.js创建类：
//创建类
class Person（）{
//构造器方法
constructor(name,age){
//构造器中的this是类的实例对象
this.name = name;
this.age = age
}
//一般方法
speak(){
//spaek的方法放在了哪里? 类的原型对象上
//speak给实例用的
//this指的是谁调用的 通过person实例调用时 this指的是person实例
console.log('我是${this.name},我的年龄是${this,age}')
}
}
const P1 = new Person('tom',18)
P1.speak()
console.log(P1)
2.增加类的属性 不一定要在构造方法中 可以直接在类里面直接写：
class Car() {
constructor(name,price){
this.name = name
this.price = price
}
//类中可以直接写赋值语句
a = 1 //可以直接显示在这个类的相应属性上
}
3.继承的相关知识：
//创建一个studen类 继承与Person类
//继承的方法会继承构造器 要有自己的属性还要写构造器 但是要写super 为什么 就是因为要调用父类的构造器
class Studen extends Person(){
constructor(name,age,grade){
super(name,age)
this.grade = grade
this.school = '尚硅谷'
}
//重写从父类继承过来的方法
speak(){
console.log(`我叫${this.name}，我年龄是${this.age},我读的是${this.grade}年级`);
this.study()
}
study(){
//study方法放在了哪里？——类的原型对象上，供实例使用
//通过Student实例调用study时，study中的this就是Student实例
console.log('我很努力的学习');
}
}
4.类的总结：
1.类中的构造器不是必须写的，要对实例进行初始化的操作时，比如添加属性的时候
2.如果A类继承了B类 ，且A类写了构造器，那么A类构造器中的super是必须要调用的
3.类中的定义的方法，放在了类的原型对象上，供实例使用
创建类式组件（常用的）
//创建组件
class MyComponent extends React.Component(){
render(){
//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
console.log('render中的this:',this);
return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/```