1. Mounting 初始化阶段（挂载阶段）执行的函数：
①构造函数（里面存放this.state组件数据）
constructor (props){ //props是父组件传过来的参数
super(props);
this.state = {}
}
②组件即将被挂载
componentWillMount(){}
③更新渲染
render(){}
④组件已经渲染完成了
componentDidMount{}
2. Updating （组件运行阶段）执行的函数：
nextProps // 获取父组件更新的时候带来的数据
nextState //获取组件本身的数据
①父组件传递的Props发生变化 会触发生组件的这个函数
componentWillReceiveProps(nextProps) {}
②组件是否需要更新数据 若shouldComponentUpdate函数return false， 则下面的函数不会执行
shouldComponentUpdate(nextProps, nextState) {}
③组件即将更新的过程
componentWillUpdate(nextProps, nextState){}
④组件渲染组件页面
render(){}
⑤组件已经更新完成
componentDidUpdate(){}
3. Mounting （组件销毁阶段）执行的函数：
componentWillUnmount(){}
接下来我们通过实例证明一下：
首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件
npm init -y
npm i babel-standalone -D
npm i react react-dom -D
安装配置文件教程链接：https://blog.csdn.net/qq_41614928/article/details/93771657
安装完成后我们开始编写下面代码
（1） 组件Mounting 初始化阶段（挂载阶段）代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>生命周期</title>
</head>
<body>
<!-- 所有的页面代码都是放在这里面 -->
<div id="app"></div>
<!-- 用于解析jsx的代码 babel引用应在前面 -->
<script src="./node_modules/babel-standalone/babel.js"></script>
<!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
<script src='./node_modules/react-dom/umd/react-dom.development.js'></script>
<!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
<script type='text/babel'>
class App extends React.Component{
constructor(props){
super(props);
this.state = {
a:this.props.title,
b:props.title
}
console.log( '01-构造函数' )
}
componentWillMount(){
console.log( '02-组件即将被挂载' )
this.setState({
c:'请求到的数据'
})
console.log( '02-组件即将被挂载 this.state.c='+ this.state.c ) //undefined
console.log( '02-组件即将被挂载 this.refs=空'+ this.refs ) //{}
setTimeout(() => {
console.log( '02-组件即将被挂载内的异步函数 this.state.c='+this.state.c )
}, 2000);
}
//点击按钮
handleClick=()=>{
this.setState({
b:'已经触发点击事件，B的值发生变化'
})
}
//组件页面渲染
render(){
console.log( '03-组件在页面上被渲染' )
return (
<div>
<h2 ref={'h2'}> 我是子组件里面的值 </h2>
{ this.state.a}
<br/>
{ this.state.b}
<br/>
{ this.state.c}
<button ref={'btn'} onClick={this.handleClick} > 点击按钮 </button>
</div>
)
}
//如果在即将渲染数据前请求数据，有时候会出现白屏，页面当中文字也加载出现问题;
//最佳请求数据是在componentDidMount去请求;
componentDidMount(){
console.log( '04-已经渲染完成了' )
console.log( '04-已经渲染完成了 this.refs=' + this.refs ) //{h2: h2, btn: button}
}
}
ReactDOM.render(
<App title={'这个是父组件里面值'}></App>,
document.getElementById('app')
)
</script>
</body>
</html>
运行结果如下：
当点击 点击事件 3下后：
（2）组件 Updating （组件运行阶段）与 Mounting （组件销毁阶段） 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>生命周期</title>
<style>
.list{ border: 1px solid #ccc}
</style>
</head>
<body>
<!-- 所有的页面代码都是放在这里面 -->
<div id="app"></div>
<!-- 用于解析jsx的代码 babel引用应在前面 -->
<script src="./node_modules/babel-standalone/babel.js"></script>
<!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
<script src='./node_modules/react-dom/umd/react-dom.development.js'></script>
<!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
<script type='text/babel'>
//子组件list
class List extends React.Component{
constructor(props){
super(props);
this.state = {
list:'这里是list传入的值',
candy:this.props.title
}
console.log( '01-构造函数constructor' )
}
componentWillReceiveProps(nextProps) {
console.log( '02-父组件传递的Props发生变化 会触发生组件的这个函数componentWillReceiveProps' )
console.log( nextProps )
}
shouldComponentUpdate(nextProps, nextState) {
console.log( '03-组件是否需要更新数据shouldComponentUpdate' )
console.log( nextProps, nextState )
//返回 false 组件不更新 / 返回 true 则更新执行下面04 05 06
return true
}
componentWillUpdate(nextProps, nextState){
console.log( '04-组件即将更新的过程componentWillUpdate' )
console.log( nextProps, nextState )
}
render(){
console.log( '05-组件渲染过程render' )
return (
<div>
<div className="list">
<h3> 这个是List组件样式 </h3>
<br />
<b> {this.state.list} </b>
<br/>
<i>{this.state.candy}</i>
<br/>
<em>{this.state.p}</em>
</div>
</div>
)
}
componentDidUpdate(nextProps, nextState){
console.log( '06-组件已经更新完成componentDidUpdate' )
console.log( nextProps, nextState )
}
//组件销毁时触发的函数
componentWillUnmount(){
console.log( '07-组件已经销毁了！componentWillUnmount' )
// window.localStorage.setItem() 里面可以保存数据
}
}
//父组件App
class App extends React.Component{
constructor(props){
super(props);
this.state = {
p:'这个是父组件当中的状态里的p值',
onOff:true
}
}
//点击按钮
handleClick =()=> {
this.setState({
p:'点击的时候改变app里面的值;'
})
}
//创建/销毁 组件按钮
destroy=()=>{
let onOff = !this.state.onOff;
this.setState({
onOff:onOff
})
}
render(){
return (
<div>
<h2> 我是子组件里面的值 </h2>
{ //this.state.p是传递给子组件的值 若改变p 子组件会触发componentWillReceiveProps函数
this.state.onOff && (<List title={this.state.p}></List>)
}
<button onClick={ this.handleClick }>点击按钮 </button>
<input type='button' value={this.state.onOff? '销毁组件':'创建组件'} onClick={ this.destroy }/>
</div>
)
}
}
ReactDOM.render(
<App></App>,
document.getElementById('app')
)
</script>
</body>
</html>
运行结果如下：
当我们通过点击事件改变父组件< App>传递给子组件< List>的p值时 运行结果如下：
当我们通过点击事件 销毁< List>组件时：
当我们再次通过点击事件 创建< List>组件时：组件< List>初始化并挂载
