React 컴포넌트 수명주기
이 장에서는 React 구성 요소의 수명주기에 대해 논의합니다.
구성 요소의 수명 주기는 세 가지 상태로 나눌 수 있습니다.
마운팅: 실제 DOM에 삽입
업데이트: 다시 렌더링 중
언마운트: 실제 DOM에서 이동
라이프 사이클 방법에는 다음이 있습니다.
comComponentWillMount 클라이언트와 서버 모두에서 렌더링 전에 호출됩니다.
comComponentDidMount: 첫 번째 렌더링 후에 호출되며 클라이언트측에서만 호출됩니다. 그 후 구성 요소는 this.getDOMNode()를 통해 액세스할 수 있는 해당 DOM 구조를 생성했습니다. 다른 JavaScript 프레임워크와 함께 사용하려면 setTimeout, setInterval을 호출하거나 이 메서드에서 AJAX 요청을 보낼 수 있습니다(외부 작업이 UI를 차단하는 것을 방지하기 위해).
comComponentWillReceiveProps은 구성 요소가 새 prop을 받으면 호출됩니다. 이 메서드는 렌더링을 초기화할 때 호출되지 않습니다.
shouldComponentUpdate 부울 값을 반환합니다. 구성 요소가 새 소품이나 상태를 받을 때 호출됩니다. 초기화 중이나 forceUpdate를 사용할 때는 호출되지 않습니다.
구성요소를 업데이트할 필요가 없음을 확인한 경우 사용할 수 있습니다.comComponentWillUpdate는 구성 요소가 새 prop이나 상태를 받았지만 아직 렌더링되지 않은 경우 호출됩니다. 초기화 중에는 호출되지 않습니다.
comComponentDidUpdate 구성 요소 업데이트가 완료된 직후 호출됩니다. 초기화 중에는 호출되지 않습니다.
comComponentWillUnmount는 구성 요소가 DOM에서 제거되면 즉시 호출됩니다.
이러한 방법에 대한 자세한 지침은 공식 문서를 참조하세요.
다음 예제에서는 Hello 구성 요소가 로드된 후 componentDidMount 메서드를 통해 타이머를 설정하고 100밀리초마다 구성 요소의 투명도를 재설정한 다음 다시 렌더링합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.getElementById('example')
);
</script>
</body>
</html>Run Instance»
Click 온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 누르세요.
다음 인스턴스는 state 초기화되고, setNewnumber는 state를 업데이트하는 데 사용됩니다. 모든 수명주기는 Content 구성 요소에 있습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Button = React.createClass({
getInitialState: function() {
return {
data:0
};
},
setNewNumber: function() {
this.setState({data: this.state.data + 1})
},
render: function () {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>
);
}
})
var Content = React.createClass({
componentWillMount:function() {
console.log('Component WILL MOUNT!')
},
componentDidMount:function() {
console.log('Component DID MOUNT!')
},
componentWillReceiveProps:function(newProps) {
console.log('Component WILL RECIEVE PROPS!')
},
shouldComponentUpdate:function(newProps, newState) {
return true;
},
componentWillUpdate:function(nextProps, nextState) {
console.log('Component WILL UPDATE!');
},
componentDidUpdate:function(prevProps, prevState) {
console.log('Component DID UPDATE!')
},
componentWillUnmount:function() {
console.log('Component WILL UNMOUNT!')
},
render: function () {
return (
<div>
<h3>{this.props.myNumber}</h3>
</div>
);
}
});
ReactDOM.render(
<div>
<Button />
</div>,
document.getElementById('example')
);
</script>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
