React 组件生命周期
在本章节中我们将讨论 React 组件的生命周期。
组件的生命周期可分成三个状态：
- Mounting(挂载)：已插入真实 DOM
- Updating(更新)：正在被重新渲染
- Unmounting(卸载)：已移出真实 DOM
挂载
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。
这些方法的详细说明，可以参考官方文档。
更新
每当组件的 state 或 props 发生变化时，组件就会更新。
当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。
这些方法的详细说明，可以参考官方文档。
卸载
当组件从 DOM 中移除时会调用如下方法：
这些方法的详细说明，可以参考官方文档。
实例
以下是一个当前时间的实例，每秒更新：
实例
class Clock extends React . Component { constructor ( props ) { super ( props ) ; this . state = { date : new Date ( ) } ; } componentDidMount ( ) { this . timerID = setInterval ( ( ) => this . tick ( ) , 1000 ) ; } componentWillUnmount ( ) { clearInterval ( this . timerID ) ; } tick ( ) { this . setState ( { date : new Date ( ) } ) ; } render ( ) { return ( < div > < h1 > Hello , thltools !</ h1 > < h2 >现在时间是： { this . state . date . toLocaleTimeString ( ) } .</ h2 > </ div > ) ; } } const root = ReactDOM . createRoot ( document . body ) ; root . render ( < Clock /> ) ;
以下实例在 Hello 组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒重新设置组件的透明度，并重新渲染：
React 实例
class Hello extends React . Component { constructor ( props ) { super ( props ) ; this . state = { opacity : 1.0 } ; } componentDidMount ( ) { this . timer = setInterval ( function ( ) { var opacity = this . state . opacity ; opacity -= .05 ; if ( opacity < 0.1 ) { opacity = 1.0 ; } this . setState ( { opacity : opacity } ) ; } . bind ( this ) , 100 ) ; } render ( ) { return ( < div style = { { opacity : this . state . opacity } } > Hello { this . props . name } </ div > ) ; } } const root = ReactDOM . createRoot ( document . getElementById ( " root " ) ) ; root . render ( < Hello name = " world " /> ) ;
以下实例初始化 state ， setNewnumber 用于更新 state。所有生命周期在 Content 组件中。
React 实例
class Button extends React . Component { constructor ( props ) { super ( props ) ; this . state = { data : 0 } ; this . setNewNumber = this . setNewNumber . bind ( this ) ; } setNewNumber ( ) { this . setState ( { data : this . state . data + 1 } ) ; } render ( ) { return ( < div > < button onClick = { this . setNewNumber } > INCREMENT </ button > < Content myNumber = { this . state . data } /> </ div > ) ; } } class Content extends React . Component { componentDidMount ( ) { console . log ( " Component DID MOUNT! " ) ; } shouldComponentUpdate ( newProps , newState ) { return true ; } componentDidUpdate ( prevProps , prevState ) { console . log ( " Component DID UPDATE! " ) ; } componentWillUnmount ( ) { console . log ( " Component WILL UNMOUNT! " ) ; } render ( ) { return ( < div > < h3 > { this . props . myNumber } </ h3 > </ div > ) ; } } const root = ReactDOM . createRoot ( document . getElementById ( " root " ) ) ; root . render ( < div > < Button /> </ div > ) ;