react初始化阶段生命周期

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 =[]