React从入门到精通系列之(24)DOM Elements

二十四、DOM Elements

React实现了一个独立于浏览器的DOM系统，用于提高性能和处理浏览器兼容性。 React作者借此机会在浏览器DOM实现中清理了一些粗糙的实现（恶心的原生DOM操作）。

在React中，所有DOM properties 和 attributes（包括event handle）都应该是驼峰命名法。例如，HTML属性tabindex对应于React中的tabIndex属性。特殊的是aria- *和data- *属性，应该是全部小写的。

Attributes的区别

有许多属性在React和HTML之间有不同的表现：

checked

checked属性在<input type="checkBox">或<input type="radio">中使用。您可以使用它来设置是否选中该组件。这对可控组件很有用。 defaultChecked是默认选中，它在首次装入组件时是默认选中的。

className

因为class是Javascript的关键字，所以在指定CSS类时，使用className属性。这适用于所有常规DOM和SVG元素，就像<div>，<a>或者其他标签。
如果使用React 和 Web Components（这是不常见的），请把ClassName改为class属性。

dangerouslySetInnerHTML

dangerouslySetInnerHTML是React替换在浏览器DOM中使用innerHTML。
一般来说，从代码设置HTML是有风险的，因为很容易无意中将用户暴露于跨站点脚本（XSS）攻击。所以，你可以直接从React设置HTML，但是你必须输入dangerouslySetInnerHTML并使用__html键传递一个对象，提醒自己这是危险的。例如：

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

function createMarkup() {
    return {__html: 'First <<>> Second'};
}
function MyComponent() {
    return <div dangerouslySetInnerHTML={createMarkup()} />;
}
ReactDOM.render(
    <MyComponent />,document.getElementById('root')
);

htmlFor

由于for是JavaScript中的保留字，React元素使用htmlFor。

onChanged

onChange事件的行为与您期望的一样：每当表单字段更改时，将触发此事件。我们故意不使用现有的浏览器行为，因为onChange是其行为的误称，React依赖此事件来实时处理用户输入。

selected

selected属性在<option>中使用。您可以使用它来设置是否选择了组件。这对控制类的组件很有用。

style

style属性接受一个驼峰命名法的JavaScript对象，而不是CSS字符串。这与DOM元素style的JavaScript属性一致，更高效，并防止XSS安全漏洞。例如：

const divStyle = {
    color: 'blue',backgroundImage: 'url' + imgUrl + ')',};
function HelloWorldComponent() {
    return <div style={divStyle}>HelloWorld</div>;
}

请注意，样式不自动设置css的前缀。要支持旧版本的浏览器，您需要提供相应的样式属性：

const divStyle = {
    WebkitTransition: 'all',msTransition: 'all',};
function ComponentWithTransition() {
   return <div style={divStyle}>This should work cross-browser</div>;
}

style的key是驼峰命名法，以便与从JS访问DOM节点上的属性（例如node.style.backgroundImage）一致。 ms以外的浏览器前缀应以大写字母开头。这就是为什么WebkitTransition有一个大写“W”。

value

<input>和<textarea>支持value属性。您可以使用它来设置元素的值。这对控制类组件很有用。 defaultValue是默认值，在组件首次装入时将会设置这个默认值。