一、描述

React 实现了独立于浏览器的 DOM 系统,来实现性能和跨浏览器兼容性。同时,在自己实现的 DOM 系统中,清理了一些粗糙的属性等。

在 React 中,所有的 DOM 属性和 attributes(包括事件处理)都应该是驼峰法,例如:HTML 属性 tabIndex 对应 React 中的 tabIndex。而 aria-*data-* 属性比较特殊,它们应该是小写的。例如 aria-label 就应该还是 aria-label

二、与浏览器 DOM 体系的差异

1、checked

checkbox 或者 radio 类型的 <input> 组件支持 checked 属性。可以通过 checked 属性来判断 DOM 组件是否处于选中状态。这对于构建可控组件非常有帮助。而 defaultchecked 是不受控制的等效属性,用来初始化 checked 属性。

2、className

如果要给 DOM 组件指定 css 类属性,需要使用 className 属性,所有的 DOM 和 SVG 元素都应该使用。如果是将 React 组件和 Web 原生组件混用的话(很少见的情况)又需要使用 class 属性

3、dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品。通常,从代码设置 HTML 是有很大风险的,因为很容器无意中将用户暴露给跨站脚本(XSS)攻击,所以 React 才给了这么长的一个属性,而且生命了 dangerous。虽然可以直接从 React 设置 HTML,但是必须用 dangerouslySetInnerHTML 并使用 __html 作为 key 传递对象,来提醒自己这很危险:

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

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

4、htmlFor

由于 for 是 JavaScript 的保留字,因此 React 元素组件中需要使用 htmlFor 来代替 for

5、onChange

onChange 事件的行为和期望是一样的:当表单字段发生更改的时候就会触发。因此 onChange 和浏览器的 onchange 不是一个概念,浏览器上是 oninput 和其表现差不多,因此虽然叫 onChange 但是是处理实时输入的。

5、selected

selected<option> 组件支持的选择属性,可以使用它来设置是否选择了组件。同样的用来构造可空组件非常有用。

6、style

React 文档中指出,虽然在文档中有很多 style 控制的样式,但是不应该将 style 作为样式设置的主要方法。在大多数情况下,className 应该引用于外部 css 样式表中定义的类。样式最常用于 React 应用程序,以在渲染时添加动态计算样式。更多的信息可以看 React 关于 style 和 css 的文档:https://reactjs.org/docs/faq-styling.html

style 属性接收具有驼峰法属性而不是css字符串的 javascriot 对象,这和 DOM 样式的 javascript 属性表示一直,效率更高,并且可以防止 XSS 安全漏洞:

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

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

需要注意的是 style 属性不会进行 autoprefixed,如果要支持旧版浏览器,就需要提供相应的样式属性:

因此从这点上来说,还是使用 class 靠谱一些。

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>;
}

style 对象中的 key 是驼峰法的,以便和 js 访问 DOM 节点上的属性保持一致(比如 node.style.backgroundImage)。除了 微软之外的内核前缀都应该以答谢字母开头,因此 WebkitTransition 是以大写 W 开头的原因。

React 会自动为某些数字内联样式属性附加 px 后缀,如果想要使用 px 以外的单位,需要将值写成字符串的形式:10%

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

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

但是并不是所有的属性都会转换成像素字符串,一些值仍然是无单位的(比如:zoomotherflex)。具体的无单位属性列表可以在https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59看到。

7、suppressContentEditableWarning

通常来说,当带有子项的元素也标记为 contentEidtable 时会发出警告,因为它是无效的。suppressContentEditableWarning 这个属性会禁止使用警告。除非你正在构建想 Draft.js 这样的库来手动管理 contentEditable,否则不要使用。

8、suppressHydrationWarning

如果使用服务器渲染,通常在服务器和客户端渲染不同内容的时候会发出警告。但是,在极少数情况下,很难或者不可能保证完全匹配。比如服务器和客户端的时间戳可能会不相同。

如果将 suppressHydrationWarning 设置为 true,则 React 不会警告属性和该元素的内容不匹配。它只能在一层使用,并且可以用作 escape hatch,但是注意不能使用过度。你可以在 ReactDOM.hydrate() 文档中阅读有关 hydrate 更多信息

9、value

<input><textarea> 组件支持 value 属性,你可以使用他来设置组件的值,这对于构建可空组件很有帮助。 而 defaultValue 则是在构建不可控组件的时候作为默认值传入。

三、所有支持的 HTML 属性

React 16 开始,完全支持任何标准或自定义的 DOM 属性。

React 一直为 DOM 提供以 JavaScript 为中心的 API。由于 React 组件通常同时使用自定义和 DOM 相关的 props,因此 React 使用 camelase 约定,和 DOM API 差不多:

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

这些 props 的工作方式与相应的 HTML 属性类似,但上面列出的特殊情况除外(aria-xxx)。

React 支持的 DOM attribute 包括:

accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap

SVG 支持的属性包括:

accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight
clip clipPath clipPathUnits clipRule colorInterpolation
colorInterpolationFilters colorProfile colorRendering contentScriptType
contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
end exponent externalResourcesRequired fill fillOpacity fillRule filter
filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy
g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef
gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic
imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength
kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor
limitingConeAngle local markerEnd markerHeight markerMid markerStart
markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode
numOctaves offset opacity operator order orient orientation origin overflow
overlinePosition overlineThickness paintOrder panose1 pathLength
patternContentUnits patternTransform patternUnits pointerEvents points
pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits
r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions
requiredFeatures restart result rotate rx ry scale seed shapeRendering slope
spacing specularConstant specularExponent speed spreadMethod startOffset
stdDeviation stemh stemv stitchTiles stopColor stopOpacity
strikethroughPosition strikethroughThickness string stroke strokeDasharray
strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity
strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor
textDecoration textLength textRendering to transform u1 u2 underlinePosition
underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic
vHanging vIdeographic vMathematical values vectorEffect version vertAdvY
vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

在使用自定义属性的时候,需要保证他们是完全小写的。