React组件初体验|青训营笔记

这是我参与「第四届青训营」笔记创作活动的第3天

React组件

React组件的两种创建方式

1.函数组件

使用JS的函数或箭头函数创建的组件
约定一：函数名必须大写字母开头以区分组件和普通react元素
约定二：函数组件必须有返回值， 表示该组件的结构
若返回值为null则表示不渲染任何内容

用函数名作为标签名渲染到页面

function Hello() {
  return (
    <div>第一个函数组件</div>
  )
}
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(<Hello/>)
复制代码

2.使用类创建组件

类组件：使用ES6的class创建的组件
约定一：类名必须大写字母开头
约定二：类名称应继承React.Component父类，从而可以使用父类中提供的方法和属性
约定三：类组件必须提供render()方法

render()方法必须有返回值表示组件的结构

class Hello extends React.Component{
   render() {
     return (
       <div>这是一个类组件</div>
     )
   }
 }
复制代码

3.抽离为独立的JS文件

创建Hello.js文件
在此文件中导入React
创建组件(函数或类)
在Hello.js中导出Hello组件：export default Hello
在index.js中导入Hello组件
渲染组件

es6创建类知识

1.创建类

语法：

class name{
    //class body
}
复制代码

创建实例
```
var xx=new name()
复制代码
```
类必须使用new实例化对象

类constructor构造函数：类的构造函数用于传递参数，返回实例对象通过new创建实例对象时自动调用此函数

class Star{
    constructor(uname，age){
        this.uname=uname //this指向创建的实例对象
        this.age=age
    }
}
//利用类创建对像
var ldh=new Star('刘德华',20)
console.log('ldh.name')//输出刘德华
复制代码

类中添加方法

class Star{
    constructor(uname，age){
        this.uname=uname //this指向创建的实例对象
        this.age=age
    }
    //添加方法
    sing(){
        console.log('我唱歌')
    }
}
复制代码

注：类中的函数不需要些function

多个函数不需要逗号分隔

类的继承

语法：子类继承父类的属性和方法

class Father{
    constructor(){
        
    }
    money(){
        console.log('100')
    }
}
class Son extends Father{
    
}
//即使子类没有定义方法 可直接继承父类的方法所以以子类创建的实例可以调用父类的方法
var son=new.Son()
son.money()//100
复制代码

super关键字调用父类的构造函数

用于调用父类的构造函数

class Father{
    constructor(x,y){
        this.x=x
        this.y=y
    }
    sum(){
        console.log(this.x+this.y)//this指向父类构造函数
    }
}
class Son extends Father{
     constructor(x,y){
        this.x=x
        this.y=y//this指向子类的构造函数
    }
}
var son =new Son(1,2)
son.sum()//报错：此参数传给子类的x，y父类无法获得

//解决方案
class Son extends Father{
     constructor(x,y){
       super(x,y) //调用父类中的构造函数 同时将x，y传递给父类的构造函数
    }
}
复制代码

用于调用父类的普通函数

继承中，若实例化子类输出一个方法，先看子类有没有这个方法子类有：先执行子类的方法若没有执行父类的方法(就近原则)

class Father{
    say(){
        return '我是爸爸'
    }
}
class Son extends Father{
    say(){
        console.log(super.say()+'的儿子')
    }
}
var son =new Son()
son.say()//我是爸爸的儿子
复制代码

子类继承父类的方法同时扩展自己的方法

注：子类构造super必须将其写在this的前面

class Father{
    constructor(x,y){
        this.
        x=x
        this.y=y
    }
    sum(){
        console.log(this.x+this.y)//this指向父类构造函数
    }
}
class Son extends Father{
     constructor(x,y){
      super(x,y)  //子类可以调用父类的sum方法
        this.x=x
        this.y=y//this指向子类的构造函数
       
    }
    subtract(){
        console.log(this.x-this.y)
    }
}
复制代码

注意：1.ES6无变量提升，所以必须先定义类才能实例化对象

2.类里共有的属性和方法一定要加this使用

3.类里的指向问题：constructor里的this指向实例对象，方法里的this指向这个方法的调用者