一文讲解React基本用法

开课吧开课吧锤锤2021-07-09 14:58

    对于React的语法,可以参考React入门的实例教程,基本可以理解一些基本的语法点,不过这篇文章面对的是React基本用法,具体语法有一点不同。以下情况,基本语法保持一致,但面临着ReactNative。写作业时,如想方便,也可在在线模拟器上练习。

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

    以上就是开课吧广场小编为大家整理发布的“一文讲解React基本用法”一文,更多Web教程相关内容尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营