찾다

집 >웹 프론트엔드 >프런트엔드 Q&A >React의 라이프사이클 기능은 무엇입니까?

React의 라이프사이클 기능은 무엇입니까?

藏色散人
藏色散人원래의
2023-01-03 10:15:474540검색

반응의 수명주기 기능은 다음과 같습니다: 1. componentWillMount 함수, 3. shouldComponentUpdate 함수, 5. componentWillUnmount 함수,

React의 라이프사이클 기능은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

React의 수명주기 기능은 무엇인가요?

React의 라이프 사이클 기능(매우 상세함)

더 이상 고민하지 말고 바로 본론으로 들어가겠습니다!

먼저 React의 라이프사이클 기능을 살펴보겠습니다.

  • 컴포넌트가 마운트되려고 할 때 트리거되는 함수: componentWillMount

  • 컴포넌트가 마운트될 때 트리거되는 함수 마운트 완료: componentDidMount

  • 데이터가 업데이트될 때 트리거되는 함수: shouldComponentUpdate

  • 데이터가 업데이트될 때 트리거되는 함수: componentWillUpdate

  • 데이터 업데이트가 완료될 때 트리거되는 함수: componentDidUpdate

  • The 컴포넌트가 파괴될 때 트리거되는 함수: componentWillUnmount

  • props 값이 변경될 때 트리거되는 함수 상위 컴포넌트: componentWillReceiveProps

코드를 자세히 설명하겠습니다

1. 마운팅 부분
공식에 따르면 라이프 사이클 다이어그램에서 컴포넌트의 로딩 및 렌더링이 defaultProps 및 propsTypes(이 두 가지가 무엇인지는 다음 기사에서 별도로 논의할 예정이며 여기서는 중점적으로 다루지 않습니다.)
그런 다음 생성자와 this.state 데이터 에 초기 콘텐츠가 있으므로 첫 번째 단계는 다음과 같습니다. 그러면 comComponentWillMount 구성요소가 마운트되기 시작합니다. 이것이 두 번째 단계입니다. 그런 다음 컴포넌트가 마운트되고, 렌더링 분석 및 렌더링되므로 세 번째 단계가 곧 발생합니다. 즉, 렌더 데이터가 모두 렌더링되고, 마지막으로 comComponentDidMount
컴포넌트 마운트가 완료됩니다.

하위 컴포넌트 코드, 상위 컴포넌트에 렌더링을 도입하기만 하면 됩니다(여기서는 코드에 들어가지 않습니다)

import React ,{Component} from 'react'

class Smzq extends Component{
	constructor(props){
		console.log('01构造函数')		
		super(props)
		this.state={
			
		}
	}
	//组件将要挂载时候触发的生命周期函数
	componentWillMount(){
		console.log('02组件将要挂载')
	}
	//组件挂载完成时候触发的生命周期函数
	componentDidMount(){
		console.log('04组件将要挂载')
	}
	render(){
		console.log('03数据渲染render')
		return(
			<div>
				生命周期函数演示
			</div>
		) 
	}
}
export default Smzq

콘솔을 열어서 확인하세요
React의 라이프사이클 기능은 무엇입니까?

2. 데이터 업데이트 부분
데이터가 업데이트되면 첫 번째 단계는 shouldComponentUpdate로 데이터 업데이트 여부를 확인하는 것입니다. 이 함수가 true를 반환하면 업데이트됩니다. 이 함수는 두 개의 매개변수 nextProps 및 nextState를 선언할 수 있습니다.
nextProps는 상위 구성요소를 하위 구성요소로, nextState는 데이터가 업데이트된 후의 값이며, 이 두 값은 이 함수에서 얻을 수 있습니다. 두 번째 단계에서는 업데이트 데이터를 확인한 후 comComponentWillUpdate가 데이터를 업데이트합니다. 세 번째 단계는 여전히 render입니다. 네 번째 단계는 comComponentDidUpdate 데이터 업데이트를 완료하는 것입니다.

코드 측면에서는 이전 부분을 기반으로 하위 구성 요소가 this.state에 초기 데이터를 정의하고 이 데이터를 렌더링에 바인딩한 다음 이 데이터를 변경하기 위해 onClick 이벤트를 선언하는 버튼을 추가합니다. 이렇게 하면 데이터 업데이트 부분의 효과를 볼 수 있습니다. 여기서는 코드의 첫 번째 부분을 삭제하여 덜 지저분해 보이도록 했습니다. 

import React ,{Component} from 'react'

class Smzq extends Component{
	constructor(props){
		super(props)
		this.state={
			msg:'我是一个msg数据'
		}
	}
	//是否要更新数据，如果返回true才会更新数据
	shouldComponentUpdate(nextProps,nextState){
		console.log('01是否要更新数据')
		console.log(nextProps)		//父组件传给子组件的值，这里没有会显示空
		console.log(nextState)		//数据更新后的值
		return true;				//返回true，确认更新
	}
	//将要更新数据的时候触发的
	componentWillUpdate(){
		console.log('02组件将要更新')
	}
	//更新数据时候触发的生命周期函数
	componentDidUpdate(){
		console.log('04组件更新完成')
	}
	//更新数据
	setMsg(){
		this.setState({
			msg:'我是改变后的msg数据'
		})
	}
	render(){
		console.log('03数据渲染render')
		return(
			<div>
				{this.state.msg}
				<br>
				<hr>
				<button>this.setMsg()}>更新msg的数据</button>
			</div>
		) 
	}
}
export default Smzq

React의 라이프사이클 기능은 무엇입니까?

3.ComponentWillReceiveProps에 대해 별도로 이야기해 보겠습니다. 상위 컴포넌트에서 props 값이 변경될 때 트리거되는 함수
이 함수는 상위 컴포넌트에 값을 전달할 때 props 값이 변경될 때 트리거됩니다. 자식 컴포넌트 함수, 방금 두 번째 부분에서 shouldComponentUpdate 함수가 두 개의 매개변수를 전달할 수 있다고 언급했는데, nextProps는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 값입니다
부모 컴포넌트에 초기 제목 데이터를 정의하고, 선언하는 버튼을 작성하세요. onClick 이벤트 이 제목을 변경하세요

IV. componentWillUnmount 구성 요소가 소멸되려고 할 때의 함수
상위 구성 요소에서 플래그를 true로 사용하여 상태 값을 정의하고 onClick 이벤트를 선언하는 버튼을 추가하세요.
이 플래그를 다음으로 변경하세요. 구성요소를 파괴합니다.

상위 구성 요소 코드: 

import React, { Component } from 'react';
import Smzq from './components/Smzq'

class App extends Component {
	constructor(props){
		super(props)
		this.state={
			flag:true,
			title:"我是app组件的标题"
		}
	}
	//创建/销毁组件
	setFlag(){
		this.setState({
			flag:!this.state.flag
		})
	}
	//改变title
	setTitle(){
		this.setState({
			title:'我是app组件改变后的title'
		})
	}
  	render() {
	    return (
	      <div>
				{
					this.state.flag?<smzq></smzq>:''
				}
				<button>this.setFlag()}>挂载/销毁生命周期函数组件</button>
				<button>this.setTitle()}>改变app组件的title</button>
	      </div>
	    );
 	}
}
export default App;

하위 구성 요소의 전체 코드: 

import React ,{Component} from 'react'

class Smzq extends Component{
	constructor(props){
		super(props)
		this.state={
			msg:'我是一个msg数据'
		}
	}
	//组件将要挂载时候触发的生命周期函数
	componentWillMount(){
		console.log('02组件将要挂载')
	}
	//组件挂载完成时候触发的生命周期函数
	componentDidMount(){
		//Dom操作，请求数据放在这个里面
		console.log('04组件挂载完成')
	}
	//是否要更新数据，如果返回true才会更新数据
	shouldComponentUpdate(nextProps,nextState){
		console.log('01是否要更新数据')
		console.log(nextProps)		//父组件传给子组件的值，这里没有会显示空
		console.log(nextState)		//数据更新后的值
		return true;				//返回true，确认更新
	}
	//将要更新数据的时候触发的
	componentWillUpdate(){
		console.log('02组件将要更新')
	}
	//更新数据时候触发的生命周期函数
	componentDidUpdate(){
		console.log('04组件更新完成')
	}
	//你在父组件里面改变props传值的时候触发的函数
	componentWillReceiveProps(){
		console.log('父子组件传值，父组件里面改变了props的值触发的方法')
	}
	setMsg(){
		this.setState({
			msg:'我是改变后的msg数据'
		})
	}
	//组件将要销毁的时候触发的生命周期函数，用在组件销毁的时候执行操作
	componentWillUnmount(){
		console.log('组件销毁了')
	}
	render(){
		console.log('03数据渲染render')
		return(
			<div>
				生命周期函数演示--{this.state.msg}--{this.props.title}
				<br>
				<hr>
				<button>this.setMsg()}>更新msg的数据</button>
			</div>
		) 
	}
}
export default Smzq

点击挂载/销毁生命周期函数组件这个按钮的时候
子组件消失，控制台打印：组件销毁了。

当父组件给子组件传值时
React의 라이프사이클 기능은 무엇입니까?

这里nextProps这个就有上图划红线的值了。
那么我们再点击改变app组件的title这个按钮

React의 라이프사이클 기능은 무엇입니까?

这里可以看到componentWillReceiveProps这个函数被触发了，nextProps这个值也发生了改变。

到这里就全部结束了，可能写的不够清晰，不知道有没有人能看完，over。

推荐学习：《react视频教程》

위 내용은 React의 라이프사이클 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：프로젝트 반응에 echarts 원형 차트를 추가하는 방법다음 기사：프로젝트 반응에 echarts 원형 차트를 추가하는 방법

관련 기사

더보기