React学习第八天——继续巩固React基础(以及回顾遍历的问题)

React基础

1.事件传参

使用箭头函数进行参数的传递

<button onClick={(e)=>{this.test('Gelx')}></button>
test=(e)=>{
    console.log(e)
}

2.生命周期

生命周期三个状态:

1.Mounting:将组件插入DOM

2.Updating:将数据更新到DOM

3.Unmounting:将组件从DOM中移除

钩子函数

componentWillMount:组件将要渲染 //可以做ajax,添加动画前的类

componentDidMount:组件渲染完毕 //添加动画

componentWillReceiveProps:组件将要接受props数据 //可以查看接受的props数据是什么

shouldComponentUpdate:组件接收到新的state或者props判断是否要更新,这里返回的是布尔值

componentWillUpdate:组件将要更新

componentWillUnmount:组件将要卸载

重新回顾遍历的问题

1.forEach循环

let arr = [1,2,3,4]
//forEach常有三个变量index,item,arr,最后一个不是很常用
arr.forEach((index,item,arr)=>{
    console.log(index)
})

forEach在于直接循环,跟for循环一致,并且没有返回值

2.map循环

let arr = ['one','two','three','four']
//map常有三个变量index,item,arr,最后一个不是很常用
let result=arr.map((index,item,arr)=>{
    //加工一个新的输出条件
    let Str = index+item
    return Str
    console.log(index)
})

map在于除了可以循环数据外,还有返回值,并且可以对数据进行加工

3.for…in…循环

let obj = {
    name:'Gelx',
    age:18,
    msg:"吴亦凡"
}
//循环的是key值
for(key in obj){
    console.log("key:"+key+";value:"+obj[key])
}

主要用于遍历对象,不适用于遍历数组,原因是因为key是随机的

4.for…of…循环(es6)

可以用于遍历数组、类数组的对象,字符串,set/map,构造器

let arr = ['one','two','three','four']
//循环的是每一项,没有索引值
for(let item of arr){
    console.log(item)
}

5.filter过滤

let arr = [1,2,3,4,5,6,7,8]
//filter将需要的内容筛出,过滤不需要的内容,最后返回出新的数组
let result=arr.filter((index,item)=>{
    //根据条件返回ture(也就是想留下的数据
    if(item%2==0){
        return true
    }else{
        return false
    }
})
console.log(result)//2,4,6,8

6.reduce整合

let arr = [1,2,3,4,5,6,7,8]
//reduce对整个数组进行整合后返回一个内容
let result=arr.reduce((pre,next,index)=>{
    //根据条件返回ture(也就是想留下的数据
    consele.log(pre)
    consele.log(next)
    consele.log(index)
    return pre+next
},0)
console.log(result)//45
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值