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();