ReactJS - Vòng đời của thành phần
Trong chương này, chúng ta sẽ thảo luận về các phương pháp vòng đời thành phần.
Phương pháp vòng đời
componentWillMount được thực thi trước khi hiển thị, trên cả máy chủ và phía máy khách.
componentDidMountđược thực thi sau lần hiển thị đầu tiên chỉ ở phía máy khách. Đây là nơi các yêu cầu AJAX và DOM hoặc cập nhật trạng thái sẽ xảy ra. Phương pháp này cũng được sử dụng để tích hợp với các khung JavaScript khác và bất kỳ hàm nào có quá trình thực thi bị trì hoãn nhưsetTimeout hoặc là setInterval. Chúng tôi đang sử dụng nó để cập nhật trạng thái để chúng tôi có thể kích hoạt các phương thức vòng đời khác.
componentWillReceivePropsđược gọi ngay sau khi các đạo cụ được cập nhật trước khi một kết xuất khác được gọi. Chúng tôi đã kích hoạt nó từsetNewNumber khi chúng tôi cập nhật trạng thái.
shouldComponentUpdate nên trở lại true hoặc là falsegiá trị. Điều này sẽ xác định xem thành phần sẽ được cập nhật hay không. Điều này được đặt thànhtruetheo mặc định. Nếu bạn chắc chắn rằng thành phần không cần kết xuất saustate hoặc là props được cập nhật, bạn có thể trở lại false giá trị.
componentWillUpdate được gọi ngay trước khi kết xuất.
componentDidUpdate được gọi ngay sau khi kết xuất.
componentWillUnmountđược gọi sau khi thành phần được ngắt kết nối khỏi dom. Chúng tôi đang ngắt kết nối thành phần của mình trongmain.js.
Trong ví dụ sau, chúng tôi sẽ đặt giá trị ban đầu statetrong hàm khởi tạo. CácsetNewnumber được sử dụng để cập nhật state. Tất cả các phương thức vòng đời đều nằm trong thành phần Nội dung.
App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 0
}
this.setNewNumber = this.setNewNumber.bind(this)
};
setNewNumber() {
this.setState({data: this.state.data + 1})
}
render() {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>
);
}
}
class Content extends React.Component {
componentWillMount() {
console.log('Component WILL MOUNT!')
}
componentDidMount() {
console.log('Component DID MOUNT!')
}
componentWillReceiveProps(newProps) {
console.log('Component WILL RECIEVE PROPS!')
}
shouldComponentUpdate(newProps, newState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('Component WILL UPDATE!');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component DID UPDATE!')
}
componentWillUnmount() {
console.log('Component WILL UNMOUNT!')
}
render() {
return (
<div>
<h3>{this.props.myNumber}</h3>
</div>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
setTimeout(() => {
ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);
Sau khi kết xuất ban đầu, chúng ta sẽ nhận được màn hình sau.