React bileşenleri bağımsız ve yeniden kullanılabilir kod parçalarıdır. Bir React bileşeni, isteğe bağlı bir girdi alır ve ekranda oluşturulan bir React öğesini döndürür.

İki ana React bileşeni türü vardır:

1. İşlevsel Bileşenler durumsuzdur.
2. Sınıf Bileşenleri durum bilgisidir.

İşlevsel bir bileşen, argüman olarak sahne alan ve bir tepki öğesi döndüren sade bir javascript işlevidir . İşlevsel bileşenler, diğer bileşenlerden veri gerektirmez ve diğer bileşenlerle etkileşime girmez .

Hangi Fonksiyonel Bileşenler YAPABİLİR:

1. Kabul et ve sahne kullan
2. Verileri bir biçimde görüntüleyin (bir tepki öğesi döndürün)

1. Kullanmakthis.state
2. Yaşam döngüsü yöntemlerini kullanın (örn componentDidmount.
3. Oluşturma yöntemini kullan

import React from "react"

const Welcome = props => {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
    </div>
  )
}

export default Welcome

Bu bileşenler, ES6'nın sınıf sözdizimi kullanılarak oluşturulur. Mantık içerme yeteneği (örneğin onClick olaylarını işleyen yöntemler), yerel durum (bir sonraki bölümde bununla ilgili daha fazla bilgi) ve kitabın sonraki bölümlerinde keşfedilecek diğer yetenekler gibi bazı ek özellikleri vardır.

Hangi Sınıf Bileşenleri YAPABİLİR:

1. ES6 sınıfından yararlanın ve sınıfı React'te Componentgenişletin
2. Kullanmakthis.state
3. Yaşam döngüsü yöntemlerini kullanın (örn componentDidmount.
4. Oluşturma yöntemini kullan
5. Geçiş sahnelerini kabul edin ve bunlara erişinthis.props

import React, {Component} from "react"

class Welcome extends Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
      </div>
    )
  }
}
export default Welcome

Aşağıdakileri yapmanız gerekmedikçe her zaman işlevsel bir bileşen kullanın:

1. Durumu yönet
2. Bileşene yaşam döngüsü yöntemleri ekleyin
3. Olay işleyicileri için mantık ekleyin

Sunum Bileşenleri

Sunum bileşenine genellikle sahne alan ve UI oluşturan durumsuz işlevsel bileşen denir. İşlevsel bir bileşenle aynı şekilde, bir sunum bileşeni şunları yapamaz:

1. Kullanmakthis.state
2. Yaşam döngüsü yöntemlerini kullanın (örn componentDidmount.
3. Oluşturma yöntemini kullan

import React from 'react'

const Book = ({ title, img_url }) => (
  <div className="book">
    <img src={ img_url } alt={title}/>
    <h3>{ title }</h3>
  </div>
)

export default Book

Konteyner bileşenleri davranışsal kısımla ilgilenecektir. Bir kapsayıcı bileşen, sunum bileşenine, props kullanılarak neyin oluşturulması gerektiğini söyler. Sınırlı DOM işaretlemeleri ve stilleri içermemelidir. Redux kullanıyorsanız, bir kapsayıcı bileşeni, bir mağazaya eylem gönderen kodu içerir. Alternatif olarak, API çağrılarınızı yapmanız ve sonucu bileşenin durumuna kaydetmeniz gereken yer burasıdır.

İşte kapsayıcı bileşen modelinin kısa bir tanımı:

• Konteyner bileşenleri öncelikle işlerin nasıl yürüdüğüyle ilgilenir
• Bir sarma dışında nadiren kendilerine ait herhangi bir HTML işaretlemesine sahiptirler.<div>
• Genellikle durumsaldırlar
• Çocuklarına veri ve davranış sağlamaktan sorumludurlar (genellikle sunum bileşenleri).

class BookList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      books: []
    };
  }

  componentDidMount() {
    fetch('https://learn-co-curriculum.github.io/books-json-example-api/books.json')
      .then(response => response.json())
      .then(bookData => this.setState({ books: bookData.books }))
  }

  renderBooks = () => {
    return this.state.books.map(book => {
      return (
        <div className="book">
          <img src={ book.img_url } />
          <h3>{ book.title }</h3>
        </div>
      )
    })
  }

  render() {
    return (
      <div className="book-list">
        { this.renderBooks() }
      </div>
    )
  }
}

PureComponent

Saf bileşenler öncelikle optimizasyon sağlamak için kullanılır. Yazabileceğimiz en basit ve en hızlı bileşenlerdir. Kapsamı dışındaki değişkenlerin durumuna bağlı değildir veya bunları değiştirmezler. Bu nedenle, neden saf bileşenler basit işlevsel bileşenlerin yerini alabilir.

React.ComponentAncak, düzenli ve a arasındaki önemli bir fark React.PureComponent, saf bileşenlerin durum değişikliği üzerinde yüzeysel karşılaştırmalar yapmasıdır . shouldComponentUpdate()Saf bileşenler kendi kendine ilgilenir . Önceki stateve/veya propssonraki ile aynıysa, bileşen yeniden oluşturulmaz.

React.PureComponentperformansı optimize etmek için kullanılır ve bir tür performans sorunuyla karşılaşmadığınız sürece kullanmayı düşünmeniz için hiçbir neden yoktur.

import React from ‘react
class Welcome extends React.PureComponent{
  render(){
    return (
      <div>
        <h1>Welcome!</h1>
      </div>
    )
  }
}
export default Welcome