React Sınıfı Bileşenleri

❮ Öncesi Sonraki ❯

React 16.8'den önce, bir React bileşeninde durumu ve yaşam döngüsünü izlemenin tek yolu Class bileşenleriydi. İşlev bileşenleri "durumsuz" olarak kabul edildi.

Hook'ların eklenmesiyle, Function bileşenleri artık Class bileşenlerine neredeyse eşdeğerdir. Farklar o kadar küçüktür ki, muhtemelen React'te bir Class bileşeni kullanmanıza gerek kalmayacaktır.

Function bileşenleri tercih edilse de, Class bileşenlerini React'ten kaldırmaya yönelik güncel bir plan bulunmamaktadır.

Bu bölüm size React'te Class bileşenlerinin nasıl kullanılacağına dair bir genel bakış sağlayacaktır.

Bu bölümü atlamaktan çekinmeyin ve bunun yerine İşlev Bileşenlerini kullanın.

Tepki Bileşenleri

Bileşenler bağımsız ve yeniden kullanılabilir kod parçalarıdır. JavaScript işlevleriyle aynı amaca hizmet ederler, ancak yalıtılmış olarak çalışırlar ve bir render() işlevi aracılığıyla HTML döndürürler.

Bileşenler, Sınıf bileşenleri ve İşlev bileşenleri olmak üzere iki türde gelir, bu bölümde Sınıf bileşenleri hakkında bilgi edineceksiniz.

Bir Sınıf Bileşeni Oluşturun

Bir React bileşeni oluştururken bileşenin adı büyük harfle başlamalıdır.

Bileşenin extends React.Componentifadeyi içermesi gerekir, bu ifade React.Component için bir miras oluşturur ve bileşeninize React.Component'in işlevlerine erişim sağlar.

Bileşen ayrıca bir render()yöntem gerektirir, bu yöntem HTML döndürür.

Örnek

adlı bir Sınıf bileşeni oluşturun.Car

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Artık React uygulamanızın, bir öğe döndüren Car adlı bir bileşeni var <h2>.

Bu bileşeni uygulamanızda kullanmak için normal HTML'ye benzer bir sözdizimi kullanın: <Car />

Örnek

CarBileşeni "root" öğesinde görüntüleyin :

ReactDOM.render(<Car />, document.getElementById('root'));

Sertikalı olmak!

React modüllerini tamamlayın, alıştırmaları yapın, sınava girin ve w3schools sertifikalı olun!

95 $ KAYIT

Bileşen Oluşturucu

Bileşeninizde bir constructor()işlev varsa, bileşen başlatıldığında bu işlev çağrılacaktır.

Yapıcı işlevi, bileşenin özelliklerini başlattığınız yerdir.

React'te bileşen özellikleri, adlı bir nesnede tutulmalıdır state.

stateBu eğitimde daha sonra hakkında daha fazla bilgi edineceksiniz .

super() Yapıcı işlevi aynı zamanda , üst bileşenin yapıcı işlevini yürüten ifadeyi ekleyerek üst bileşenin mirasını onurlandırdığınız yerdir ve bileşeninizin üst bileşenin ( React.Component) tüm işlevlerine erişimi vardır.

Örnek

Araba bileşeninde bir yapıcı işlevi oluşturun ve bir renk özelliği ekleyin:

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a Car!</h2>;
  }
}

render() işlevinde color özelliğini kullanın:

Örnek

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

sahne

Bileşen özelliklerini ele almanın başka bir yolu da props.

Proplar, fonksiyon argümanları gibidir ve bunları bileşene nitelik olarak gönderirsiniz.

propsBir sonraki bölümde daha fazlasını öğreneceksiniz .

Örnek

Araba bileşenine bir renk iletmek için bir nitelik kullanın ve onu render() işlevinde kullanın:

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Yapıcıdaki Aksesuarlar

Bileşeninizin bir yapıcı işlevi varsa, aksesuarlar her zaman yapıcıya ve ayrıca yöntem aracılığıyla React.Component'e iletilmelidir super().

Örnek

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a {this.props.model}!</h2>;
  }
}

ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));

Bileşenlerdeki Bileşenler

Diğer bileşenlerin içindeki bileşenlere başvurabiliriz:

Örnek

Garaj bileşeninin içindeki Araba bileşenini kullanın:

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Dosyalardaki Bileşenler

React tamamen kodu yeniden kullanmakla ilgilidir ve bazı bileşenlerinizi ayrı dosyalara eklemek akıllıca olabilir.

Bunu yapmak için, dosya uzantısına sahip yeni bir dosya oluşturun .js ve kodu içine koyun:

Dosyanın React'i (önceki gibi) içe aktararak başlaması ve deyimiyle bitmesi gerektiğini unutmayın export default Car;.

Örnek

Bu yeni dosya, adını verdik Car.js:

import React from 'react';

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

export default Car;

Bileşeni kullanabilmek için Cardosyayı uygulamanıza aktarmanız gerekir.

Örnek

Şimdi Car.jsdosyayı uygulamada içe aktarıyoruz ve Car bileşeni burada oluşturulmuş gibi kullanabiliriz.

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));

React Sınıfı Bileşen Durumu

React Class bileşenlerinin yerleşik bir statenesnesi vardır.

stateBileşen oluşturucu bölümünde daha önce kullandığımızı fark etmiş olabilirsiniz .

Nesne state, bileşene ait özellik değerlerini depoladığınız yerdir.

Nesne değiştiğinde , statebileşen yeniden oluşturulur.

Durum Nesnesini Yaratmak

Durum nesnesi yapıcıda başlatılır:

Örnek

stateYapıcı yönteminde nesneyi belirtin :

class Car extends React.Component {
  constructor(props) {
    super(props);
  this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Durum nesnesi, istediğiniz kadar özellik içerebilir:

Örnek

Bileşeninizin ihtiyaç duyduğu tüm özellikleri belirtin:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

`state`Nesneyi Kullanmak

Sözdizimini statekullanarak bileşende herhangi bir yerde nesneye bakın :this.state.propertyname

Örnek:

Yöntemdeki statenesneye bakın :render()

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
}

`state`Nesneyi Değiştirme

Durum nesnesindeki bir değeri değiştirmek için this.setState()yöntemi kullanın.

Nesnedeki bir değer statedeğiştiğinde, bileşen yeniden oluşturulacaktır, yani çıktı yeni değer(ler)e göre değişecektir.

Örnek:

onClickcolor özelliğini değiştirecek bir olay içeren bir düğme ekleyin :

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

setState()Durum nesnesini değiştirmek için her zaman yöntemi kullanın , bileşenin güncellendiğini bilmesini ve render() yöntemini (ve diğer tüm yaşam döngüsü yöntemlerini) çağırmasını sağlar.

Bileşenlerin Yaşam Döngüsü

React'teki her bileşenin, üç ana aşaması boyunca izleyip değiştirebileceğiniz bir yaşam döngüsü vardır.

Üç aşama şunlardır: Montaj , Güncelleme ve Montajdan Çıkarma .

Montaj

Montaj, öğeleri DOM'a yerleştirmek anlamına gelir.

React, bir bileşen monte edilirken bu sırayla çağrılan dört yerleşik yönteme sahiptir:

constructor()
getDerivedStateFromProps()
render()
componentDidMount()

Yöntem render()gereklidir ve her zaman çağrılır, diğerleri isteğe bağlıdır ve siz onları tanımlarsanız çağrılır.

constructor

Metot, bileşen başlatıldığında constructor()her şeyden önce çağrılır ve başlangıç stateve diğer başlangıç değerlerini ayarlamak için doğal yerdir.

Yöntem constructor(), argüman olarak , ile çağrılır ve her zaman her şeyden önce propsçağırarak başlamalısınız , bu, ebeveynin yapıcı yöntemini başlatacak ve bileşenin yöntemleri üst öğesinden ( ) devralmasına izin verecektir.super(props)React.Component

Örnek:

Yöntem constructor, her bileşen yaptığınızda React tarafından çağrılır:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

getDerivedStateFromProps

Yöntem getDerivedStateFromProps(), öğelerin DOM'da işlenmesinden hemen önce çağrılır.

stateBu, nesneyi başlangıç değerine göre ayarlamak için doğal yerdir props.

It takes state as an argument, and returns an object with changes to the state.

The example below starts with the favorite color being "red", but the getDerivedStateFromProps() method updates the favorite color based on the favcol attribute:

Example:

The getDerivedStateFromProps method is called right before the render method:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

render

The render() method is required, and is the method that actually outputs the HTML to the DOM.

Example:

A simple component with a simple render() method:

class Header extends React.Component {
  render() {
    return (
      <h1>This is the content of the Header component</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

componentDidMount

The componentDidMount() method is called after the component is rendered.

This is where you run statements that requires that the component is already placed in the DOM.

Example:

At first my favorite color is red, but give me a second, and it is yellow instead:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

Updating

The next phase in the lifecycle is when a component is updated.

A component is updated whenever there is a change in the component's state or props.

React has five built-in methods that gets called, in this order, when a component is updated:

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

The render() method is required and will always be called, the others are optional and will be called if you define them.

getDerivedStateFromProps

Also at updates the getDerivedStateFromProps method is called. This is the first method that is called when a component gets updated.

This is still the natural place to set the state object based on the initial props.

The example below has a button that changes the favorite color to blue, but since the getDerivedStateFromProps() method is called, which updates the state with the color from the favcol attribute, the favorite color is still rendered as yellow:

Example:

If the component gets updated, the getDerivedStateFromProps() method is called:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

shouldComponentUpdate

In the shouldComponentUpdate() method you can return a Boolean value that specifies whether React should continue with the rendering or not.

The default value is true.

The example below shows what happens when the shouldComponentUpdate() method returns false:

Example:

Stop the component from rendering at any update:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

Example:

Same example as above, but this time the shouldComponentUpdate() method returns true instead:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return true;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

render

The render() method is of course called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes.

The example below has a button that changes the favorite color to blue:

Example:

Click the button to make a change in the component's state:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

getSnapshotBeforeUpdate

In the getSnapshotBeforeUpdate() method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update.

If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise you will get an error.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color "red".

When the component has been mounted, a timer changes the state, and after one second, the favorite color becomes "yellow".

This action triggers the update phase, and since this component has a getSnapshotBeforeUpdate() method, this method is executed, and writes a message to the empty DIV1 element.

Then the componentDidUpdate() method is executed and writes a message in the empty DIV2 element:

Example:

Use the getSnapshotBeforeUpdate() method to find out what the state object looked like before the update:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritecolor;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
        <h1>My Favorite Color is {this.state.favoritecolor}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

componentDidUpdate

The componentDidUpdate method is called after the component is updated in the DOM.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color "red".

When the component has been mounted, a timer changes the state, and the color becomes "yellow".

This action triggers the update phase, and since this component has a componentDidUpdate method, this method is executed and writes a message in the empty DIV element:

Example:

The componentDidUpdate method is called after the update has been rendered in the DOM:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  componentDidUpdate() {
    document.getElementById("mydiv").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <div id="mydiv"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

Unmounting

The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.

React has only one built-in method that gets called when a component is unmounted:

componentWillUnmount()

componentWillUnmount

The componentWillUnmount method is called when the component is about to be removed from the DOM.

Example:

Click the button to delete the header:

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }
  delHeader = () => {
    this.setState({show: false});
  }
  render() {
    let myheader;
    if (this.state.show) {
      myheader = <Child />;
    };
    return (
      <div>
      {myheader}
      <button type="button" onClick={this.delHeader}>Delete Header</button>
      </div>
    );
  }
}

class Child extends React.Component {
  componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
  }
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

ReactDOM.render(<Container />, document.getElementById('root'));

❮ Previous Next ❯

Tepki Eğitimi

Tepki Kancaları

Tepki Egzersizleri

React Sınıfı Bileşenleri

Tepki Bileşenleri

Bir Sınıf Bileşeni Oluşturun

Örnek

Örnek

Sertikalı olmak!

Bileşen Oluşturucu

Örnek

Örnek

sahne

Örnek

Yapıcıdaki Aksesuarlar

Örnek

Bileşenlerdeki Bileşenler

Örnek

Dosyalardaki Bileşenler

Örnek

Örnek

React Sınıfı Bileşen Durumu

Durum Nesnesini Yaratmak

Örnek

Örnek

stateNesneyi Kullanmak

Örnek:

stateNesneyi Değiştirme

Örnek:

Bileşenlerin Yaşam Döngüsü

Montaj

constructor

Örnek:

getDerivedStateFromProps

Example:

render

Example:

componentDidMount

Example:

Updating

getDerivedStateFromProps

Example:

shouldComponentUpdate

Example:

Example:

render

Example:

getSnapshotBeforeUpdate

Example:

componentDidUpdate

Example:

Unmounting

componentWillUnmount

Example:

`state`Nesneyi Kullanmak

`state`Nesneyi Değiştirme