Bu yazı not tutma amaçlı yazılmıştır..

React’da her bileşen için belirli durumlarda kullanılabilecek “yaşam döngüsü yöntemi” vardır.

constructor()

constructor metodunda local state değişkenleri tanımlanır. Ayrıca diğer componentlerden elen props ları okumak için super(props) en başa konur.

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Event tutucu metodları da bu kısımda yazılır.

componentDidMount()

componentDidMount() bileşen oluşturulduktan hemen sonra çalışan metoddur. setState() ile state değişkenlerini burada oluşturabilirsiniz.

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() bileşen güncellendikten sonra olanki evredir.

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

componentWillUnmount()

componentWillUnmount() bileşen oluşturulmadan hemen önceki aşamadır. Bu aşamada setState() kullanılmaz.

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate() de bileşenin güncellenip güncellenmeyeceği kararı verilir. Default true.

static getDerivedStateFromProps(props, state)

static getDerivedStateFromProps(nextProps, prevState){
   if(nextProps.someValue!==prevState.someValue){
     return { someState: nextProps.someValue};
  }
  else return null;
}

What happens when you call setState?

Bileşenin içindeki state değerleri güncellenir.

What’s the difference between an Element and a Component in React?

React element: arayüzde göstermek istediğimiz herhangi bir UI etiketi
React component: bir fonksiyon veya sınıf olabilir. sonucunda yine UI elementi döndürebilir.

When would you use a Class Component over a Functional Component?

Eğer component yaşam döngüsü içeriyorsa buna Class component(stateful) denir. İçermiyorsa Functional(Stateless) component

What are refs in React and why are they important?

Ref dom elementine direkt olarak componentten erişmek için kullanılır.

What are keys in React and why are they important?

Bir listedeki elemanların değişimini, eklenmesini, ya da oluşumunu izleyebilmek için key kullanılır. Benzersizlerdir.

In which lifecycle event do you make AJAX requests and why?

AJAX istekleri componentDidMount() metodunda yapılır. AJAX isteklerinin component oluşumuna kadar bitip bitmeyeceğini bilemeyeceğimiz için, bu istekleri componentDidMount içerisinde yaparız ki, istek bittiğinde component güncellensin.

What does shouldComponentUpdate do and why is it important?

shouldComponentUpdate props ve state değerlerini karşılaştırarak o componentin güncellenip güncellenmeyeceğine karar verir.

React redux?

Aslında en büyük sebep şu: Eğer ki kapsamlı, bir çok component’i birbiri içine geçmiş şekilde projenizde kullanıyorsanız, artık component’lerin state’lerini birbirine taşımak büyük bir zorluk olmaya başlıyor. Dolayısı ile tanımlanmış, standart mimari ile bütün state bilgilerine dışardan erişilebilir, tek bir noktadan yönetilebilen, istenildiği zaman direk çağırılıp kullanılabilir bir yapı olarak redux kullanımı sistemin kompleksliğini azaltıyor. Gereksiz kod yazımını azaltıyor. link