十二、React 生命周期函数

React生命周期函数:

【官方文档】:https://reactjs.org/docs/react-component.html

【定义】组件加载之前,组件加载完成,以及组件更新数据,组件销毁。 触发的一系列的方法 ,这就是组件的生命周期函数

一、组件加载的时候触发的函数:

constructor 、componentWillMount、 render 、componentDidMount

组件加载触发函数实例

【Lifecycle.js】

import React, { Component } from 'react';

class Lifecycle extends Component {
//【01】组件加载时第一个触发的函数
constructor(props){
console.log('01构造函数'); super(props);
this.state={
title:'生命同期示例组件'
}
} //【02】组件将要挂载的时候触发的生命周期函数
componentWillMount(){
console.log('02组件将要挂载');
} //【04】组件挂载完成的时候触发的生命周期函数
componentDidMount(){
//dom操作放在这个里面
//【请求数据也放在这个里面】:(防止页面没渲染完成数据出错)
console.log('04组件将要挂载');
} //【03】组件渲染时触发的生命同期函数
render() {
console.log('03数据渲染render');
return (
<div>
<h1>生命同期函数:加载时触发的函数</h1>
<br/><hr/> </div>
);
}
}
export default Lifecycle;

【Home.js】

import React, { Component } from 'react';
import Lifecycle from './Lifecycle'; class Home extends Component {
constructor(props){
super(props);
this.state={
title:'生命同期函数示例'
}
} render() {
return (
<div>
<Lifecycle />
</div>
);
}
}
export default Home;

【App.js】

import React from 'react';
import './App.css';
import Home from './components/Home.js'; function App() {
return (
<div className="App">
<Home />
<hr/>
</div>
);
}
export default App;

【结果】刷新页面,函数将逐个被加载(警告部分不用管它)

十二、React 生命周期函数

二、组件数据更新的时候触发的生命周期函数:

shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

【Lifecycle.js】

import React, { Component } from 'react';

class Lifecycle extends Component {
constructor(props){
super(props);
this.state={
title:'生命同期示例组件',
msg:'没更新数据之前消息'
}
} //【01】是否要更新数据 返回true才会执行更新数据的操作
shouldComponentUpdate(nextProps, nextState){
console.log('01是否要更新数据');
console.log(nextProps);
console.log(nextState);
return true;
} //【02】将要更新数据的时候触发
componentWillUpdate(){
console.log('02组件将要更新');
}
//【04】组件更新完成
componentDidUpdate(){
console.log('04组件数据更新完成');
} setMsg=()=>{
this.setState({
msg:'我是改变后的msg的数据'
})
} //【03】更新数据第3步,渲染
render() {
console.log('03数据渲染render');
return (
<div>
<h1>生命同期函数:更新数据时触发的函数</h1>
<h2>{this.state.msg}</h2>
<button onClick={this.setMsg}>更新state数据</button>
<br/><hr/>
</div>
);
}
}
export default Lifecycle;

【Home.js】

import React, { Component } from 'react';
import Lifecycle from './Lifecycle'; class Home extends Component {
constructor(props){
super(props);
this.state={
title:'生命同期函数示例'
}
} render() {
return (
<div>
<Lifecycle />
</div>
);
}
}
export default Home;

【App.js】

import React from 'react';
import './App.css';
import Home from './components/Home.js'; function App() {
return (
<div className="App">
<Home />
</div>
);
}
export default App;

【结果】点按键后,按顺序进行数据更新:

十二、React 生命周期函数

【注】console其中第2、3条数据来自[Lifecycle.js]的【console.log(nextProps); console.log(nextState);】

将在下一主题讲到:三、

三、你在父组件里面改变props传值的时候触发的:

componentWillReceiveProps

【Lifecycle.js】

import React, { Component } from 'react';

class Lifecycle extends Component {
constructor(props){
super(props);
this.state={
title:'生命同期示例组件',
msg:'没更新数据之前消息'
}
} // 【00】你在父组件里面改变props传值的时候触发的
componentWillReceiveProps(){
console.log('00父子组件传值,父组件里面改变了props的值触发的方法')
} //【01】是否要更新数据 返回true才会执行更新数据的操作
//【向子组件传值触发的同期函数重点部分】
shouldComponentUpdate(nextProps, nextState){
console.log('01是否要更新数据');
console.log(nextProps);
console.log(nextState);
return true;
} //【02】将要更新数据的时候触发
componentWillUpdate(){
console.log('02组件将要更新');
}
//【04】组件更新完成
componentDidUpdate(){
console.log('04组件数据更新完成');
} render() {
console.log('03数据渲染render');
return (
<div>
{/* 获取父组件传值,随后父组件title将发生改变,触发此页面函数 */}
<h3>{this.props.title}</h3>
<br/><hr/>
</div>
);
}
}
export default Lifecycle;

【Home.js】

import React, { Component } from 'react';
import Lifecycle from './Lifecycle';
import { thisTypeAnnotation } from '@babel/types'; class Home extends Component {
constructor(props){
super(props);
this.state={
title:'父组件标题:生命同期函数示例',
flag:true
}
} changtitle=()=>{
this.setState({
title:'改变后的父组件标题'
})
} render() {
return (
<div>
<h1>生命周期函数:向子组件传值</h1>
{
//后面的title=xxx为向子组件传值
}
<Lifecycle title={this.state.title} />
<button onClick={this.changtitle}>改变state要传给子组件的值</button> </div>
);
}
}
export default Home;

【App.js】

import React from 'react';
import './App.css';
import Home from './components/Home.js'; function App() {
return (
<div className="App">
<Home />
</div>
);
}
export default App;

【结果】:

十二、React 生命周期函数

点改变之后:

十二、React 生命周期函数

四、组件销毁的时候触发的:

componentWillUnmount

【应用场景】:比如编写文件时,放弃保存,就要销毁那个页面的组件;

【Lifecycle.js】

import React, { Component } from 'react';

class Lifecycle extends Component {
constructor(props){
super(props);
this.state={
title:'生命同期示例组件',
msg:'没更新数据之前消息'
}
} //组件销毁的时候触发的生命周期函数 用在组件销毁的时候执行操作
//销毁哪个组件,销毁周期函数就要写在哪个组件里
componentWillUnmount(){
console.log('组件已销毁');
} //自写函数
setMsg=()=>{
this.setState({
msg:'我是改变后的msg的数据'
})
} render() {
console.log('03数据渲染render');
return (
<div>
<h2>{this.state.msg}</h2>
<button onClick={this.setMsg}>更新state数据</button>
<br/><hr/>
</div>
);
}
}
export default Lifecycle;

【Home.js】

import React, { Component } from 'react';
import Lifecycle from './Lifecycle'; class Home extends Component {
constructor(props){
super(props);
this.state={
title:'生命同期函数示例',
flag:true
}
} // 设置flag用于确定是否销毁组件
setFlag=()=>{
this.setState({
flag:!this.state.flag
})
} render() {
return (
<div>
<h1>销毁组件生命周期函数示例</h1> { //【是否销毁子组件重点代码】:如果flag=true加载<Lifecycle />组件,否则加载空;
this.state.flag?<Lifecycle />:""
} <br/>
<button onClick={this.setFlag}>销毁/加载子组件</button> </div>
);
}
}
export default Home;

【App.js】

import React from 'react';
import './App.css';
import Home from './components/Home.js'; function App() {
return (
<div className="App">
<Home />
</div>
);
}
export default App;

【结果】:

十二、React 生命周期函数

【点销毁后】:

十二、React 生命周期函数

五、【总结】必须记住的生命周期函数:

*加载的时候:componentWillMount、 render 、componentDidMount(dom操作要放此处)

更新的时候:componentWillUpdate、render、componentDidUpdate

*销毁的时候: componentWillUnmount

【Lifecycle.js】


【Home.js】


【App.js】


上一篇:stm32串口通讯问题


下一篇:2.React 生命周期函数