구성 요소의 생명주기에 반응하는 방법--그것들은 무엇입니까?
26829 단어 reactcodenewbiebeginnersjavascript
소개하다.👋
React의 각 어셈블리에는 고유의 라이프 사이클이 있습니다.하지만 깊이 연구하기 전에🤔 우리는 React 구성 요소의 생명 주기가 도대체 무엇인지 알아야 한다. 왜 나는 그것을 알아야 합니까?
라이프 사이클은 구성 요소가 존재하는 다양한 단계에서 실행되는 일련의 방법일 뿐입니다.모든react 구성 요소에는 몇 가지 "생명주기 방법"이 있습니다.프로세스에서 특정 시간에 특정 코드를 실행할 때 덮어쓸 수 있도록 이 방법들을 이해해야 한다.
🌱 반응 성분의 상
구성 요소는 4단계로 구성됩니다.
마운트: 이 단계에서 구성 요소가 초기화되고 DOM에 삽입됩니다.
업데이트: 이미 하나의 구성 요소가 DOM에 나타나면, 모든 업데이트는 업데이트 단계의 일부분으로 이 구성 요소에 진행됩니다.
오류 처리: 이 단계는 라이프스케일 방법, 구조 함수 또는 다른 하위 구성 요소에서 발생할 때 발생하는 오류를 처리합니다.
제거: 이 단계에서 DOM에서 구성 요소를 제거하고 정리 활동을 완료합니다.
🧬 라이프 사이클 방법
이제 React 구성 요소의 다양한 단계를 알았습니다. 단계별로 호출되는 라이프 사이클 방법에 대해 알아보겠습니다.
1🐇 설치 단계:
이 단계에서 구성 요소는 구조 함수에서 초기화된 도구와 상태로 만들어집니다.도구와 상태가 준비되면 구성 요소는 DOM에 마운트되어 웹 페이지에 처음 나타납니다.
설치 단계는 다음과 같습니다.
1. 구조 함수():
import React from 'react';
class AppComp extends React.Component {
constructor(props) {
super(props);
this.state = {
title : 'Lifecycle Methods'
}
console.log('Inside React Component
Constructor');
}
}
2.getDerivedStateFromProps（）
import React from 'react';
class AppComp extends React.Component {
constructor(props) {
super(props);
this.state = {
title : 'Lifecycle Methods'
}
console.log('Inside React Component
Constructor');
}
static getDerivedStateFromProps(props, state) {
console.log('Inside React Component
getDerivedStateFromProps');
}
}
3. 구현()
import React from 'react';
class AppComp extends React.Component {
constructor(props) {
super(props);
this.state = {
title : 'Lifecycle Methods'
}
console.log('Inside React Component
Constructor');
}
static getDerivedStateFromProps(props, state) {
console.log('Inside React Component
getDerivedStateFromProps');
}
render() {
console.log('Inside render method');
return <div> This is the App Component </div>
}
}
4. 구성 요소 설치()
import React from 'react';
class AppComp extends React.Component {
constructor(props) {
super(props);
this.state = {
title : 'Lifecycle Methods'
}
console.log('Inside React Component
Constructor');
}
static getDerivedStateFromProps(props, state) {
console.log('Inside React Component
getDerivedStateFromProps');
}
componentDidMount(){
console.log("Inside componentDidMount");
}
render() {
console.log('Inside render method');
return <div> This is the App Component </div>
}
}
Console Output for the above code:
아직도 나랑 있어?잠깐 기다리다
이제 구성 요소의 생명주기 2단계를 살펴보자.
2👨💻 업데이트 단계:
getDerivedStateFromProps() 및
1. 정적 getDerivedStateFromProps()
2.shouldComponentUpdate（）
shouldComponentUpdate(nextProps, nextState)
3. 구현()
4.getSnapshotBeforeUpdate（）
5. 어셈블리 업데이트()
componentDidUpdate(prevProps, prevState, snapShot)
Child.js:
import React, { Component } from 'react';
class Child extends Component{
constructor(props){
super(props);
this.state={
value:'React Application'
}
console.log("Inside child constructor");
}
static getDerivedStateFromProps(props,state){
console.log("Inside child getDerivedStateFromProps");
return null;
}
componentDidMount(){
console.log("Inside child componentDidMount");
}
shouldComponentUpdate(){
console.log("Inside child shouldComponentUpdate");
return true;
}
getSnapshotBeforeUpdate(prevProps,prevState){
console.log("inside child getSnapshotBeforeUpdate");
return null;
}
componentDidUpdate(){
console.log("Inside child componentDidUpdate");
}
render(){
console.log("Inside child render");
return <div/>
}
}
export default LifecycleChild;
App.js
import React,{Component} from 'react';
import Child from './Child';
class App extends Component{
constructor(props){
super(props);
this.state={
value:'React Application'
}
this.changeState = this.changeState.bind(this);
console.log("Inside constructor");
}
static getDerivedStateFromProps(props,state){
console.log("Inside getDerivedStateFromProps");
return null;
}
componentDidMount(){
console.log("Inside componentDidMount");
}
shouldComponentUpdate(){
console.log("Inside shouldComponentUpdate");
return true;
}
getSnapshotBeforeUpdate(prevProps,prevState){
console.log("Inside getSnapshotBeforeUpdate");
return null;
}
componentDidUpdate(){
console.log("Inside componentDidUpdate");
}
changeState = () => {
this.setState({
value : "React Application started"
})
}
render(){
console.log("Inside render");
return(
<div>
<div>React Parent</div>
<button onClick={this.changeState}>Click Me</button>
<Child />
</div>
);
}
}
export default App;
Console Outputs:
- During Mounting..
- During Updating (On clicking the "Click Me")...
Notice that all the console outputs are in the order for all the methods as per the lifecycle. But there is a small different in calling of getSnapshotBeforeUpdate().
For the getSnapshotBeforeUpdate() method, the child's method is called before the Parent's method. Once called, all the other Parent's methods are called.
주의: 업데이트 단계에서 5가지 방법을 보았지만, 가장 자주 사용하는 방법은render () 와componentDidUpdate () 이며, 그 중에서render () 가 유일한 강제 방법입니다.
셋.🥂 제거 단계
구성 요소가 제거됩니다()
사용법: 이 방법은 청결 과정에 사용할 수 있습니다.예를 들어 열려 있는 모든 연결을 닫거나 네트워크 요청을 취소하거나 이벤트 처리 프로그램을 삭제하는 등
요약:
따라서 모든 React 구성 요소의 생명 주기에는 설치, 업데이트, 마운트 해제 단계가 다르다.오류 처리 단계라고 하는 또 다른 단계는
getDerivedStateFromError()와 componentDidCatch() 두 가지 방법을 포함한다.Thanks for Reading.. 🔚
Reference
이 문제에 관하여(구성 요소의 생명주기에 반응하는 방법--그것들은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aditya278/react-components-lifecycle-methods-wth-are-they-2lh5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
