react隨筆7 列表&Keys

列表 & Keys

在JavaScript中map()函數(shù)可以對數(shù)組中的每一項元素進行定義操作,比如對數(shù)組中的元素都翻倍:

const numbers = [1,2,3];
const doubled = numbers.map(number => number * 2);
console.log(doubled);

那么輸出的結果是[2,4,6];
在React中算色,可能需要的操作是把數(shù)組轉換成數(shù)列元素的過程窃植,可以認為是*React元素的數(shù)組狡忙。

渲染多個組件

比如說現(xiàn)在有一個數(shù)組[1,2,3],可能經(jīng)過渲染后需要的是一個元素數(shù)組闯割,如多個<li>1</li>這種曙咽,如下:

const numbers = [1,2,3];
const listItems = numbers.map(number => <li>{number}</li>);

ReactDOM.render(
  <ul>{listItems}</ul>, document.getElementById('root') 
);

如下圖:


image.png

基礎列表組件

如果需要渲染這種列表,最好是將列表渲染到一個組件中涤浇,進行了組件的抽象。
根據(jù)上邊的例子魔慷,其實就是將數(shù)組轉變成列表元素的過程封裝到一個組件中只锭,組件接受一個numbers數(shù)組作為參數(shù),最后渲染后輸出一個列表院尔。如下:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map(number => <li>{number}</li>);
  return <ul>{listItems}</ul>;
}

const numbers = [1,2,3];
ReactDOM.render(
  <NumberList numbers={numbers} />, document.getElementById('root')
);

但這樣其實蜻展,在返回的列表元素中,每個元素應該指定一個key邀摆,如:

numbers.map(number => <li key="abc">{number}</li>);

key值建議是一個字符串纵顾,并且在這個列表中是唯一的。

Keys

Keys可以在DOM中的某些元素被增加或者刪除的時候幫助React識別哪些元素發(fā)生了變化栋盹。在一個列表中施逾,每個元素最好擁有唯一的字符串形式的key值。當然如果沒有具體的值來作為key值時例获,可以使用列表元素的序號索引作為key值汉额。

numbers.map((number,index) => <li key={index.toString()}>{number}</li>);

關于Keys的深度解讀和算法原理,可以參考深度解析key的必要性榨汤。

元素的key只有放在其環(huán)繞數(shù)組的上下文中才有意義蠕搜。
比如,提取了一個ListItem組件收壕,那么key應該放在<ListItem />這個元素上妓灌,而不是ListItem中的<li>元素上轨蛤。

  • 不正確是使用方式
function ListItem(props) {
  const value = props.value;
  return (
    // 錯啦!你不需要在這里指定key:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    //錯啦虫埂!元素的key應該在這里指定:
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);
  • 正確的使用方式
function ListItem(props) {
  // 對啦祥山!這里不需要指定key:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 又對啦!key應該在數(shù)組的上下文中被指定
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

一個好的大拇指法則:元素位于map()方法內(nèi)時需要設置鍵屬性告丢。
key的值需要在同一個列表中也就是兄弟元素之間保持唯一即可枪蘑,不用全局保持唯一。
不過需要注意的是岖免,key是作為給React提示的岳颇,不會傳遞給組件,也就是使用組件的props對象是拿不到key值的颅湘。如下圖:

image.png

可以看到執(zhí)行結果话侧,冒號":"后面的值并沒有輸出。
如上圖中的代碼闯参,可以將map()函數(shù)嵌入到JSX語法的大括號{}中瞻鹏。
image.png

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市鹿寨,隨后出現(xiàn)的幾起案子新博,更是在濱河造成了極大的恐慌,老刑警劉巖脚草,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件赫悄,死亡現(xiàn)場離奇詭異,居然都是意外死亡馏慨,警方通過查閱死者的電腦和手機埂淮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來写隶,“玉大人倔撞,你說我怎么就攤上這事∧脚浚” “怎么了痪蝇?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長秩贰。 經(jīng)常有香客問我霹俺,道長,這世上最難降的妖魔是什么毒费? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任丙唧,我火速辦了婚禮,結果婚禮上觅玻,老公的妹妹穿的比我還像新娘想际。我一直安慰自己培漏,他們只是感情好,可當我...
    茶點故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布胡本。 她就那樣靜靜地躺著牌柄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪侧甫。 梳的紋絲不亂的頭發(fā)上珊佣,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天,我揣著相機與錄音披粟,去河邊找鬼咒锻。 笑死,一個胖子當著我的面吹牛守屉,可吹牛的內(nèi)容都是我干的惑艇。 我是一名探鬼主播,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼拇泛,長吁一口氣:“原來是場噩夢啊……” “哼滨巴!你這毒婦竟也來了?” 一聲冷哼從身側響起俺叭,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤恭取,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后熄守,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體秽荤,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年柠横,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片课兄。...
    茶點故事閱讀 39,977評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡牍氛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出烟阐,到底是詐尸還是另有隱情搬俊,我是刑警寧澤,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布蜒茄,位于F島的核電站唉擂,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏檀葛。R本人自食惡果不足惜玩祟,卻給世界環(huán)境...
    茶點故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望屿聋。 院中可真熱鬧空扎,春花似錦藏鹊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至撮慨,卻和暖如春竿痰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背砌溺。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工影涉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人抚吠。 一個月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓常潮,卻偏偏與公主長得像楷力,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子萧朝,可洞房花燭夜當晚...
    茶點故事閱讀 44,927評論 2 355