key ها در ری اکت

امید کیانی 169 بازدید 1398/07/18
key ها در ری اکت

یک کلید یک شناسه منحصر به فرد است که در react برای شناسایی مواردی که در حال تغییر،بروزرسانی و یا حذف از لیست هستند،استفاده می شوند.کلیدها مفید هستند هنگامی که ما یک کامپوننت را به صورت پویا ایجاد می کنیم و یا هنگامی که کاربران یک لیست را تغییر می دهند.

کلیدها باید درون یک آرایه داده شوند تا عناصر یک هویت پایدار داشته باشند.بهترین راه برای انتخاب یک کلید به عنوان یک رشته این است که به صورت منحصر به فرد موارد موجود در لیست را مشخص می کند.

به مثال زیر توجه کنید:

const stringLists = [ 'Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa' ];   
    
const updatedLists = stringLists.map((strList)=>{   
    <li key={strList.id}> {strList} </li>;   
});

در صورت عدم وجود یک شناسه ی پایدار برای موارد ارائه شده،ما می توانیم index را به عنوان کلید به آرایه اختصاص دهیم.آن در مثال زیر قابل مشاهده است:

const stringLists = [ 'Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa' ];   
    
const updatedLists = stringLists.map((strList, index)=>{   
    <li key={index}> {strList} </li>;   
});

به این نکته توجه کنید که اگر ممکن است در آینده ترتیب یک آیتم تغییر کند،استفاده از index برای کلیدها توصیه نمی شود.این برای توسعه دهندگان کمی گیج کننده است و ممکن است باعث ایجاد مشکلاتی در مورد state ها در کامپوننت شود.

 

استفاده از کلیدها در کامپوننت

فرض کنید شما یک کامپوننت جداگانه برای ListItem ایجاد کرده اید و ListItem را از آن کامپوننت استخراج کرده اید.در این حالت ما باید کلیدها را به عناصر </ListItem> در آرایه اختصاص دهیم نه به عناصر <li> در ListItem خودش.

برای جلوگیری از بروز خطا باید در نظر داشته باشیم که کلیدها تنها در زمینه ی آرایه معنی دارند.به طوری که توصیه می شود هر چیزی که ما از تابع ()map برمی گردانیم،یک کلید به آن اختصاص دهیم.

مثال:استفاده نادرست از key

import React from 'react';   
import ReactDOM from 'react-dom';   
  
function ListItem(props) {  
  const item = props.item;  
  return (  
    // Wrong! No need to specify the key here.  
    <li key={item.toString()}>  
      {item}  
    </li>  
  );  
}  
function NameList(props) {  
  const myLists = props.myLists;  
  const listItems = myLists.map((strLists) =>  
    // The key should have been specified here.  
    <ListItem item={strLists} />  
  );  
  return (  
    <div>  
        <h2>Incorrect Key Usage Example</h2>  
            <ol>{listItems}</ol>  
    </div>  
  );  
}  
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];  
ReactDOM.render(  
  <NameList myLists={myLists}/>,  
  document.getElementById('app')  
);  
export default App;

در مثال بالا لیست با موفقیت render شد اما این راه خوبی نیست که ما keys را به تابع ()map اختصاص نداده ایم.

خروجی:

 

مثال:استفاده درست از key

برای اصلاح مثال بالا ما باید key را به تابع ()map اختصاص دهیم:

import React from 'react';   
import ReactDOM from 'react-dom';   
  
function ListItem(props) {  
  const item = props.item;  
  return (  
    // No need to specify the key here.  
    <li> {item} </li>  
  );  
}  
function NameList(props) {  
  const myLists = props.myLists;  
  const listItems = myLists.map((strLists) =>  
    // The key should have been specified here.  
    <ListItem key={myLists.toString()} item={strLists} />  
  );  
  return (  
    <div>  
        <h2>Correct Key Usage Example</h2>  
            <ol>{listItems}</ol>  
    </div>  
  );  
}  
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];  
ReactDOM.render(  
  <NameList myLists={myLists}/>,  
  document.getElementById('app')  
);  
export default App;

خروجی:

 

منحصر به فرد بودن keyها در میان Sibling ها 

ما در مورد منحصر به فرد بودن key ها در میان Sibling های آنها صحبت کرده ایم.هر چند که آن به این معنی نیست که باید key ها به صورت globally منحصر به فرد باشند.ما می توانیم برای تولید دو آرایه ی مختلف از یک سری key استفاده کنیم.به مثال زیر توجه کنید:

import React from 'react';   
import ReactDOM from 'react-dom';   
function MenuBlog(props) {  
  const titlebar = (  
    <ol>  
      {props.data.map((show) =>  
        <li key={show.id}>  
          {show.title}  
        </li>  
      )}  
    </ol>  
  );  
  const content = props.data.map((show) =>  
    <div key={show.id}>  
      <h3>{show.title}: {show.content}</h3>      
    </div>  
  );  
  return (  
    <div>  
      {titlebar}  
      <hr />  
      {content}  
    </div>  
  );  
}  
const data = [  
  {id: 1, title: 'First', content: 'Welcome to Laraman!!'},  
  {id: 2, title: 'Second', content: 'It is the best ReactJS Tutorial!!'},  
  {id: 3, title: 'Third', content: 'Here, you can learn all the ReactJS topics!!'}  
];  
ReactDOM.render(  
  <MenuBlog data={data} />,  
  document.getElementById('app')  
);  
export default App;

خروجی: 

این بود مفهوم key های یک آرایه در react.

مقالات مرتبط
حمید تیموری 449 بازدید 1397/10/10
امید کیانی 237 بازدید 1398/06/10
حمید تیموری 1906 بازدید 1397/07/09
حمید تیموری 176 بازدید 1398/09/16
امید کیانی 141 بازدید 1398/06/17
نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید