Question

React 实现了一套与浏览器无关的 DOM 系统，兼顾了性能和跨浏览器的兼容性。在 React 和 Html 之间有许多属性的行为是不同的。

checked

checked 属性受类型为 checkbox 或 radio 的 <input> 组件的支持。你可以用它来设定是否组件是被选中的。这对于构建受控组件很有用。与之相对 defaultChecked 这是非受控组件的属性，用来设定对应组件首次装载时是否选中状态。

className

使用 className 属性指定一个 CSS 类。这个特性适用于所有的常规 DOM 节点和 SVG 元素，比如 <div> ， <a> 和其它的元素。

如果你在 React 中使用 Web 组件（这是一种不常见的使用方式），请使用 class 属性来代替。

dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 提供的替换浏览器 DOM 中的 innerHTML 接口的一个函数。一般而言，使用 JS 代码设置 HTML 文档的内容是危险的，因为这样很容易把你的用户信息暴露给 跨站脚本 攻击.所以，你虽然可以直接在 React 中设置 html 的内容，但你要使用 dangerouslySetInnerHTML 并向该函数传递一个含有 __html 键的对象，用来提醒你自己这样做很危险。例如：

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

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

htmlFor

因为 for 是在 javascript 中的一个保留字，React 元素使用 htmlFor 代替。

onChange

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}>Hello World!</div>;
}

注意样式不会自动补齐前缀。为了支持旧的浏览器，你需要手动提供相关的样式属性：

const divStyle = {
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

function ComponentWithTransition() {
  return <div style={divStyle}>This should work cross-browser</div>;
}

样式 key 使用小驼峰命名法是为了从 JS 中访问 DOM 节点的属性保持一致性（例如 node.style.backgroundImage ）。供应商前缀 除了 ms ，都应该以大写字母开头。这就是为什么 WebkitTransition 有一个大写字母 W 。

React 将自动添加一个"px"后缀到某些数字内联样式属性。如果你希望使用不同于"px"的其他单位，指定值为带渴望单位的字符串。例如：

// Result style: '10px'
<div style={ { height: 10 }}>
  Hello World!
</div>

// Result style: '10%'
<div style={ { height: '10%' }}>
  Hello World!
</div>

不是所有样式属性被转化为像素字符串，尽管如此。某些个保持无单位（例如 zoom , order , flex )。A complete list of 无单位属性 can be seen here .

value

value 属性受到 <input> 和 <textarea> 组件的支持。你可以使用它设置组件的值。这对构建受控组件非常有用。 defaultValue 属性对应的是非受控组件的属性，用来设置组件第一次装载时的值。

其他受支持的 HTML 属性

As of React 16, 任何标准的 或自定义的 DOM 属性都被充分支持。

React 总是提供一个以 JavaScript 为中心的 API 给 DOM。因为 React 组件对于自定义和 DOM 相关的属性都经常采用。React 使用小驼峰约定，正如 DOM API：

<div />      // Just like node.tabIndex DOM API
<div className="Button" /> // Just like node.className DOM API
<input readOnly={true} />  // Just like node.readOnly DOM API

这些属性的工作类似于对应的 HTML 属性，除了上述文档的特例。