Keys في ReactJS

keysReact مفيد عند استخدام المكونات المُنشأة ديناميكياً أو عند تغيير القوائم بيد المستخدم. ضبطkeyالقيم ستُبقّى المكونات بمؤشرات فريدة.

استخدام Keys

App.jsx

import React from 'react';
class App extends React.Component {
　　　constructor() {}}
　　　　　　super();
　　　　　　this.state = {
　　　　　　　　　data:[
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　component: 'First...',
　　　　　　　　　　　　　　　id: 1
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　component: 'Second...',
　　　　　　　　　　　　　　　id: 2
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　component: 'Third...',
　　　　　　　　　　　　　　　id: 3
　　　　　　　　　　　　}
　　　　　　　　　]
　　　　　　}
　　　}
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　{this.state.data.map((dynamicComponent, i) => <Content　
　　　　　　　　　　　　　　　　　　key = {i} componentData = {dynamicComponent}/>)}
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Content extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<div>{this.props.componentData.component}</div>
　　　　　　　　　　　　<div>{this.props.componentData.id}</div>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));

للمفتاح الموجود لكل عنصر، سنحصل على النتيجة التالية.

إذا أضفنا أو قمنا بحذف بعض العناصر أو تغيير ترتيب العناصر المُنشأة ديناميكياً في المستقبل، سيستخدم React هذهkeyتتبع كل عنصر باستخدام القيمة.