ReactJS - Cykl życia komponentów
W tym rozdziale omówimy metody cyklu życia komponentów.
Metody cyklu życia
componentWillMount jest wykonywany przed renderowaniem, zarówno po stronie serwera, jak i klienta.
componentDidMountjest wykonywany po pierwszym renderowaniu tylko po stronie klienta. To tutaj powinny wystąpić żądania AJAX i aktualizacje DOM lub stanu. Ta metoda jest również używana do integracji z innymi strukturami JavaScript i dowolnymi funkcjami z opóźnionym wykonaniem, takimi jaksetTimeout lub setInterval. Używamy go do aktualizowania stanu, abyśmy mogli uruchomić inne metody cyklu życia.
componentWillReceivePropsjest wywoływana, gdy tylko właściwości zostaną zaktualizowane przed wywołaniem innego renderowania. Uruchomiliśmy to zsetNewNumber kiedy zaktualizowaliśmy stan.
shouldComponentUpdate powinien wrócić true lub falsewartość. To określi, czy składnik zostanie zaktualizowany, czy nie. To jest ustawione natruedomyślnie. Jeśli masz pewność, że komponent nie musi być renderowany postate lub props są zaktualizowane, możesz wrócić false wartość.
componentWillUpdate jest wywoływana tuż przed renderowaniem.
componentDidUpdate jest wywoływana zaraz po renderowaniu.
componentWillUnmountjest wywoływana po odmontowaniu komponentu z domeny. Odmontowujemy nasz komponent w programiemain.js.
W poniższym przykładzie ustawimy początkową statew funkcji konstruktora. PliksetNewnumber służy do aktualizacji state. Wszystkie metody cyklu życia znajdują się w składniku Content.
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);
Po początkowym renderowaniu otrzymamy następujący ekran.