2018-08-03

第5天 抽空看了一下 React 列表和键（keys）

• 在 React 中，转换数组为元素列表的方式 ？
  答：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  
{number}
);

多组件渲染，可以创建元素集合，并用一对大括号 {} 在 JSX 中直接将其引用即可。

ReactDOM.render(
  
{listItems}
,
  document.getElementById('root')
);

• 当创建元素列表时，“key” 是一个你需要包含的特殊字符串属性。
  键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识。挑选 key 最好的方式是使用一个在它的同辈元素中不重复的标识字符串。

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  

    {todo.text}
  
);

如果列表项的顺序可能改变，我们不建议使用索引作为 keys。这可能会对性能产生负面影响，并可能导致组件状态问题。

• 在数组中使用的 keys 必须在它们的同辈之间唯一。然而它们并不需要全局唯一。我们可以在操作两个不同数组的时候使用相同的 keys ：

• 键是React的一个内部映射，但其不会传递给组件的内部。如果你需要在组件中使用相同的值，可以明确使用一个不同名字的 prop 传入。

const content = posts.map((post) =>
  
);

上面的例子中， Post 组件可以读取 props.id，但是不能读取 props.key 。

• 在 JSX 中嵌入 map() ?
  答：

function NumberList(props) {
  const numbers = props.numbers;
  return (
    

      {numbers.map((number) =>
        

      )}
    
  );
}