DAY 13
1
Modern Web

## 祝大家 `2018新年快樂` =D 雖然是值得慶祝的日子 但挑戰還是依然要繼續 新的一年希望能夠在最開始就達成持續30天的小成就 那麼廢話不多說 下面正文開始啦~~~

React 也可以讓我們使用 **清單（Lists）**來擺放他們

# List

`map`是將陣列內容劃分逐一取出處理並放入一新陣列的函式

``````import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
render() {
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
}
export default App;
``````

``````import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
render() {
const numbers = [1, 2, 3, 4, 5];
return (
<ul>{
numbers.map((number) => <li> {number} </li>)
}</ul>
);
}
}
export default App;
``````

`Each child in an array or iterator should have a unique "key" prop.`

## Keys

React 清單的鍵值是一個 獨特的字串

React 濕背秀的 diff演算法

### Diff Algorithm

React 會先運行 diff演算法

DOM 之所以被說世界慢宇宙慢就是因為這樣

diff演算法在網頁刷新的時候

``````<div>
<Counter />
</div>

<span>
<Counter />
</span>
``````

``````<div className="before" title="stuff" />

<div className="after" title="stuff" />
``````

``````<div style={{color: 'red', fontWeight: 'bold'}} />

<div style={{color: 'green', fontWeight: 'bold'}} />
``````

diff演算法都還是能夠找出差異

### Using Keys

``````<ul>
<li>Duke</li>
<li>Villanova</li>
</ul>

<ul>
<li>Connecticut</li>
<li>Duke</li>
<li>Villanova</li>
</ul>
``````

diff演算法比較差異是從根的部分開始

``````<ul>
<li>Connecticut</li>  // Duke → Connecticut
<li>Duke</li>         // Villanova → Duke
<li>Villanova</li>    // 新增 Villanova
</ul>
``````

``````<ul>
<li>Connecticut</li>  // 新增 Connecticut
<li>Duke</li>
<li>Villanova</li>
</ul>
``````

React 會透過鍵值去比對是不是同一個元素

React 也建議使用者自訂能夠被識別的特殊字串來當作鍵值

``````import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
render() {
const numbers = [1, 2, 3, 4, 5];
return (
<ul>{
numbers.map((number) =>
<li key = {number.toString()}> {number} </li>)
}</ul>
);
}
}
export default App;
``````

`key = {number.toString()}`就是設定鍵值的方式

``````import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
render() {
const numbers = [1, 2, 3, 4, 5];
const listItem = numbers.map((number)=>
<ListNumber key = { number.toString() } value = { number } />
);
return (
<ul>{listItem}</ul>
);
}
}

class ListNumber extends React.Component{
constructor(){
super();
}
render(){
return (
<li>{this.props.value}</li>
);
}
}
export default App;
``````

## ListNumber 是資料列提取出來的組件 主要只用來接收並產生出元素 鍵值的設定依然要放在資料列陣列的位置 也就是 App 組件內的 listItem 變數 執行結果： 那個有點討厭的 Warning 也就不見啦 以上就是 React 的清單和鍵值

Day13 end
by 瑞Ray ⎝( OωO)⎠

### 1 則留言

0
jackithome
iT邦新手 5 級 ‧ 2019-05-07 17:23:39