import React from ‘react’
//react的生命周期不是同步的,其他主线程完成后进行生命周期
console.log(1)
export default class LayOut extends React.Component{
constructor(props){
/*
1.任务
-通过super来将绑定在组件身上的props赋值与this.props = props
-定义组件状态this.state={} ,不在这里定义的话,外面就不要写this
-普通函数定义是可以绑定this,这样调用普通函数的时候,可以直接写this.函数名
*/
console.log(‘LayOut-constructor’);
super(props);
this.state = {
name:‘iron’
};
this.fn = this.fn.bind(this)
}
fn(){
//在上面绑定this指向后,这里的this,指向该组件而不是undefined
console.log(‘普通函数’,this)
}
componentWillMount(){
/*
1.表示组件即将挂载,用于初始化事件和生命周期
2.react内部完成任务,不干预
3.下一版本弃用
4.数据可以拿到 数据请求 修改数据
5.真实dom无法拿到,虚拟dom也无法拿到
*/
const {name} = this.state
console.log(name)//获取数据
this.setState({//修改数据
name:'superman',
arr//这里是简写,arr=arr,后面的arr在最后写了,由于生命周期不是主线程的任务,那么写在最后的任务会到该生命周期前面
})
console.log(name)//这里输出的还是原来的,但是渲染的已经是修改后的
console.log("LayOut-componentWillMount");
// console.log(document.querySelector('p'));//输出null,说明虚拟和真实的dom都无法拿到
}
render(){
/*
任务
1.底层 React.createElement
2.解析 this.props和this.state
3.将jsx元素渲染为vdom对象模型,生成了虚拟dom
注意:
在这各钩子函数中不可以使用setState
1.因为js是单线程的,当前已经有任务了,去jsx元素渲染为虚拟dom
2.如果在render函数解析state和props的同时,还去改变数据,会造成栈溢出
*/
console.log('LayOut-render');
const {arr} = this.state
if(arr.length === 0) return <div>加载ing...</div>
return (
<div>
<ul>
{arr.map((item,index) => <li key={index}>
<h3> {item.name} </h3>
</li>)}
</ul>
<p style={{height:'100px',width:'100px'}}></p>
</div>
)
}
componentDidMount(){
/*
1.表示组件挂载结束
2.任务
-数据可以拿到 数据请求 数据修改
-真实dom可以拿到 真实dom操作/第三方库实例化
*/
//操作真实dom
// document.querySelector('p').style.background = 'red'
//数据请求
fetch('http://59.110.226.77:3000/api/category')
.then(res =>res.json())//这一行是进行数据格式化
.then(data =>{ //修改state数据
this.setState({
arr:data.data.data
})
}).catch(error =>Promise.reject(error))
console.log('LayOut-componentDidMount')
}
}
const arr =[]