React學習——Day4

一、將普通字符串數組轉爲JSX數組並渲染到頁面上

方案一、使用forEach

<script type="text/babel">
    const film = ['瘋狂原始人', '帕丁頓熊2', '靈魂擺渡黃泉', '神祕巨星'];
    // 方案一：外部for循環
    const jsxFilm = [];
    film.forEach(item => {
        const temp = <h5 key={item}>{item}</h5>;
        jsxFilm.push(temp);
    });

    ReactDOM.render(
        jsxFilm,
        document.getElementById('app')
    );
</script>

方案二、使用map

<script type="text/babel">
    const film = ['瘋狂原始人', '帕丁頓熊2', '靈魂擺渡黃泉', '神祕巨星'];
    ReactDOM.render(
        film.map(item => {
            return <h5 key={item}>{item}</h5>;
        }),
        document.getElementById('app')
    );
</script>

推薦使用map方法。效果如下：

二、請加key值

細心的小夥伴可能已經發現，在以上兩種方案中，我們都爲將要渲染到頁面上的JSX數組元素指定了一個key值。那麼爲什麼要爲其加一個key值呢？
舉個例子：
一個頁面由一個輸入文本框、一個按鈕和一個通過for循環生成的checkbox組成。功能是用戶在文本框中輸入值，單擊按鈕可以添加到下面的列表中。我們知道，checkbox是有選中和未選中兩種狀態的，當向列表的首部插入項時，如果不爲各元素提供key，會造成之前的狀態發生移動（狀態默認跟隨數組索引移動，因爲在數組首部插入項，導致之前各個項的索引發生變化，狀態紊亂）。如果沒有看明白，請移步：演示key的作用
簡言之，如果需要保持頁面元素的狀態，請爲其提供key；否則可能會導致狀態的紊亂。始終爲map直接控制的元素提供key是一種好的編程習慣。以上直接將數組項設置爲key，大多數情況我們是指定數組元素的id作爲key。