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属性被支持