React，移动设备开发图书

最新推荐文章于 2025-12-20 10:00:18 发布

原创最新推荐文章于 2025-12-20 10:00:18 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#架构 #移动开发 #android

程序员专栏收录该内容

148 篇文章

订阅专栏

本文详细介绍了React组件的生命周期方法，包括初始化阶段、更新阶段及卸载组件时的关键钩子函数，如`shouldComponentUpdate`、`componentWillUpdate`和`componentDidUpdate`等。通过示例展示了如何控制组件更新，并解释了父组件重新渲染时子组件的生命周期流程。

//控制组件更新的“阀门”

shouldComponentUpdate() {

console.log(‘Count—shouldComponentUpdate’);

return true

}

//组件将要更新的钩子

componentWillUpdate() {

console.log(‘Count—componentWillUpdate’);

}

//组件更新完毕的钩子

componentDidUpdate() {

console.log(‘Count—componentDidUpdate’);

}

render() {

console.log(‘Count—render’);

const { count } = this.state

return (

当前求和为：{count}

点我+1

卸载组件

不更改任何状态中的数据，强制更新一下

)

}

//渲染组件

ReactDOM.render(, document.getElementById(‘test’))

// ------------------------------------------------------------------------------------------------

/**

父组件的重新render 子生命周期

**/

//父组件A

class A extends React.Component {

//初始化状态

state = { carName: ‘奔驰’ }

changeCar = () => {

this.setState({ carName: ‘奥拓’ })

}

render() {

return (

我是A组件

换车

)

}

}

//子组件B

class B extends React.Component {

//组件将要接收新的props的钩子,注意初始化的第一次这个钩子不执行

componentWillReceiveProps(props) {

console.log(‘B—componentWillReceiveProps’, props);

}

//控制组件更新的“阀门”

shouldComponentUpdate() {

console.log(‘B—shouldComponentUpdate’);

return true

}

//组件将要更新的钩子

componentWillUpdate() {

console.log(‘B—componentWillUpdate’);

}

//组件更新完毕的钩子

componentDidUpdate() {

console.log(‘B—componentDidUpdate’);

}

render() {

console.log(‘B—render’);

return (

我是B组件，接收到的车是:{this.props.carName}

)

}

}

//渲染组件

ReactDOM.render(, document.getElementById(‘test1’))

二、新生命周期

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

constructor()

getDerivedStateFromProps

render()

componentDidMount() =====> 常用

一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

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

getDerivedStateFromProps

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate

componentDidUpdate()

卸载组件: 由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount() =====> 常用

一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息