Ciclo de Vida de Componentes ReactJS

Neste capítulo, discutiremos os métodos de ciclo de vida dos componentes.

métodos de ciclo de vida

• componentWillMount já foi executado no servidor e no cliente antes da renderização.

• componentDidMountSomente após a primeira renderização no cliente ser executada. Este é o local onde deve ser feita a solicitação AJAX e a atualização do DOM ou do estado. Este método também é usado para outros frameworks JavaScript e para qualquer função de execução atrasada (por exemplosetTimeoutou) integraçãosetIntervalpara atualizar o estado, para que possamos acionar outros métodos de ciclo de vida.

• componentWillReceivePropsé chamado imediatamente após a atualização de props, então chama outro renderer. Estamos usandosetNewNumberao atualizar o estado.

• shouldComponentUpdatedeve retornartrueoufalsevalor. Isso determina se o componente será atualizado.truepadrão é definido como. Se você estiver certo de que o componente não precisa ser atualizado após a atualizaçãostateoupropsapresentado após a atualização, você pode retornarfalsevalor.

• componentWillUpdate Chamado antes da renderização.

• componentDidUpdate Chamado imediatamente após a renderização.

• componentWillUnmountChamado após o componente ser removido do DOM. Estamos removendo o componentemain.js.

Neste exemplo, vamosstatedefinido no construtor. Vamos definirsetNewnumberusado para atualizaçõesstateTodas as métodos de ciclo de vida estão dentro do componente 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 RECEIVE 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);

Após a renderização inicial, obteremos a seguinte tela.