前端猛男的博客基础知识 - 生命周期
类组件的生命周期
每个组件都是有生命的 从创建到销毁这一系列的过程 叫做 '生命周期';
- componentWillMount:
即将弃用
Dom树初始化创建前 这时候获取不到Dom节点 但是可以最后修改 state状态
- componentDidMount:
主用
Dom树初始化创建完毕 这时候可以获取到Dom节点 可以做一些请求 依赖dom节点 等等
- render:
属于Dom执行中 正在对Dom树进行操作
import React, { Component } from "react";
import ReacDom from 'react-dom';
class App extends Component {
state = {
name: "前端",
};
// 初始化创建前
componentWillMount() {
console.log(
"WillMount",
this.state,
"初始化前",
document.getElementById("Myid")
);
// 在执行render函数之前 还可以最后修改数据
this.setState({ name: "前端猛男" });
}
// 初始化创建后
componentDidMount() {
console.log(
"DidMount",
this.state,
"初始化后",
document.getElementById("Myid")
);
}
render() {
console.log("执行Dom处理中");
return (
<div>
<div id="Myid">{this.state.name}</div>
</div>
);
}
}
ReactDom.render(<App/>,document.getElementById('root'))UNSAFE_
UNSAFE_ 可以去除控制台黄色警告 官方不建议 用这个周期 应为优先级比较低 在执行的时候 会被其它高优先级的替代掉
//在componentWillMount加上UNSAFE_
UNSAFE_componentWillMount() { }执行顺序
componentWillMount → render → componentDidMount