React 基本用法

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