import React from "react";import 'bootstrap/dist/css/bootstrap.min.css';const infoMap = { constructorInfo: '构造函数时输出的结果', mountInfo: '组件挂载时输出的结果', unMountInfo: '组件卸载时输出的结果', tickInfo: '执行tick()方法时输出的结果', titleInfo: '执行步骤', dialogInfo: '弹出对话框，显示', tickInfo2: '调用tick()方法', colon: '：', fullStop: '。'}class Counter extends React.Component{ constructor(props){ super(props); this.state = { startNumber: props.startNumber, step: props.step, multi: 2, resultNumber: 0 }; this.state.resultNumber = this.state.step; alert(infoMap.constructorInfo+this.state.resultNumber); } componentDidMount(){ this.state.resultNumber += this.state.startNumber*this.state.step*this.state.multi; alert(infoMap.mountInfo+this.state.resultNumber); } componentWillUnmount(){ this.state.resultNumber -= this.state.startNumber*this.state.step; alert(infoMap.unMountInfo+this.state.resultNumber); } tick(){ this.state.resultNumber = 20; alert(infoMap.tickInfo+this.state.resultNumber); } render(){ return ( <div> <h2>{infoMap.titleInfo}</h2> <h3Name="my-3">{infoMap.dialogInfo}{infoMap.constructorInfo}{infoMap.colon}{this.state.resultNumber}</h3> <h3Name="my-3">{infoMap.tickInfo2} {this.tick()} {infoMap.fullStop}</h3> <h3Name="my-3">{infoMap.dialogInfo}{infoMap.tickInfo}{infoMap.colon}{this.state.startNumber*2}</h3> <h3Name="my-3">{infoMap.dialogInfo}{infoMap.tickInfo}{infoMap.colon}{this.state.startNumber*2}</h3> <h3Name="my-3">{infoMap.dialogInfo}{infoMap.mountInfo}{infoMap.colon}{this.state.startNumber*6}</h3> <h3Name="my-3">{infoMap.tickInfo2} {this.tick()} {infoMap.fullStop}</h3> </div> ); }}const ComponentLifeCycle = () => { return( <Counter startNumber={10} step={2} ></Counter> );}export default ComponentLifeCycle;

显示效果：