概念
- 模块：一个大的js文件，拆分成多个小的js文件，每个小文件完成一个功能。
作用：简化js编写、复用js，提高js的运行效率
应用的js以模块化的方式来编写，即模块化 - 组件：完成局部功能的代码和资源的集合（html/css/js/images…）
作用：复用组件、提高开发效率
一个应用以多个组件来实现，就是组件化
组件化编程
安装react开发者工具
点击右上角—更多工具----扩展程序-----点击左上角：
以上为在线安装。
离线安装需下载React Developer Tools，然后打开开发者模式，离线安装。
极简插件下载
安装完成后，固定到浏览器顶端：点击右上角扩展图标，找到React Developer Tools，固定
此时图标没有颜色，只需打开一个正常编译发布的react网站即可，如美团
按住shift+点击刷新----->强制刷新(忽略缓存)
只需在项目的根目录下，放入一个favicon.icon图标
在线制作icon
参考博客
函数式 组件
使用函数方式定义组件，适用简单组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first component</title>
</head>
<body>
<!-- import kernel lib -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- create container -->
<ul id="list"></ul>
<script type="text/babel">
// 创建函数式组件
//首字母大写
function MyComponent(){
return <div>这是我的第一个函数式 组件，适用简单的组件定义</div>
}
// 渲染组件，大写首字母的闭合标签
ReactDOM.render(<MyComponent/>,document.getElementById("list"))
//React 解析组件标签，找到Mycomponent组件
//调用函数，将返回的虚拟DOM，转为真实DOM，呈现页面
</script>
</body>
</html>
React Deve tools无法进入这个页面：
this的指向：
//定义一个普通的函数
//this is window
function func(){
console.log(this)//window
}
组件里指向undefined,babel转换开启严格模式，禁止this指向window
类 组件
使用类方式定义组件
类知识的回顾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复习类的知识</title>
</head>
<body>
<script type="text/javascript">
// 定义一个Person类
class Person{
// 构造器、构造函数，非必须，需要传入参数时，创建
constructor(name,age){
// this is current instance
this.name = name;
this.age = age
}
// 定义方法，注意没有function关键字
speak(){//speak方法在哪？--》Prototype原型对象中，给实例对象使用
// 反撇号
//实例对象调用speak，this指向为current instance
//Aobj.speak.call(Bobj),this 指向为Bobj
console.log(`my name is ${this.name}, i am ${this.age} years old`)
}
}
//定义一个Student类，继承Person类
class Student extends Person{
//构造器方法
constructor(name,age,sex){
//super继承父类的代码，必须写在第一位
super(name,age)
//写自己的代码
this.sex = sex
}
//重写继承的父类的方法,直接继承时，在原型链中查找，自己重写则出现在原型对象中Prototype/__proto__
speak(){
console.log(`my name is ${this.name},i'am ${this.age} years old, ${this.sex}`)
console.log("I am from China")
}
//定义的方法在原型对象中，供实例调用
eat(){
console.log(`${this.name}正在吃饭`)
}
}
// instantiate
const p1 = new Person("jack",19)
const p2 = new Person("tom",20)
console.log(p1)
console.log(p2)
p1.speak() //
p2.speak()
const s1 = new Student("小张",23,"Male")
s1.speak()
s1.eat()
</script>
</body>
</html>
实例在调用方法时，先找原型对象，没有再找原型链
类组件的定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类组件</title>
</head>
<body>
<!-- import kernel lib -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- create container -->
<ul id="list"></ul>
<script type="text/babel">
//1.创建 类组件
//首字母大写
class MyClassComponent extends React.Component{
//必须有render方法
render(){//放在类的原型对象上，供实例调用；this即MyClassComponent组件的实例对象
console.log(this)//查看属性props/refs、state
//必须有返回值 VDOM节点
return <div>这是类式组件，用于复杂组件的定义</div>
}
}
//2.渲染类组件，大写首字母的闭合标签
ReactDOM.render(<MyClassComponent/>,document.getElementById("list"))
/*
找到该组件标签，实例化类对象，对象.render，将返回的VDOM转为真实DOM，呈现页面
*/
</script>
</body>
</html>
复杂组件、简单组件
具有状态state的组件，即为复杂组件，否则为简单组件
类组件实例的三大属性：props/refs/state