節點屬性渲染

需要注意jsx語法的元素屬性

• 由於jsx語法是和js語法相包容的，所以，jsx裡的語法會和js的語法相沖突，比如說，元素的屬性值class和js裡的關鍵字class重名，所以，html的元素在jsx的語法裡，使用這些屬性名的時候就要注意與js的關鍵字等衝突，這裡的class被替換成了className：

<script type="text/babel">
    const element = (
        <div>
            <h2 class="active">Hello word!</h2>
        <
 
/div>
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

即便是因為某些原因使其生效了，但是並不符合規範！！！

• 除此之外，還有很多基本的元素也需要注意：

<script type="text/babel">
    const element = (
        <div>
            <h2 className="active"> Hello word!</h2>
 

            <input type="button" value="按鈕">
            <input type="checkbox" name="ipt" id="ipt" checked/>
        </div>
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

• 也比如label的for：

<script type="text/babel">
    const
 
 element = (
        <div>
            <h2 className="active">Hello word!</h2>
            <label for="ipt">單選按鈕</label>
            <input type="checkbox" name="ipt" id="ipt" defaultChecked />
        </div>
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

jsx的語法相對html是較嚴格的，標籤必須規範，自閉和標籤必須閉合等。

react的語法提示也是非常親民，不用過於擔心。

列表渲染

• 如果是陣列，自動根據key值遍歷：

<script type="text/babel">
    const arr = [
        1,
        2,
        3
    ]
    const arr2 = [
        'a',
        'b',
        'c'
    ]
    const arrLi = [
        <li key="1">1</li>,
        <li key="2">2</li>,
        <li key="3">3</li>
    ]
    const element = (
        <div>
            {arrLi}
            {arr}
            {arr2}
        </div>
    );
    ReactDOM.render(element,document.querySelector("#app"))
</script>

當然，這些無效的陣列可以通過map方法重新打包成<li>{number}</li>的jsx物件，然後返回給渲染的元素。

• 如果是物件：

<script type="text/babel">
     const obj = [
         {
             name:'Bob',
             age:'18',
             sex:'女'
         },
         {
             name:'Lucy',
             age:'16',
             sex:'女'
         },
         {
             name:'Atom',
             age:'80',
             sex:'男'
         }
     ]
     const element = []
     obj.forEach((item,index)=>{
         element.push(<li key={index}>name:{item.name} - age:{item.age} - sex:{item.sex}</li>);
         //如果渲染的是陣列，一定要在每一個渲染物件裡插入key，作為遍歷參考！不然會報錯
     })
     ReactDOM.render(element,document.querySelector("#app"))
 </script>

為什麼渲染列表需要鍵入key值

• Keys可以在DOM中的某些元素被增加或刪除的時候幫助React識別哪些元素髮生了變化。因此你應當給陣列中的每一個元素賦予一個確定的標識。
• 一個元素的key最好是這個元素在列表中擁有的一個獨一無二的字串。通常，我們使用來自資料的id作為元素的key:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

• 元素的key只有在它和它的兄弟節點對比時才有意義。

比方說，如果你提取出一個ListItem元件，你應該把key儲存在陣列中的這個<ListItem />元素上，而不是放在ListItem元件中的<li>元素上。

• 如果使用元件化思想，你定義了一個list的元件，用於列表的渲染：

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

• 正確的使用方式

<script type="text/babel">
    function ListItem(props) {
        // 對啦！這裡不需要指定key:
        return <li>{props.value}</li>;
    }

    function NumberList(props) {
        const numbers = props.numbers;
        const listItems = numbers.map((number) =>
            //key應該在陣列的上下文中被指定
            <ListItem key={number.toString()} value={number} />
        );
        console.log(listItems);
        
        return (
            <ul>
                {listItems}
            </ul>
        );
    }

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

• 因為本來渲染的時候這個key是用來和兄弟節點做對比，不會顯示到html頁面中作為一個key的屬性，所以，key載入li裡是不合適的，也會讓react進行不必要的識別，造成拖累效能，加在陣列上下文中則會更加方便react渲染和識別。

• 不管任何時候，key值應該都是保持唯一性的。

雖然上面用到了元件，但是元件本不難，看一下就知道怎麼做了，後面再出詳細的筆記。