ReactDərs 15 / 15

Müsahibəyə hazırlıq: React

Komponent və render sualları

React nəyi həll edir? İnterfeysi məlumatdan təsvir edib təkrar istifadə edilən komponentlərlə idarə etməyə kömək edir.
Virtual DOM və render? React element təsvirlərini müqayisə edir; render görünüşü hesablayır, DOM-a tətbiq commit mərhələsində olur.
JSX nədir? JavaScript daxilində interfeys təsvir edən, build zamanı çevrilən sintaksisdir; adi HTML deyil.
HTML elementi və komponent? Kiçik hərfli teq host elementini, böyük hərfli ad öz komponentini göstərir.
Props və state? Props valideyndən giriş, state komponentin yaddaşıdır. Props-u birbaşa dəyişmə.
setState dərhal dəyişirmi? Cari renderin snapshot-unu dəyişmir. Növbəti dəyəri əvvəlkindən hesablamaq üçün updater istifadə et. Sinif callback-i və effect-in məqsədlərini qarışdırma.
Həyat dövrü və cleanup? Qlobal hadisə, taymer və sorğu resurslarını lazım olmadıqda burax. componentWillUnmount sinif təmizləməsidir; funksiyada effect cleanup istifadə olunur.
İdarə olunan komponent? Input dəyəri state-dən gəlir və hadisə ilə yenilənir.
Key nə üçündür? Eyni valideyndə elementin sabit kimliyini izləmək üçün; təsadüfi və dəyişən indeks həmişə uyğun deyil.
Sinif və funksiya fərqi? Sinifdə render/this.state/lifecycle, funksiyada Hook-lar var; yeni nümunələri funksiya ilə yaz.

Flux və Redux sualları

Flux birtərəfli məlumat axını ideyasıdır. Redux-da dispatch edilən action reducer vasitəsilə yeni state-ə gətirir. Reducer saf funksiya olmalıdır. Sadə nümunə:

function counter(state = 0, action) {
  if (action.type === 'increment') return state + 1;
  return state;
}
console.log(counter(2, { type: 'increment' })); // 3

Nümunə

Redux yerli React state-ni qadağan etmir. Thunk asinxron işi reducer-dən kənarda əlaqələndirə bilər. Routing URL-ni görünən komponentə bağlayır; yol parametrini query-dən ayır. Promise, fetch, JSON və HTTP metodlarını API mövzusundan təkrar et. CSS üçün margin/padding, mövqeləşmə və display fərqlərini kiçik nümunə ilə izah et.

Praktik input tapşırığı

import { useState } from 'react';
export default function ClearInput() {
  const [text, setText] = useState('Test');
  return <section>
    <label htmlFor="text">Mətn</label>
    <input id="text" value={text} onChange={event => setText(event.target.value)} />
    <button type="button" onClick={() => setText('')}>Təmizlə</button>
  </section>;
}

Nümunə

Əvvəl ilkin dəyəri yoxla, sonra redaktə et, düymə və klaviatura ilə təmizlə. Boş girişdə təkrar təmizləmə də sabit işləməlidir.

Əlavə qeydlər və mənbələr

React-in həll etdiyi problemi, JSX, props, state, lifecycle və render davranışını izah et. Sinif API-lərinə aid sualları funksiya komponentləri ilə müqayisə et, Flux və Redux-da birtərəfli axını göstər.

Niyə vacibdir?

Komponentlər və state mürəkkəb interfeysin hissələrini idarə etməyə kömək edir.

Əvvəlki biliklər

Bu mövzuda

JSX, props, state və render
Lifecycle və idarə olunan formalar
Flux, Redux və məlumat axını

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

İdarə olunan input-u dəyiş

Sahədə yazdığın dəyər state və görünüşdə bir mənbədən gəlsin.

Input dəyəri

Hədəf: Input-a Salam yaz.

Canlı nəticə

Giriş"Test"

Nəticə"Test"

Mənbə kodu

<input value={"Test"} onChange={handleChange} />

Özün sına

Hər suala qısa cavab və kod nümunəsi hazırla. setState-in dərhal yeni dəyər vermədiyini və cleanup-ın niyə lazım olduğunu ayrıca göstər.

Nəticəni necə yoxlayım?

React sualları kod nümunələri ilə cavablandırılır; ilkin Test dəyəri redaktə olunur və düymə input-u təmizləyir.

Gözlənilən nəticə

İlk klikdə konsolda Cari render: 0, növbəti görünüşdə isə Say: 2 olur.
Unmount intervalı dayandırır. Props giriş, state yaddaşdır; key sabit kimlik, reducer isə state keçidini hesablayan saf funksiyadır.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Cari render count dəyərinin snapshot-unu saxlayır. İki funksional updater növbə ilə işləyir; effect isə öz intervalını təmizləyir.

App.jsx

import { useEffect, useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setSeconds(previous => previous + 1), 1000);
    return () => clearInterval(id);
  }, []);
  function addTwo() {
    setCount(previous => previous + 1);
    setCount(previous => previous + 1);
    console.log('Cari render:', count);
  }
  return <><button onClick={addTwo}>Say: {count} (+2)</button><p>Saniyə: {seconds}</p></>;
}
export default function App() {
  const [visible, setVisible] = useState(true);
  return <><button onClick={() => setVisible(value => !value)}>Göstər / gizlət</button>{visible && <Counter />}</>;
}

qisa-cavablar.txt

1. React nəyi həll edir? İnterfeysi məlumatdan təsvir edib təkrar istifadə edilən komponentlərlə idarə etməyə kömək edir.

2. Virtual DOM və render? React element təsvirlərini müqayisə edir; render görünüşü hesablayır, DOM-a tətbiq commit mərhələsində olur.

3. JSX nədir? JavaScript daxilində interfeys təsvir edən, build zamanı çevrilən sintaksisdir; adi HTML deyil.

4. HTML elementi və komponent? Kiçik hərfli teq host elementini, böyük hərfli ad öz komponentini göstərir.

5. Props və state? Props valideyndən giriş, state komponentin yaddaşıdır. Props-u birbaşa dəyişmə.

6. setState dərhal dəyişirmi? Cari renderin snapshot-unu dəyişmir. Növbəti dəyəri əvvəlkindən hesablamaq üçün updater istifadə et. Sinif callback-i və effect-in məqsədlərini qarışdırma.

7. Həyat dövrü və cleanup? Qlobal hadisə, taymer və sorğu resurslarını lazım olmadıqda burax. componentWillUnmount sinif təmizləməsidir; funksiyada effect cleanup istifadə olunur.

8. İdarə olunan komponent? Input dəyəri state-dən gəlir və hadisə ilə yenilənir.

9. Key nə üçündür? Eyni valideyndə elementin sabit kimliyini izləmək üçün; təsadüfi və dəyişən indeks həmişə uyğun deyil.

10. Sinif və funksiya fərqi? Sinifdə render/this.state/lifecycle, funksiyada Hook-lar var; yeni nümunələri funksiya ilə yaz.

concepts.jsx

import { Component, useState } from 'react';
// Komponent funksiyadır; JSX ifadəsi React elementi təsviridir.
export function ProductCard({ title }) { return <h2>{title}</h2>; }
export const element = <ProductCard title="Kitab" />;
// İdarə olunan input: dəyərin mənbəyi state-dir.
export function NameInput() {
  const [name, setName] = useState('');
  return <label>Ad<input value={name} onChange={event => setName(event.target.value)} /></label>;
}
// Sabit kimlik: eyni ad olsa da fərqli id key kimi qalır.
export function People({ items }) {
  return <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}
// Sinif nümunəsində də əvvəlki state-dən updater ilə hesablayırıq.
export class ClassCounter extends Component {
  state = { count: 0 };
  render() {
    return <button onClick={() => this.setState(previous => ({ count: previous.count + 1 }))}>{this.state.count}</button>;
  }
}
// Redux reducer eyni giriş üçün eyni çıxış verir, kənarı dəyişmir.
export function counterReducer(state = 0, action) {
  return action.type === 'increment' ? state + 1 : state;
}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.