react-组件与模块-学习笔记

1模块

    1 理解：向外提供特定功能的js程序, 一般就是一个js文件
    2 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
    3 作用：复用js, 简化js的编写, 提高js运行效率

2组件

    1 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
    2 为什么要用组件： 一个界面的功能更复杂
    3 作用：复用编码, 简化项目编码, 提高运行效率 

3模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

4组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

5函数式组件：

<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>

babel翻译完后开启严格模式，禁止自定义函数指向window

中文换了编码形式

6类基础-复习

案例1

{}表示实例对象 前面person是类名，这里输出的是实例对象

案例2

要接住传过来的参数，类中要有构造函数

没有speak方法
//speak方法放在了哪里？——类的原型对象上，供实例使用
speak是实例使用
//通过Person实例调用speak时，speak中的this就是Person实例

call就会改变this的指向，所以输出都是undefined

案例3

3.1普通继承可以去掉构造器

直接student继承person的类

3.2继承新属性

子类中的新属性，不在父类加构造器，要在子类加构造器

子类有构造器你这里要调用super，要是不写构造器可以不写

super要放在所有人之前

3.3调用父类方法

调用speak方法会找到上一级被继承的类

方法发生改变
重写从父类继承过来的方法

蓝色在student原型对象上，红色在person上

子类有自己的方法

3.4总结

1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。

7类式组件：

render放在哪里-MyComponent类的原型对象上，供实例使用


输出的是实例对象