Тізімдер мен кілттер(Lists and Keys)

Тізімдер мен кілттер

(Lists and Keys)

Мақсаты: React-та тізімдермен жұмыс істеуді үйрену және кілттердің (keys) рөлін түсіну.

Негізгі сұрақтар:

• Тізімдерді қалай құруға болады?
• Кілттер не үшін қажет?
• Қателіктерді болдырмау жолдары.

Тізімдер (Lists) деген не?

Анықтама: Тізімдер — бірнеше компоненттерді қайталап көрсету үшін қолданылады.

Жасау жолы: map() әдісімен массивтегі деректерді компоненттерге түрлендіреміз.

Мысал:

const fruits = ['Apple', 'Banana', 'Orange'];

const list = fruits.map((fruit) => <li>{fruit}</li>);

Нәтиже:

Apple

Banana

Orange

Кілттер (Keys) деген не?

Анықтама: Кілттер — React-қа әр элементтің бірегейлігін көрсету үшін қажет.

Мақсаты: Элементтерді тиімді жаңарту және қателерді болдырмау.

Мысал:

const list = fruits.map((fruit, index) => <li key={index}>{fruit}</li>);

Папка құрып аламыз:

1. SimpleList.js — Қарапайым тізім

Код:

import React from 'react';

const SimpleList = () => {

  const fruits = ['Apple', 'Banana', 'Orange'];

  return (

    <div>

      <h2>Қарапайым тізім</h2>

      <ul>

        {fruits.map((fruit, index) => (

          <li key={index}>{fruit}</li>

        ))}

      </ul>

    </div>

  );

};

export default SimpleList;

Түсіндірме:

1. fruits массиві:

Үш жемістің атауы бар (Apple, Banana, Orange).

2. map әдісі:

• Әр жемісті <li> элементіне айналдырады.
  
• key атрибуты ретінде index қолданылады.
  

3. Нәтижесі:

Қарапайым тізім:

- Apple

- Banana

- Orange

2. ObjectList.js — Объектілермен жұмыс

 Код:

import React from 'react';

const ObjectList = () => {

  const users = [

    { id: 1, name: 'Alice', age: 25 },

    { id: 2, name: 'Bob', age: 30 },

    { id: 3, name: 'Charlie', age: 22 },

  ];

  return (

    <div>

      <h2>Объектілермен жұмыс</h2>

      <ul>

        {users.map((user) => (

          <li key={user.id}>

            {user.name} — Жасы: {user.age}

          </li>

        ))}

      </ul>

    </div>

  );

};

export default ObjectList;

Түсіндірме:

1. users массиві:

Әр элемент — id, name, age деген өрістері бар объект.

2. key ретінде id қолдану:

Бірегейлік үшін id пайдаланылады. Бұл React-қа әр элементті дұрыс бақылауға көмектеседі.

3. Нәтижесі:

Объектілермен жұмыс:

- Alice — Жасы: 25

- Bob — Жасы: 30

- Charlie — Жасы: 22

3. KeyExample.js — Кілттердің рөлі

 Код:

import React from 'react';

const KeyExample = () => {

  const tasks = [

    { id: 101, title: 'React үйрену' },

    { id: 102, title: 'Практика жасау' },

    { id: 103, title: 'Жоба құру' },

  ];

  return (

    <div>

      <h2>Кілттердің рөлі</h2>

      <ul>

        {tasks.map((task) => (

          <li key={task.id}>{task.title}</li>

        ))}

      </ul>

    </div>

  );

};

export default KeyExample;

Түсіндірме:

1. tasks массиві:

Үш элементтен тұрады, әрбір элемент — id және title деген өрістері бар объект.

Мысалы:

{ id: 101, title: 'React үйрену' }

2. map әдісі:

•  tasks массивін қайталап, әрбір тапсырманы <li> элементіне айналдырады.
  
•  Әрбір <li> элементі ішінде тек тапсырманың атауы (task.title) көрсетіледі.
  

3. key атрибуты:

key ретінде task.id қолданылады, себебі әр id бірегей.

Маңызы:

• React-қа әр элементті дұрыс бақылауға көмектеседі.
  
• Егер key дұрыс болмаса, тізімдегі элементтерді жаңарту кезінде қателіктер болуы мүмкін.
  

4. <h2> және <ul> тегтері:

• <h2>: Тақырыпты көрсету үшін.
  
• <ul>: Тапсырмалар тізімін көрсету үшін.
  

Нәтижесі:

Браузерде қалай көрінеді:

Кілттердің рөлі:

- React үйрену

- Практика жасау

- Жоба құру

 4. App.js — Барлығын біріктіру

 Код:

import React from 'react';

import SimpleList from './components/SimpleList';

import KeyExample from './components/KeyExample';

import ObjectList from './components/ObjectList';

function App() {

  return (

    <div>

      <h1>React: Тізімдер мен кілттер</h1>

      <SimpleList />

      <KeyExample />

      <ObjectList />

    </div>

  );

}

export default App;

Түсіндірме:

1. App компоненті:

 Үш компонентті қатар көрсетеді: SimpleList, KeyExample, ObjectList.

2. Ортақ тақырып:

 h1 арқылы ортақ атау беріледі:

React: Тізімдер мен кілттер

3. Нәтижесі:

 Барлық жоғарыдағы нәтижелер бір бетте шығады.

map() әдісі деген не және ол не үшін қолданылады?

1. map() әдісінің анықтамасы:

map() — JavaScript тіліндегі массивтердің біріктірілген әдісі.

Ол массивтегі әр элементке бірдей операцияны қолданып, жаңа массив құрады.

Түпнұсқа массивті өзгертпейді!

Синтаксисі:

const жаңаМассив = ескіМассив.map((элемент, индекс) => {

  // Әр элементке қолданылатын операция

  return өзгертілгенЭлемент;

});

• элемент — ағымдағы элемент.
• индекс (міндетті емес) — элементтің индексі.
• return — әр элемент үшін жаңа мән.

Мысал 1: Санға 2 қосу

const numbers = [1, 2, 3, 4];

const newNumbers = numbers.map((num) => num + 2);

console.log(newNumbers); // [3, 4, 5, 6]

Түсіндіру:

• numbers массивіндегі әр санға 2 қосып, newNumbers деген жаңа массив құрдық.
• Түпнұсқа: [1, 2, 3, 4] өзгеріссіз қалды.

Қорытынды:

• map әдісі: Тізімдерді көрсету үшін.

• key атрибуты: Тізім элементтерін бірегей анықтау үшін.

• Массивтер мен объектілер: Әртүрлі деректерді көрсету үшін қолданылды.

React-та тізімдер мен кілттер (Lists & Keys) не үшін қолданылады?

1. Веб-парақшада тізімдер не үшін қажет?

Веб-парақшада көп жағдайда көптеген элементтерді қайталап көрсету керек болады. Мысалы:

Жаңалықтар лентасы: Әр жаңалық — жеке элемент.

Тауарлар тізімі: Әр тауар жеке карта ретінде көрсетіледі.

Пайдаланушылар тізімі: Әр пайдаланушының аты-жөні, аватары және басқа мәліметтері.

React-та бұл міндетті орындау үшін map() әдісімен тізімдер құрып, оларды компоненттер түрінде көрсету ыңғайлы.

Кілттер (Keys) деген не және олар не үшін қажет?

Кілттердің анықтамасы:

Кілттер (keys) — тізімдегі әр элементке берілетін бірегей идентификатор.

Мақсаты: React-қа элементтерді дұрыс бақылауға және тиімді жаңартуға көмектесу.

Мысал: Жаңалықтар лентасы

Сізде жаңалықтар массиві бар делік:

const news = [

  { id: 1, title: 'React жаңартуы' },

  { id: 2, title: 'JavaScript трендтері' },

];

Кілтсіз код:

const list = news.map((item) => <li>{item.title}</li>);

Мәселе: Егер жаңалықтардың реттілігі өзгерсе, React элементтерді шатастырады.

Мысалы: Бір жаңалық өшірілсе, қалғандары дұрыс жаңартылмайды.

Дұрыс шешім: Кілттерді қолдану

Кілтпен жазылған код:

const list = news.map((item) => <li key={item.id}>{item.title}</li>);

Не өзгерді?

• key={item.id} арқылы әр элементке бірегей кілт бердік.
• React осы кілттер арқылы қандай элемент өзгергенін нақты біледі.
• Тиімділік: Тек өзгерген элементтерді жаңартады, қалғандарын қозғамайды.

⚠️ Кілттер болмаса не болады?

Ескерту: React консолінде "Warning: Each child in a list should have a unique "key" prop" деген қате шығады.

Мәселе: Барлық тізім жаңарып, бет жылдамдығы төмендейді.

Қателік: Элементтер араласып, дұрыс көрсетілмеуі мүмкін.

Қысқаша қорытынды:

Тізімдер: Веб-парақшада бірнеше компонентті көрсетеді.

Кілттер: Тізім элементтерін тиімді және қатесіз жаңарту үшін керек.

Ең жақсы практика:

id мәнін кілт ретінде пайдалану.

index тек соңғы амал ретінде.

Кілттерді қалай дұрыс қолдану керек?

1. Бірегей мәндер:

Массивтегі деректерде id болса, соны пайдаланыңыз:

<li key={user.id}>{user.name}</li>

2. index қолдану (тек соңғы амал ретінде):

Егер нақты id жоқ болса, index-ті қолдануға болады, бірақ бұл сенімді емес:

<li key={index}>{item}</li>

3. Тұрақты кілттер:

Кілттер элементтің реттілігі өзгергенде де тұрақты болуы керек.

Практикалық тапсырмалар:

1-тапсырма: Қарапайым массивті тізімге айналдыр

Тапсырма:

Массив: ['React', 'Vue', 'Angular']

Талап: Тізім құрып, кілттерді қосуды ұмытпа.

2-тапсырма: Объектілерден тізім құру

Тапсырма:

Пайдаланушылар массиві:

const users = [

  { id: 101, name: 'Alice' },

  { id: 102, name: 'Bob' },

];

Талап: id-ді кілт ретінде пайдалану.

3-тапсырма: Динамикалық кілттермен жұмыс

Тапсырма:

Массив:

const tasks = [

  { title: 'Learn React', status: 'Done' },

  { title: 'Practice', status: 'Pending' },

];

Талап: title-ды кілт ретінде қолдануға болмайды.

4-тапсырма: Кілттердің болмауынан туатын қателіктерді түзету

Тапсырма:

Төмендегі код қате жібереді:

const items = ['Pen', 'Book', 'Notebook'];

const list = items.map((item) => <li>{item}</li>);

Талап: Қателікті түзет.