📌  相关文章
📜  反应键

📅  最后修改于: 2020-12-19 08:36:23             🧑  作者: Mango

反应键

密钥是唯一的标识符。在React中，它用于标识哪些项目已更改，更新或从列表中删除。当我们动态创建组件或用户更改列表时，这很有用。它还有助于确定需要重新呈现集合中的哪些组件，而不是每次都重新呈现整个组件集。

应该在数组内部提供键，以使元素具有稳定的标识。选择键作为唯一标识列表中项目的字符串的最佳方法。用下面的例子可以理解。

例

const stringLists = [ 'Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa' ]; 
  
const updatedLists = stringLists.map((strList)=>{ 
    
  •  {strList} 
    • ; 
});

    如果没有用于呈现项目的稳定ID，则可以将项目索引分配为列表的键。可以在下面的示例中显示。

    例

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

    注意：如果项目的顺序将来可能更改，则不建议对索引使用索引。这会给开发人员造成混乱，并可能导致组件状态出现问题。

    对组件使用键

    考虑您已经为ListItem创建了一个单独的组件，并从该组件中提取了ListItem。在这种情况下，您应该在数组的元素上分配键，而不是在ListItem本身的

  • 元素上分配键。为避免错误，您必须记住，键仅在周围数组的上下文中才有意义。因此，建议您从map()函数返回的任何内容都分配一个键。

    示例：不正确的密钥用法

    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.
    
  • 
      {item}
    
    • 
  );
}
function NameList(props) {
  const myLists = props.myLists;
  const listItems = myLists.map((strLists) =>
    // The key should have been specified here.
    
  );
  return (
    
    
        
    Incorrect Key Usage Example
    
              
      {listItems}
    
    
    
  );
}
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];
ReactDOM.render(
  ,
  document.getElementById('app')
);
export default App;

    在给定的示例中，列表已成功呈现。但是，我们没有为map()迭代器分配键不是一个好习惯。

    输出量

    示例：正确的密钥用法

    要更正上面的示例，我们必须将键分配给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.
    
  •  {item} 
    • 
  );
}
function NameList(props) {
  const myLists = props.myLists;
  const listItems = myLists.map((strLists) =>
    // The key should have been specified here.
    
  );
  return (
    
    
        
    Correct Key Usage Example
    
            
      {listItems}
    
    
    
  );
}
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];
ReactDOM.render(
  ,
  document.getElementById('app')
);
export default App;

    输出量

    兄弟姐妹间钥匙的唯一性

    我们已经讨论过，数组中的键分配在它们的同级之间必须是唯一的。但是，这并不意味着键应该是全局唯一的。我们可以在生成两个不同的数组时使用同一组键。在下面的示例中可以理解。

    例

    import React from 'react'; 
import ReactDOM from 'react-dom'; 
function MenuBlog(props) {
  const titlebar = (
    
      
      {props.data.map((show) =>
        
    1. 
          {show.title}
        
      2. 
      )}
    
    
  );
  const content = props.data.map((show) =>
    
    
      
    {show.title}: {show.content}
        
    
    
  );
  return (
    
    
      {titlebar}
      
    
      {content}
    
    
  );
}
const data = [
  {id: 1, title: 'First', content: 'Welcome to JavaTpoint!!'},
  {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(
  ,
  document.getElementById('app')
);
export default App;

    输出量