React 컴포넌트의 라이프사이클에 대한 간략한 분석(코드 분석)
- 不言원래의
- 2018-09-10 17:34:281362검색
이 글은 React 컴포넌트의 라이프사이클(코드 분석)에 대한 간략한 분석을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
전체 React 라이프사이클은 생성, 업데이트, 제거의 세 단계로 구성됩니다. 각 단계에는 해당 작업과 방법이 있습니다. 아래의 고전적인 그림을 보면 알 수 있습니다.
#🎜 🎜#
- getDefaultProps()#🎜 🎜 # 이 메서드는 구성 요소 인스턴스가 생성되기 전, 즉 생성자가 실행되기 전에 실행되어 상위 구성 요소에서 전달된 매개 변수를 가져옵니다. 여기에서 매개 변수를 편집할 수 있습니다.
- getInitalState()
- 이 메서드는 구성 요소가 생성될 때 구성 요소의 상태#🎜 🎜#
- 이 메서드는 구성 요소가 생성되기 전에 실행됩니다. 구성 요소는 렌더링되며 상태를 수정하는 데 사용될 수 있습니다. React는 먼저 상위 컴포넌트의 함수를 호출한 다음 하위 컴포넌트의 함수를 호출합니다. #컴포넌트 렌더링 함수를 시작하고 루트 노드가 하나만 있는 가상 DOM을 반환합니다. 이 함수에서는 구성 요소의 상태를 동기식으로 수정할 수 없습니다.
- 렌더링 후 알림 구성 요소가 로드되었습니다. React는 먼저 하위 구성 요소의 이 함수를 호출한 다음 상위 구성 요소의 이 함수를 호출합니다. 이 기능부터 시작하여 구성 요소는 다른 프레임워크와 상호 작용할 수 있습니다. 예를 들어 타이머를 설정하거나 네트워크를 요청하는 것입니다.
- comComponentWillReceiveProps()
- comComponentWillMount 메소드와 유사하며 렌더링이 렌더링되기 전에 호출됩니다. 구성 요소는 새로운 소품이나 상태를 받습니다. 이 함수가 호출된 후 nextProps 및 nextState는 각각 this.props 및 this.state로 설정됩니다.
- comComponentDidMount 메소드와 유사하며, 렌더링 렌더링 후에 호출되며 실제 DOM이 생성된 다음 함수를 호출합니다. 전달된 매개변수는 이전 props와 state입니다.
- comComponentWillUnmount()
- 렌더를 트리거하는 여러 가지 상황여기에서는 shouldComponentUpdate가 수정되지 않았으며 항상 true를 반환하는 것만 고려합니다
#🎜 🎜 #첫 번째 렌더링, 즉 초기 렌더링
Call this.setState(setState가 호출될 때마다 트리거되지 않으며 입력 구성요소 등 반응이 최적화됩니다. of antd)#🎜🎜 #
- 상위 구성 요소가 업데이트됩니다. 일반적으로 수정된 하위 구성 요소의 소품입니다.
- 간단한 예# 🎜🎜#
import React from 'react';
import ReactDOM from 'react-dom';
import style from './font.css';
import './index.less';
class Parent extends React.Component{
constructor(props) {
super(props);
this.state = {
willRender: true,
prop: 1
};
}
render(){
return (
<div>
<button>{this.setState({prop: 10})}}>changePropsFromParent</button>
{
this.state.willRender &&
<child></child>
}
<button>{this.setState({willRender: false})}}>UnmountChild</button>
</div>
);
}
}
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {
curr: 0
};
}
getDefaultProps(){
console.log('getDefaultProps');
}
getInitalState(){
console.log('getInitalState');
}
componentWillMount(){
console.log('componentWillMount');
}
componentDidMount(){
console.log('componentDidMount');
}
componentWillReceiveProps(){
console.log('componentWillReceiveProps');
}
shouldComponentUpdate(){
console.log('shouldComponentUpdate');
return true;
}
componentWillUpdate(){
console.log('componentWillUpdate');
}
componentDidUpdate(){
console.log('componentDidUpdate');
}
componentWillUnmount(){
console.log('componentWillUnmount');
}
render() {
console.log('render')
return (
<div>
<button>this.setState({curr:2})}>setState</button>
<button>{this.forceUpdate();}}>forceUpdate</button>
</div>
);
}
}
ReactDOM.render(
<parent></parent>,
document.getElementById('root')
);
#🎜🎜 #
위 내용은 React 컴포넌트의 라이프사이클에 대한 간략한 분석(코드 분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.