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

妖狐艹你老母 2024-04-19 12:00 48阅读 0赞

### **脚手架里的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;   //组件定以后记得导出