React 列表 & Keys 简单演示

使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import PropTypes from 'prop-types';

const arr=[1,2,3,4,5];
const items=arr.map(val=>
  <li>{val}</li>
)

  ReactDOM.render(
    <div>
      <ul>
        {items}
      </ul>
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();

将以上实例重构成一个组件，组件接收数组参数，每个列表元素分配一个 key
不然会出现警告 a key should be provided for list items，意思就是需要包含 key

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import PropTypes from 'prop-types';

function NumList(props){
  const arr=props.arr;
  const items=arr.map(val=>
    <li key={val.toString()}>{val}</li>
  )

  return(
    <ul>{items}</ul>
  )
}

const arr=[11,22,33];
  ReactDOM.render(
    <div>
      <NumList arr={arr}/>
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();

Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化
一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常使用来自数据的 id 作为元素的 key
当元素没有确定的 id 时，可以使用序列号索引 index 作为 key
如果列表可以重新排序，不建议使用索引来进行排序，因为这会导致渲染变得很慢

数组元素中使用的 key 在其兄弟之间应该是独一无二的。
然而，它们不需要是全局唯一的。当生成两个不同的数组时，可以使用相同的键。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import PropTypes from 'prop-types';

function Blogs(props){
  const left=(
    <ul>
      {
        props.posts.map(val=>
          <li key={val.id}>{val.title}</li>
        )
      }
    </ul>
  )

  const right=props.posts.map(val=>
    <div key={val.id}>
      <h3>{val.title}</h3>
      <p>{val.content}</p>
    </div>
  )

  return(
    <div>
      {left}
      <hr/>
      {right}
    </div>
  )
}

const posts=[
  {id:1,title:'title1',content:'content1'},
  {id:2,title:'title2',content:'content2'}
];

  ReactDOM.render(
    <div>
      <Blogs posts={posts}/>
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();

key 会作为给 React 的提示，但不会传递给组件。
如果组件中需要使用和 key 相同的值，需要作为属性传递

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

JSX 允许在大括号中嵌入任何表达式

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import PropTypes from 'prop-types';

function NumList(props){
  const list=props.list;
  return(
    <ul>
    {list.map(val=>
      <li key={val.toString()}>{val}</li>
    )}
    </ul>
  )
}

const lists=['a','b','c'];

  ReactDOM.render(
    <div>
      <NumList list={lists}/>
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();