ReactJS — Bileşenler LifeCycle yöntemleri

React bileşenleri, oluşturuldukları andan yok edilmelerine kadar geçen bir olay yaşam döngüsüne sahiptir. Bu yaşam döngüsü olayları, geliştiricilerin bir bileşenin yaşam döngüsüne çeşitli noktalarda bağlanmasına ve belirli eylemleri gerçekleştirmesine olanak tanır.

Burada, bir React bileşeninin ana yaşam döngüsü yöntemleri, her birine ilişkin kısa bir açıklama ve bunların nasıl kullanılabileceğine dair bir örnek verilmiştir:

constructor(): Bu yöntem, bir bileşen monte edilmeden (DOM'a eklenmeden) çağrılır. Durumu başlatmak ve olay işleyicilerini bağlamak için kullanılır.

Misal:

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Misal:

componentDidMount() {
  axios.get('/items')
    .then(response => this.setState({ items: response.data }));
}

Misal:

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

Misal:

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    axios.post('/update-count', { count: this.state.count });
  }
}

Misal:

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

render() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}

İşte ana React bileşeni yaşam döngüsü yöntemlerinin bir özeti:

• constructor(): Durumu başlatır ve olay işleyicilerini bağlar. Bir bileşen monte edilmeden önce çağrılır.
• componentDidMount(): Bileşen işlendikten sonra bir eylemi veya API çağrısını tetikler. Bir bileşen monte edildikten sonra çağrılır.
• shouldComponentUpdate(): Bileşenin güncellenip güncellenmeyeceğini gösteren bir boole değeri döndürür. Bir bileşen yeniden işlenmeden önce çağrılır.
• componentDidUpdate(): Bileşen güncellendikten sonra bir eylemi veya API çağrısını tetikler. Bir bileşen güncellendikten sonra çağrılır.
• componentWillUnmount(): Kaynakları veya olay dinleyicilerini temizler. Bir bileşen yok edilmeden hemen önce çağrılır.
• render(): Bir bileşen için JSX'i oluşturur. Bileşenin yeniden işlenmesi gerektiğinde çağrılır.