Keys do ReactJS

keysO React é muito útil ao usar componentes criados dinamicamente ou quando a lista do usuário é alterada. DefiniçãokeyO valor manterá o componente alterado com uma identificação única.

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

Para cada valor de chave de cada elemento, obteremos o seguinte resultado.

Se, no futuro, adicionarmos ou removermos alguns elementos ou mudarmos a ordem dos elementos criados dinamicamente, o React usará esseskeyUse valores para rastrear cada elemento.