React Component Sınıfı

Giriş
Component bir "named export" olduğu için şöyle yaparız.

import React, { Component } from "react";

Bu durumda şöyle yaparız.

class Parent extends Component {
  ...
};

constructor - props
Eğer Typescript kullanıyorsak IProp ve IState isimli iki arayüz tanımlamamız gerekir.
Örnek
Şöyle yaparız.

export default class Editor extends Component {
  constructor(props) {
    super(props);

    this.state = { field: "Some Initial Text" };
    
  }
  ...
}

Örnek

props'taki nesneye erişmek için şöyle yaparız.

class PeopleView extends Component {

  constructor(props) {
    super(props);
    const { people } = props;
    const sortedPeople = sortBy(people, 'birthday');

    
  }    
  ...
}

componentDidUpdate metodu
Açıklaması şöyle. Eğer bunu yaparsak sonsuz döngü oluşur.

You should never do setState in componentDidUpdate, since setState triggers that exact method again.

componentWillMount metodu
Bu metod yerine componentDidMount() metodunu terchi etmek lazım.

Örnek
Şöyle yaparız.

componentWillMount() {
  axios.get('http://rallycoding.herokuapp.com/api/music_albums').then(response => 
    this.setState({
      items: response.data
    }))
    .catch((error) => {
      console.error(error);
    })
}

componentWillReceiveProps metodu
Şöyle yaparız.

componentWillReceiveProps(nextProps){
  if(nextProps.currentUserDetails.id && !nextProps.onCurrentUserDetailsInit){
    this.props.getCurrentUserDetails(nextProps.currentUserDetails.id)
  }
}

componentWillUnmount metodu
Örnek ver

render metodu
Açıklaması şöyle. Bu metod içinde setState() çağrısı yapılamaz.

The render() function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.

Örnek
State göstermek için şöyle yaparız

render() {
  return (
    <div>
      {this.state.text}
    </div>
  )
}

Örnek
HTML nesnesi göstermek için şöyle yaparız.

import React from 'react';

class Example extends React.Component {

  constructor(props, context) {
    super(props, context);
    // initial state
    this.state = {clicked: false};
  }

  render() {
    return (
      <button onClick={() => {this.setState({clicked: true});}}>
      </button>
    );
  }
}

setState metodu

Asenkron çalışır. Açıklaması şöyle.

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

setState() çağrısından hemen sonra state değişmemiş olabilir. Açıklaması şöyle.

Calls to setState are asynchronous - don’t rely on this.state to reflect the new value immediately after calling setState. Pass an updater function instead of an object if you need to compute values based on the current state (see below for details).

Açıklaması şöyle.

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied.

Örnek
updater + callback kullanarak şöyle yaparız.

this.setState({
  query: params
},(updatedState) => { 
 console.log("updated state:", updatedState)
});

Örnek
updater + callback kullanarak şöyle yaparız.

onDragEnd={(event) => 
  this.setState({playerMarkerPositionFuture: event.nativeEvent.coordinate}, 
    () => {alert("hello")}
)}

Örnek
Elimizde şöyle bir component olsun.

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number:0,
    };
  }
  ...
}

Şöyle yaparız

this.setState({
   number: num
}, () => console.log('now the point chosen is: ' + this.state.number));

shouldComponentUpdate metodu
Açıklaması şöyle.

Pure components were introduced in React 15.3. React.Component and React.PureComponent differ in implementing the shouldComponentUpdate() lifecycle method. The shouldComponentUpdate() method decides the re-rendering of the component by returning a boolean. In React.Component, it returns true by default. But in pure components, shouldComponentUpdate() compares if there are any changes in state or props to re-render the component.

Diğer
Component'i export etmek için şöyle yaparız.

import ReactDOM from "react-dom";
import React, { Component } from "react";

class Child extends Component {
  ...
}

export default Child;

Kullanmak için şöyle yaparız.

import ReactDOM from "react-dom";
import React, { Component } from "react";
import Child from "./child.js";

class Parent extends Component {
  ...
};