ReactJS - Bileşen Yaşam Döngüsü

Bu bölümde, bileşen yaşam döngüsü yöntemlerini tartışacağız.

Yaşam Döngüsü Yöntemleri

• componentWillMount hem sunucuda hem de istemci tarafında işlemeden önce yürütülür.

• componentDidMountyalnızca istemci tarafında ilk işlemeden sonra çalıştırılır. AJAX isteklerinin ve DOM veya durum güncellemelerinin gerçekleşmesi gereken yer burasıdır. Bu yöntem aynı zamanda diğer JavaScript çerçeveleriyle ve gecikmeli yürütme olan tüm işlevlerle, örneğinsetTimeout veya setInterval. Durumu güncellemek için kullanıyoruz, böylece diğer yaşam döngüsü yöntemlerini tetikleyebiliriz.

• componentWillReceivePropsbaşka bir render çağrılmadan önce props güncellenir güncellenmez çağrılır. Onu tetiklediksetNewNumber durumu güncellediğimizde.

• shouldComponentUpdate dönmeli true veya falsedeğer. Bu, bileşenin güncellenip güncellenmeyeceğini belirleyecektir. Bu,truevarsayılan olarak. Bileşenin daha sonra oluşturulmasına gerek olmadığından eminsenizstate veya props güncellendi, geri dönebilirsin false değer.

• componentWillUpdate oluşturmadan hemen önce çağrılır.

• componentDidUpdate oluşturulduktan hemen sonra çağrılır.

• componentWillUnmountbileşen dom'dan kaldırıldıktan sonra çağrılır. Bileşenimizin bağlantısını kesiyoruzmain.js.

Aşağıdaki örnekte, baş harfini ayarlayacağız stateyapıcı işlevinde. setNewnumber güncellemek için kullanılır state. Tüm yaşam döngüsü yöntemleri, İçerik bileşeninin içindedir.

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);

İlk render işleminden sonra aşağıdaki ekranı alacağız.