面试官常问React的生命周期问题.docxVIP

第

面试官常问React的生命周期问题

classLifeextendsReact.Component{

//构造器

constructor(props){

console.log(Life构造器---constructor);

super(props)

this.state={num:0}

//计算+1功能

add=()={

const{num}=this.state

this.setState({num:num+1})

//删除组件

death=()={

ReactDOM.unmountComponentAtNode(document.getElementById(text))

force=()={

this.forceUpdate()

//将要挂载

componentWillMount(){

console.log(Life将要挂载---componentWillMount);

//已经挂载

componentDidMount(){

console.log(Life已经挂载---componentDidMount);

//删除触发

componentWillUnmount(){

console.log(Life删除触发---componentWillUnmount);

//是否应该改变数据

shouldComponentUpdate(){

console.log(Life是否改变数据---shouldComponentUpdate);

returntrue

//将要改变数据

componentWillUpdate(){

console.log(Life将要改变数据---componentWillUpdate);

//改变数据

componentDidUpdate(){

console.log(Life改变数据---componentDidUpdate);

render(){

console.log(Life---render);

const{num}=this.state

return(

div

h1计数器：{num}/h1

buttonthis.add}点我+1/button

buttonthis.death}删除/button

buttonthis.force}不更改任何状态的数据，强制更新/button

/div

//渲染页面

ReactDOM.render(Life/,document.getElementById(text))

挂载步骤

更新步骤

删除

总结：初始化阶段:由ReactDOM.render()触发—初次渲染

1.constructor()---构造器

2.componentWillMount()---将要挂载

3.render()---render

4.componentDidMount()---挂载时更新阶段:由组件内部this.setSate()或父组件重新render触发

1.shouldComponentUpdate()---是否要进行更改数据

2.componentWillUpdate()---将要更新数据

3.render()

4.componentDidUpdate()---更新数据卸载组件:由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount()---卸载

React的生命周期（新）

生命周期的三个阶段（新）

初始化阶段:由ReactDOM.render()触发—初次渲染

1.constructor()

2.getDerivedStateFromProps

3.render()

4.componentDidMount()更新阶段:由组件内部this.setSate()或父组件重新render触发

1.getDerivedStateFromProps

2.shouldComponentUpdate()

3.render()

4.