0
点赞
收藏
分享

微信扫一扫

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('
.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; //组件定以后记得导出

 

举报

相关推荐

0 条评论