React生命周期方法（我常用的）

最新推荐文章于 2025-07-21 22:03:39 发布

原创最新推荐文章于 2025-07-21 22:03:39 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

27 篇文章

订阅专栏

本文主要探讨了React中几个常用的生命周期方法，包括constructor()用于初始化state和创建ref，componentDidMount()在组件渲染到DOM后调用，常用于页面初始化接口调用，render()作为React必备方法用于展示state和props的值，以及componentDidUpdate()在组件更新后被调用，处理props和state的更新。参考React官方文档以获取更详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

constructor()

初始化state
创建ref

import React, { Component } from 'react';

class demo extends Component {
	constructor(props) {
		super(props);
		this.state = {
			dataSource: []
		}
		this.xxRef = React.createRef();
	}
	render() {
		const {
			name
		} = this.state;
		return(<div></div>)
	}
}

export default demo;

componentDidMount()

组件已经被渲染到 DOM 中后运行
一般用于页面初始化的接口调用

import React from 'react';
import * as http from './http'; // 封装好的httpServer

class demo extends Component {
	constructor(props) {
		super(props);
		this.state = {
			dataSource: []
		}
	}
	componentDidMount() {
		this.getTableData();
	}
	getTableData = () => {
		http.getTableDataServer({}).then(res=>{
			this.setState({
				dataSource: res.data
			});
		}
	}
	render() {
		const {
			name
		} = this.state;
		return(<div></div>)
	}
}

export default demo;

render()

React必须有的方法
展示state、props的值等

import React from 'react';

class demo extends Component {
	constructor(props) {
		super(props);
		this.state = {
			name: 'Liz'
		}
	}
	render() {
		const {
			name
		} = this.state;
		return(<div>
			<div>姓名：{name}</div>
		</div>)
	}
}

export default demo;

componentDidUpdate()

更新后会被立即调用
prevProps props更新前后
prevState state更新前后
snapshot

import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
const dateFormat = 'YYYY-MM-DD';

class demo extends Component {
	constructor(props) {
		super(props);
		this.state = {
			defaultDate: moment(util.getStart(), dateFormat).subtract(6, 'days'),
			currentTime: ''
		}
	}
	componentDidUpdate(prevProps, prevState, snapshot) {
		const { currentTime } = this.state;
		if(currentTime && currentTime !== prevState.currentTime) {
			this.getData(); // 根据时间调用数据函数，略
		}
	}
	// 日期选择器，改变日期state。state一变，触发componentDidUpdate()方法，调用this.getData();函数
	dateChange = (dates) => {
		this.setState({
			currentTime: dates.startOf('week').format('YYYY-MM-DD')
		});
	}
	render() {
		const {
			defaultDate
		} = this.state;
		return(<div>
			<div>
				<span>当前周：</span>
				<DatePicker
					picker="week"
					defaultValue={defaultDate}
					allowClear={false}
					onChange={this.dateChange} />
			</div>
		</div>)
	}
}

export default demo;

参考文章
React官方文档：React.Component