import React from "react" ; import { Button } from "zent" ; interface IProps { text : string ; count : number ; } export default class LifeCycle extends React . Component < IProps , any > { constructor ( props ) { super ( props ) ; console . log ( "进入constructor" ) ; this . state = { text : "子组件的文本" } ; } static getDerivedStateFromProps ( props , state ) { console . log ( props , state , "getDerivedStateFromProps方法执行" ) ; return { fatherText : props . text , } ; } componentDidMount ( ) { console . log ( "componentDidMount方法执行" ) ; } shouldComponentUpdate ( prevProps , nextState ) { console . log ( prevProps , nextState , "shouldComponentUpdate方法执行" ) ; return true ; } getSnapshotBeforeUpdate ( prevProps , prevState ) { console . log ( "getSnapshotBeforeUpdate方法执行" ) ; return "componentDidUpdated的第三个参数" ; } componentDidUpdate ( preProps , preState , valueFromSnapshot ) { console . log ( "componentDidUpdate方法执行" ) ; console . log ( "从 getSnapshotBeforeUpdate 获取到的值是" , valueFromSnapshot ) ; } componentWillUnmount ( ) { console . log ( "子组件的componentWillUnmount方法执行" ) ; } changeText = ( ) => { this . setState ( { text : "修改后的子组件文本" , } ) ; } ; render ( ) { console . log ( "render方法执行" ) ; return ( < div className = "container" > < Button onClick = { this . changeText } className = "changeText" > 修改子组件文本内容 < /Button> < p > { this . props . count } < /p> < p className = "textContent" > { this . state . text } < /p> < p className = "fatherContent" > { this . props . text } < /p> < /div>); } }