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