react 基础 脚手架组件挂载 / 生命周期

脚手架里的index.js配置组件的挂载

import React from 'react'
import ReactDOM from 'react-dom'

// import Life from './Life'
import Xiaojiejie from './react/Xiaojiejie'
// import Css from './react/Css'
// import TodoList from './ReduxDemo/TodoList'
// import AppRouter from './AppRouter/AppRouter'
// import Router from './RouterDemo/Router'

ReactDOM.render(<Xiaojiejie />,document.getElementById('root')) //挂载

// <App /> jsx语法 react 和xml 创建虚拟dom
// 写好的js组件作为标签显示

要写jsx语法  必须引入react和react-dom

 

react的生命周期钩子函数  life.js

//react生命周期
import React, { Component } from 'react';
import axios from 'axios'

//要使用extends Component必须引入Component

class Life extends Component {
    state = {  }
    render() { 
        console.log("组件挂载中")
        return (
            <div>react生命周期</div>
         );
    }

    //生命周期函数
    componentWillMount(){
        console.log("将要挂载")
    }
    componentDidMount(){
        //已经挂载  发起数据请求
        axios.post('https://web-api.juejin.im/v3/web/wbbr/bgeda')
            .then((res)=>
            {
                console.log(res)
            })
            .catch((error)=>{
                console.log('axios 获取数据失败'+error
                )})
    }
    shouldComponentUpdate(){
        console.log("组件发生改变前执行")
        return true;  //要求返回一个布尔值  false不往下执行
    }
    componentWillUpdate(){
        console.log("组件更新前执行")
    }
    componentDidUpdate(){
        console.log("组件更新后执行")
    }
}
 

export default Life;   //组件定以后记得导出