React Class Components

❮ Předchozí Další ❯

Před React 16.8 byly komponenty třídy jediným způsobem, jak sledovat stav a životní cyklus komponenty React. Funkční komponenty byly považovány za „bezstavové“.

S přidáním háčků jsou nyní komponenty Function téměř ekvivalentní komponentám třídy. Rozdíly jsou tak malé, že pravděpodobně nikdy nebudete muset použít komponentu Class v Reactu.

I když jsou preferovány komponenty Function, neexistují žádné aktuální plány na odstranění komponent Class z Reactu.

Tato část vám poskytne přehled o tom, jak používat komponenty Class v Reactu.

Neváhejte a přeskočte tuto část a použijte místo ní Komponenty funkcí.

React Components

Komponenty jsou nezávislé a opakovaně použitelné bity kódu. Slouží stejnému účelu jako funkce JavaScriptu, ale fungují izolovaně a vracejí HTML prostřednictvím funkce render().

Komponenty se dodávají ve dvou typech, komponenty Class a komponenty Function, v této kapitole se dozvíte o komponentách Class.

Vytvořte komponentu třídy

Při vytváření komponenty React musí název komponenty začínat velkým písmenem.

Komponenta musí obsahovat extends React.Componentpříkaz, tento příkaz vytváří dědictví React.Component a dává vaší komponentě přístup k funkcím React.Component.

Komponenta také vyžaduje render()metodu, tato metoda vrací HTML.

Příklad

Vytvořte komponentu Class s názvem Car

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

Nyní má vaše aplikace React komponentu nazvanou Car, která vrací <h2>prvek.

Chcete-li použít tuto komponentu ve své aplikaci, použijte podobnou syntaxi jako normální HTML: <Car />

Příklad

Zobrazit Carkomponentu v "kořenovém" prvku:

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

Získejte certifikaci!

Dokončete moduly React, proveďte cvičení, udělejte zkoušku a získejte certifikaci w3schools!!

95 $ PŘIHLÁSIT SE

Konstruktor komponent

Pokud je constructor()ve vaší komponentě nějaká funkce, bude tato funkce volána, když se komponenta iniciuje.

Funkce konstruktoru je místo, kde iniciujete vlastnosti komponenty.

V Reactu by vlastnosti komponenty měly být zachovány v objektu s názvem state.

Více se dozvíte statepozději v tomto tutoriálu.

Funkce konstruktoru je také místem, kde respektujete dědičnost nadřazené komponenty zahrnutím super() příkazu, který provádí funkci konstruktoru nadřazené komponenty a vaše komponenta má přístup ke všem funkcím nadřazené komponenty ( React.Component).

Příklad

Vytvořte funkci konstruktoru v komponentě Auto a přidejte vlastnost color:

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

Použijte vlastnost color ve funkci render():

Příklad

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

Rekvizity

Dalším způsobem zpracování vlastností komponent je použití props.

Podpěry jsou jako argumenty funkcí a posíláte je do komponenty jako atributy.

Více se dozvíte propsv další kapitole.

Příklad

Použijte atribut k předání barvy komponentě Car a použijte ji ve funkci render():

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

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

Rekvizity v konstruktoru

Pokud má vaše komponenta funkci konstruktoru, měly by být rekvizity vždy předány konstruktoru a také React.Component prostřednictvím super()metody.

Příklad

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'));

Komponenty v komponentách

Můžeme odkazovat na komponenty uvnitř jiných komponent:

Příklad

Použijte součást Auto uvnitř součásti Garáž:

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'));

Komponenty v souborech

React je o opětovném použití kódu a může být chytré vložit některé z vašich komponent do samostatných souborů.

Chcete-li to provést, vytvořte nový soubor s .js příponou souboru a vložte do něj kód:

Všimněte si, že soubor musí začínat importem React (jako dříve) a musí končit příkazem export default Car;.

Příklad

Toto je nový soubor, pojmenovali jsme ho Car.js:

import React from 'react';

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

export default Car;

Abyste mohli Carkomponentu používat, musíte soubor importovat do vaší aplikace.

Příklad

Nyní importujeme Car.jssoubor do aplikace a můžeme Car komponentu používat, jako by zde byla vytvořena.

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

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

Stav komponenty třídy React

Komponenty třídy React mají vestavěný stateobjekt.

Možná jste si všimli, že jsme použili statedříve v sekci konstruktoru komponent.

Objekt stateje místo, kde ukládáte hodnoty vlastností, které patří ke komponentě.

Když se stateobjekt změní, komponenta se znovu vykreslí.

Vytvoření objektu stavu

Stavový objekt je inicializován v konstruktoru:

Příklad

Zadejte stateobjekt v metodě konstruktoru:

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

Objekt state může obsahovat tolik vlastností, kolik chcete:

Příklad

Zadejte všechny vlastnosti, které vaše komponenta potřebuje:

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>
    );
  }
}

Použití `state`objektu

Odkazujte na stateobjekt kdekoli v komponentě pomocí syntaxe:this.state.propertyname

Příklad:

Odkazujte na stateobjekt v render()metodě:

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>
    );
  }
}

Změna `state`objektu

Chcete-li změnit hodnotu v objektu state, použijte this.setState()metodu.

Když se změní hodnota v stateobjektu, komponenta se znovu vykreslí, což znamená, že výstup se změní podle nové hodnoty (hodnot).

Příklad:

Přidejte tlačítko s onClickudálostí, která změní vlastnost barvy:

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>
    );
  }
}

Ke změně objektu stavu vždy použijte setState()metodu, zajistí, že komponenta ví, že byla aktualizována, a zavolá metodu render() (a všechny ostatní metody životního cyklu).

Životní cyklus komponent

Každá komponenta v Reactu má svůj životní cyklus, který můžete sledovat a manipulovat s ním během jeho tří hlavních fází.

Tyto tři fáze jsou: Montáž , Aktualizace a Odpojení .

Montáž

Montáž znamená vložení prvků do DOM.

React má čtyři vestavěné metody, které jsou volány v tomto pořadí při montáži komponenty:

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

Metoda render()je povinná a bude vždy volána, ostatní jsou volitelné a budou volány, pokud je definujete.

constructor

Metoda constructor()je volána před čímkoli jiným, když je komponenta iniciována, a je to přirozené místo pro nastavení počátečních statea dalších počátečních hodnot.

Metoda constructor()se volá s propsargumenty , a měli byste vždy začít voláním super(props)před čímkoli jiným, tím se iniciuje metoda konstruktoru rodiče a komponenta bude moci zdědit metody od svého rodiče ( React.Component).

Příklad:

Metoda constructorje volána Reactem pokaždé, když vytvoříte komponentu:

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

Metoda getDerivedStateFromProps()je volána těsně před vykreslením prvku (prvků) v DOM.

Toto je přirozené místo pro nastavení stateobjektu na základě počátečního 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 ❯

React Tutorial

Reagovat Hooks

Reagovat Cvičení

React Class Components

React Components

Vytvořte komponentu třídy

Příklad

Příklad

Získejte certifikaci!

Konstruktor komponent

Příklad

Příklad

Rekvizity

Příklad

Rekvizity v konstruktoru

Příklad

Komponenty v komponentách

Příklad

Komponenty v souborech

Příklad

Příklad

Stav komponenty třídy React

Vytvoření objektu stavu

Příklad

Příklad

Použití stateobjektu

Příklad:

Změna stateobjektu

Příklad:

Životní cyklus komponent

Montáž

constructor

Příklad:

getDerivedStateFromProps

Example:

render

Example:

componentDidMount

Example:

Updating

getDerivedStateFromProps

Example:

shouldComponentUpdate

Example:

Example:

render

Example:

getSnapshotBeforeUpdate

Example:

componentDidUpdate

Example:

Unmounting

componentWillUnmount

Example:

Použití `state`objektu

Změna `state`objektu