React 5 – Class Component vs Functional Component

React’ta bir component tanımlamanın iki yolu vardır. Birincisi önceki örneklerimizde de yaptığımız gibi functional component tanımlamak. İkincisi ise class component tanımlamak.

Functional ComponentClass Component
Javascript’ten aşina olduğumuz bir fonskiyondur aslında. Her bir functional component bir JSX ifadesi döndürür.Bir JavaScript class’ıdır ve React.Component classını extend eder.
render() metodunu implemente ederek yine bir JSX kodunu döndürürüz ve bu kodun render edilmesini sağlarız.
Stateless’tır. Yani herhangi bir state tutmazlar. Stateful’dur.
Dışardan parametre kabul eder. Dışardan parametre kabul eder.
Daha basit ve daha okunaklıdır. Daha karmaşık ve state tutan kodlar yazılabileceğinden okuması daha zordur.

Footer Componentin functional hali:

import React from 'react';
import './index.css';

function FooterComponent() {
  return (
    <div className="Footer">
        Footer
    </div>
  );
}

export default FooterComponent;

Footer Componentin Class’lı hali:

import React from 'react';
import { Component } from 'react';
import './index.css';

class FooterComponent extends Component {

  render() {
    return <div className="Footer">
      Footer
    </div>
  }
}

export default FooterComponent;

 

Sadık Bahadır Memiş

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir