204-React DOM 元素

1、概述

　　爲了提升性能和跨瀏覽器兼容性，React實現了一個獨立於瀏覽器的DOM系統。

　　在React中，全部DOM屬性和屬性（包括事件處理程序）都應該是camelCased的。例如，HTML屬性tabindex對應於React中的屬性tabIndex。例外是aria- *和data- *屬性，它們應該是小寫的。例如，您能夠將aria標籤保留爲aria標籤。

2、屬性差別

React和HTML之間有許多不一樣的屬性：

2.一、checked（defaultChecked）

2.二、className【原class】

2.三、dangerouslySetInnerHTML

　　dangerouslySetInnerHTML是React在瀏覽器DOM中使用innerHTML的替代品。通常來講，從代碼中設置HTML是有風險的，由於很容易讓您的用戶無心中發現跨站腳本攻擊（XSS）。　所以，您能夠直接從React中設置HTML，但必須輸入危險的SetInnerHTML並使用__html鍵傳遞對象，以提醒本身危險。例如：

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

2.四、htmlFor【for】

2.五、onChange、selected，value（defaultValue）

2.六、style

　　在大多數狀況下，應該使用className來引用外部CSS樣式表中定義的類。style在React應用程序中最經常使用於在呈現時添加動態計算的樣式。

　　style屬性接受一個帶有camelCased屬性的JavaScript對象，而不是一個CSS字符串。這與DOM風格的JavaScript屬性一致，效率更高，而且能夠防止XSS安全漏洞。例如：

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

2.七、全部的Html屬性被支持