react生命周期函数-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43449246/article/details/129045218

此博客围绕前端开发展开，涉及React.js和JavaScript相关内容，虽未给出具体内容，但可知聚焦于这两项前端技术。

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

//constructor是react中的构造函数，一般如果没有数据初始化就不用单独调用，在其他语句之间必须写，super（props），props可以理解为形式参数。

//props在react官方文档中的定义：“当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。”

//在react中，构造函数仅处理以下两种情况

//this.state()初始化
//为事件处理函数进行实时绑定，一般也不怎么用，将函数定义写为箭头函数，一般不存在this指向绑定的问题


// 挂在前自动执行
	componentWillMount() {
		console.log('componentWillMount');
	}
	
	// 渲染时自动执行
	// 组件更新前 componentWillUpdate 自动执行
	render() {
		console.log('render')
		return (
			<div>
				<div>hello world</div>
			</div>
		)
	}

	// 挂在后自动执行，网络请求最好在这里
	componentDidMount() {
		console.log('componentDidMount');
	}

	// 组件更新前 前自动执行
	shouldComponentUpdate() {
		console.log('shouldComponentUpdate');
		return true;
	}

	// 组件更新前 shouldComponentUpdate之后 自动执行
	componentWillUpdate() {
		console.log('componentWillUpdate');
	}

	// 组件更新前 render 自动执行
	componentDidUpdate() {
		console.log('componentDidUpdate');
	}

	// 组件从页面中移除前自动执行
	componentWillUnmount() {
		console.log('componentWillUnmount');
	}