React 基本用法
一、语法
元素
用 className 来代替 class
<div className="App"></div>
htmlfor 替换 lable 的 for 属性
<label htmlFor='0'></label>
标签
标签必须成对出现，如果是单标签，则必须自闭和
注释
推荐使用 {/* 这是注释 */} ，也可也用 //这是注释
/*
这是注释
*/
//这是注释
当编译引擎，在编译 JSX 代码的时候，如果遇到了 < 那么会把它当作 HTML 代码去编译，如果遇到了 {} 就把 花括号内部的代码当作普通 JS 代码去编译
二、数组渲染
forEach遍历数组
const arrStr = ['张三','李四','王二']
arrStr.forEach(item => {
const temp = <h5>{item}</h5>
nameArr.push(temp)
})
数组map方法
const result = arrStr.map(item => {
return <h5>{item}</h5>
})
//直接写到页面上
{arrStr.map(item =>{
return <h1>{item}</h1>
})}
//一行可以简写，
//注意：在React 中，需要把 key 添加给 被 forEach 或 map 或 for 循环直接控制的元素
{arrStr.map(item => <h1 key={item}>{item}</h1>)}
三、组件
创建组件
第一种创建组件的方式，组件首字母大写
function Hello(){
//如果在一个组件中 return 一个 null ，则表示此组件是空的，什么都不会渲染
//return null
//在组件中，必须 返回一个 合法的 JSX 虚拟 DOM 元素
return <div>这是 hello 组件</div>
}
<Hello/> //调用组件
组件传值
const student = { name:'小明', age:12, sex:"男" }
//使用组件，并传统 props 数据
<Hello name={student.name} age={student.age} sex={student.sex} />
//推荐使用 ES6 的展开运算符
<Hello {...student} />
function Hello(props){
console.log(props)
return <div>这是 hello 组件 {props.name} </div>
}
注意：不论是 Vue 还是 React,组件中的 props 永远都是只读的，不能被重新赋值
四、class 和 实例属性
构造函数
function Person(name, age) {
this.name = name
this.age = age
}
//通过 new 出来的实列，访问到的属性，叫做 【实例属性】
const p1 = new Person('小明', 18)
//通过构造函数，直接访问的属性，叫做 【静态属性】
Person.sex = '男'
console.log(Person.sex, 99999)
//实例方法
Person.prototype.say = function () {
console.log('这是 Person 的实例方法')
}
p1.say()//这是实例方法
//静态方法
Person.show = function () {
console.log('这是 Person 的静态 show 方法')
}
Person.show()
构造类
//注意：在 class 的 {} 区间内，只能写构造器、静态方法和静态属性、实例方法
//注意：class 关键字内部，还是用原来的配方实现的
class Animal {
//每个类都有一个构造器，默认为空的，类似于 constructor(){}
//构造器的作用，就是每当 new 这个类的时候，必然会优先执行，构造器中的代码
constructor(name, age) {
//实例属性
this.name = name
this.age = age
}
//在 class 内部，通过 static 修饰的属性，就叫静态属性
static sex = "男"
//这是动物的实例方法
talk() {
console.log('动物的实例方法')
}
//这是动物的静态方法
static show() {
console.log('这是动物的静态方法')
}
}
const p2 = new Animal('小明', 19)
p2.talk()
Animal.show()
console.log(p2, 1111)
五、继承
父类
//这是父类，可以理解成 原型对象 prototype
class Person{
constructor(name,age){
this.name = name
this.age = age
}
//实例方法，子类都可以访问的公共函数
show(){
console.log('hello word')
}
}
子类
在 class 类中，可以使用 extends 关键字，实现子类继承父类 语法 class 子类 extends 父类 {}
class Chinese extends Person{
constructor(name,age,IDNumber){
super(name,age)
//默认情况下会自动调用父类构造器，我们也可也手动调用
//super()是一个函数，他是父类的 构造器，子类中的 super，其实就是父类中，constructor 构造器的一个引用
this.IDNumber = IDNumber
//语法规范，在子类中，this 只能放到 super 之后使用
}
}
const p1 = new Chinese('小明',20,'341323200……')
console.log(p1)
p1.show()
