前端教程:React基本用法

开课吧开课吧锤锤2021-07-15 16:46

React高阶组件(HOC)对于许多react开发人员来说并不陌生,它是灵活使用react组件的一种技巧,而高级组件本身不是组件,它是一个组件,返回值也是一个组件的函数。高阶动作用来加强组件、复用逻辑、提高渲染性能等。高级元件也不难理解,其实之后接触后还是挺简单的。  

前端教程: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教程频道。

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