React API

1、React 高阶API

react是React库的入口点。通过<script>标签加载React，这些高阶API可用于全局React。还是可以使用ES6的import React from 'react'。ES5可以通过 var React = require('react')加载。

1.1、Components

• React.Component: React组件的基类

  class example extends React.Component {    render() {        return <h1>Hello world!</h1>;}

• React.PureComponent: 与React.Component基本相同，但它可以通过prop和state的浅对比来实现shouldComponentUpdate()

如果React组件的 render() 函数在给定相同的props和state下渲染为相同的结果，在某些场景下你可以使用 React.PureComponent 来提升性能。React.PureComponent 的shouldComponentUpate()会忽略整个组件的子级，因此，它的所有子级组件也应该是’Pure’的。

React.PureComponent的适用场景：简单的数据props和state。

class example extends React.PureComponent {
render() {
return <h1>Hello world!</h1>;
}


1.2、Creating React Elements

下面的这些方法是在不使用JSX语法的时候使用的。JSX其实是他们的语法糖.

• createElements()

  这个方法会创建一个新的React element

  React.createElement(        type,//为html标签名称的字符串表示'span'，也可以是一个React组件        [props],        [...children]    );

• createFactory()

  过时的用法

  React.createFactory(type);

1.3、Transforming Elements

• cloneElement()

  React.cloneElement(    element,    [props],    [...children]);

  以元素作为基点，克隆并返回一个新的React元素。在克隆的过程中，会浅合并原始元素的props和新提供的props,然后将合并后的props作为新元素的props>。新的children会替换现有的children。来自原始元素的key和ref都会保留下来

  React.cloneElement()相当于：

  <element.type {...element.props} {...props}>{children}</element.type>

• isValidElement()

  React.isValidElement(object)

  用来验证一个对象是不是React元素，返回一个bool值。

• React.Children

  React.Children提供了处理this.props.children这个不透明数据结构的工具

  React.Children.map

  遍历children,可以为数组和对象。

  React.Children.map(children, function[(thisArg)])

  当children为null或undefined，会返回null或是undefined,不会返回一个空数组。

  React.Children.forEach

  React.Children.forEach(children, function[(thisArg)])

  类似于React.Children.map，但是并不返回数组。

  React.Children.count

      React.Children.count(children);

  返回children中子级的个数。

  React.Children.only

  React.Children.only(children)

  返回children里仅有的子级。否则会抛出异常。

  React.Children.toArray

  React.Children.toArray(children);

  返回一个为children的每一项都添加了key的不透明数据结构的扁平化数组。

2、React.Component

class example extends React.Component {    render(){        return <h1>Hello World!</h1>    }}

2.1、生命周期方法

装配

• constructor()

      class example extends React.Component {        constructor(props){            super(props);//在其他所有表达式之前调用            this.state = {                color: props.initialColor            };            this.handleClick = this.handleClick.bind(this);        }        render(){}    }

  constructor()构造函数会在装配之前被调用。当为一个React.Component子类定义构造函数时，你应该在任何其他的表达式之前调用super(props)。否则，this.props在构造函数中将是未定义，并可能引发异常。
  构造函常用来初始化state、绑定处理函数的作用域到实例。

• componentWillMount()

  class example extends React.Component {    constructor(props){}    componentWillMount(){}    render(){}}

  • componentWillMount()在装配发生前被立刻调用。其在render()之前被调用，因此在这方法里同步地设置状态将不会触发重渲。
  • 这是唯一的会在服务端渲染调起的生命周期钩子函数。通常地，我们推荐使用constructor()来替代。

• render()

  此方法是必须
  该方法被调用时，会检查this.props和this.state，然后返回一个单一的React元素。当不想渲染任何东西到UI的时候，就返回null或false。

• componentDidMount()

  class example extends React.Component {    componentDidMount(){}    render(){}}

  componentDidMount()在组件被装配后立即调用。初始化使得DOM节点应该进行到这里。若你需要从远端加载数据，这是一个适合实现网络请求的地方。在该方法里设置状态将会触发重渲。

更新

• componentWillReceiveProps()

  class example extends React.Component {    componentWillReceiveProps(nextProps){//新的props        this.props//当前的props    }    render(){}}

  • componentWillReceiveProps()在装配了的组件接收到新属性前调用。若你需要更新状态响应属性改变（例如，重置它），你可能需对比this.props和nextProps并在该方法中使用this.setState()处理状态改变。
  • 注意即使属性未有任何改变，React可能也会调用该方法，因此若你想要处理改变，请确保比较当前和之后的值。这可能会发生在当父组件引起你的组件重渲。
  • 在 装配期间，React并不会调用带有初始属性的componentWillReceiveProps方法。它仅在组件的props会更新时被调用。调用this.setState通常不会触发componentWillReceiveProps。

• shouldComponentUpdate()

  shouldComponentUpdate(nextProps, nextState){}

  • 使用shouldComponentUpdate()以让React知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重渲，在大部分情况下你应该依赖于默认行为。
  • 当接收到新属性或状态时，shouldComponentUpdate() 在渲染前被调用。默认为true。该方法并不会在初始化渲染或当使用forceUpdate()时被调用。
  • 当他们状态改变时，返回false 并不能阻止子组件重渲。
  • 当前，若shouldComponentUpdate()返回false，而后componentWillUpdate()，render()， 和 componentDidUpdate()将不会被调用。注意，在未来React可能会将shouldComponentUpdate()作为一个线索而不是一个严格指令，返回false可能仍然使得组件重渲。
  • 在观察后，若你判定一个具体的组件很慢，你可能需要调整其从React.PureComponent继承，其实现了带有浅属性和状态比较的shouldComponentUpdate()。若你确信想要手写，你可能需要用this.props和nextProps以及this.state 和 nextState比较，并返回false以告诉React更新可以被忽略。

• componentWillUpdate()

  componentWillUpdate(nextProps, nextState)

  • 当接收到新属性或状态时，componentWillUpdate()为在渲染前被立即调用。在更新发生前，使用该方法是一次准备机会。该方法不会在初始化渲染时调用。
  • 注意你不能在这调用this.setState()，若你需要更新状态响应属性的调整，使用componentWillReceiveProps()代替。

• render()

• componentDidUpdate()

  componentDidUpdate(prevProps, prevState)

  • componentDidUpdate()会在更新发生后立即被调用。该方法并不会在初始化渲染时调用。
  • 当组件被更新时，使用该方法是操作DOM的一次机会。这也是一个适合发送请求的地方，要是你对比了当前属性和之前属性（例如，如果属性没有改变那么请求也就没必要了）。

卸载

• componentWillUnmount()

  componentWillUnmount()

  componentWillUnmount()在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作，例如解绑定时器，取消网络请求，清理任何在componentDidMount环节创建的DOM元素。

2.2、其他API

• setState()

  setState(updater, [callback]){}

  setState()将需要处理的变化塞入（setState源码中将一个需要改变的变化存放到组件的state对象中，采用队列处理）组件的state对象中， 并告诉该组件及其子组件需要用更新的状态来重新渲染。这是用于响应事件处理和服务端响应的更新用户界面的主要方式。
  将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为客观的性能，React可能会推迟它，稍后会一次性更新这些组件。React不会保证在setState之后，能够立刻拿到改变的结果。

  setState()不是立刻更新组件。其可能是批处理或推迟更新。这使得在调用setState()后立刻读取this.state的一个潜在陷阱。代替地，使用componentDidUpdate或一个setState回调（setState(updater, callback)），当中的每个方法都会保证在更新被应用之后触发。若你需要基于之前的状态来设置状态，阅读下面关于updater参数的介绍。

  第一个函数是带签名的updater函数，此函数返回一个对象：

  (prevState, props) => stateChange

  prevState是之前状态的引用。其不应该被直接改变。代替地，改变应该通过构建一个来自于prevState 和 props输入的新对象来表示。例如，假设我们想通过props.step在状态中增加一个值：

  this.setState((prevState, props) => {  return {counter: prevState.counter + props.step}; //返回一个对象});

  updater函数接收到的prevState 和 props保证都是最新的。updater的输出是和prevState的浅合并。

  setState()的第二个参数是一个可选地回调函数，其将会在setState执行完成同时组件被重渲之后执行。通常，对于这类逻辑，我们推荐使用componentDidUpdate。

  你可以选择性地传递一个对象作为 setState()的第一个参数而不是一个函数：

  setState(stateChange, [callback])

  其仅是将stateChange**浅合并**到新状态中。例如，调整购物车中物品数量：

  this.setState({quantity: 2})

  这一形式的setState()也是异步的，并在相同的周期中多次调用可能会被合并到一起。例如，若你在相同的周期中尝试多次增加一件物品的数量，其等价于：

  Object.assign(  previousState,  {quantity: state.quantity + 1},  {quantity: state.quantity + 1},  ...)

  之后的调用在同一周期中将会重写之前调用的值，因此数量仅会被加一。若之后的状态依赖于之前的状态，我们推荐使用updater函数形式：

  this.setState((prevState) => {  return {counter: prevState.quantity + 1};});

• forceUpdate()

  component.forceUpdate(callback)

  默认情况，当你的组件或状态发生改变，你的组件将会重渲。若你的render()方法依赖其他数据，你可以通过调用forceUpdate()来告诉React组件需要重渲。

  调用forceUpdate()将会导致组件的 render()方法被调用，并忽略shouldComponentUpdate()。这将会触发每一个子组件的生命周期方法，涵盖，每个子组件的shouldComponentUpdate() 方法。若当标签改变，React仅会更新DOM。

  通常你应该尝试避免所有forceUpdate() 的用法并仅在render()函数里从this.props和this.state读取数据。

2.3、类属性

• defaultProps

  defaultProps可以被定义为组件类的一个属性，用以为类设置默认的属性。这对于未定义（undefined）的属性来说有用，而对于设为空（null）的属性并没用。例如：

  class CustomButton extends React.Component {  // ...}CustomButton.defaultProps = {  color: 'blue'};

  若未设置props.color，其将被设置默认为’blue’:

  render() {    return <CustomButton /> ; // props.color will be set to blue  }

  若props.color设为null，则其值则为null：

  render() {    return <CustomButton color={null} /> ; // props.color will remain null  }

• displayName

  displayName被用在调试信息中。JSX会自动设置该值；

2.4、实例属性

• props

  this.props包含了组件该调用者定义的属性。

  特别地，this.props.children是一个特别属性，其通常由JSX表达式中的子标签定义，而不是标签本身。

• state

  状态是该组件的特定数据，其可能改变多次。状态由用户定义，且其应为纯JavaScript对象。

  若你不在render()方法中使用它，其不应该该被放在状态上。例如，你可直接将timer IDs放在实例上

  永远不要直接改变this.state，因为调用setState()会替换你之前做的改变。将this.state当成不可变的。

3、ReactDOM

与react一样，react-dom也有三种引入方式。

• render()

  ReactDOM.render(  element,  container,  [callback])

  渲染一个React元素到containerDom元素中，一般使用document.getElementById('selector')。并返回这个组件的一个 引用 (或者对于无状态组件返回null).

  如果这个React元素之前已经被渲染到container里去了，这段代码就会进行一次更新，并且只会改变那些反映元素最新状态所必须的DOM元素。也就是局部更新。

  回调函数是可选的。如果你提供了，程序会在渲染或更新之后执行这个函数。

  注：

  ReactDOM.render() 控制你传进来的容器节点里的的内容。第一次被调用时，内部所有已经存在的DOM元素都会被替换掉。之后的调用会使用React的DOM比较算法进行高效的更新。
  ReactDOM.render()不会修改容器节点（只修改容器的子项）。你可以在不覆盖已有子节点的情况下添加一个组件到已有的DOM节点中去。
  ReactDOM.render() 目前会返回一个引用， 指向 ReactComponent的根实例。但是这个返回值是历史遗留，应该避免使用。因为未来版本的React可能会在某些情况下进行异步渲染。如果你真的需要一个指向 ReactComponent 的根实例的引用，推荐的方法是添加一个 callback ref到根元素上。

• unmountComponentAtNode()

  ReactDOM.unmountComponentAtNode(container)

  从DOM元素中移除已挂载的React组件，清除它的事件处理器和state。如果容器内没有挂载任何组件，这个函数什么都不会干。 有组件被卸载的时候返回true，没有组件可供卸载时返回 false。

• findDOMNode()

  ReactDOM.findDOMNode(component)

  如果这个组件已经被挂载到DOM中，函数会返回对应的浏览器中生成的DOM元素 。 当你需要从DOM中读取值时，比如表单的值，或者计算DOM元素的尺寸，这个函数会非常有用。 大多数情况下，你可以添加一个指向DOM节点的引用，从而完全避免使用findDOMNode 这个函数. 当 render 返回 null 或者 false 时, findDOMNode 也返回 null.

  注：

  findDOMNode 是用于操作底层DOM节点的备用方案。在大部分情况下都不提倡使用这个方案，因为它破坏了组件的抽象化。
  findDOMNode 只对挂载过的组件有效（也就是已经添加到DOM中去的组件）。如果你试图对一个未挂载的组件调用这个函数 （比如在一个还未创建的组件的 render() 函数中中调用 findDOMNode()），程序会抛出一个异常。
  findDOMNode 不能用于函数式的组件中。

4、ReactDOMServer

如果你通过 <script> 标签加载React，这些高阶API可用于 ReactDOMServer 全局。如果你使用ES6，你可以写成 import ReactDOMServer from 'react-dom/server'。如果你使用ES5，你可以写成 var ReactDOMServer = require('react-dom/server')。

ReactDOMServer 类可以让你在服务端渲染你的组件

• renderToString()

  ReactDOMServer.renderToString(element)

  把一个React元素渲染为原始的HTML。这个方法最好只在服务端使用。React将会返回一段HTML字符串。你可以用这个方法在服务端生成HTML，并根据初始请求发送标记来加快页面的加载速度，同时让搜索引擎可以抓取你的页面来达到优化SEO的目的。

  如果在一个已经有了服务端渲染标记的节点上调用 ReactDOM.render() ，React将保留该节点，仅作绑定事件处理，这会让你有一个非常高效的初次加载体验。

• renderToStaticMarkup()

  ReactDOMServer.renderToStaticMarkup(element)

  类似 renderToString，但是不会创建额外的DOM属性，例如 data-reactid 这些仅在React内部使用的属性。如果你希望把React当作一个简单的静态页面生成器来使用，这很有用，因为去掉额外的属性可以节省很多字节。

5、DOM Elements

React实现了一套与浏览器无关的DOM系统，兼顾了性能和跨浏览器的兼容性。借此机会，我们清理了浏览器DOM实现中一些不一致的问题。

在React中，所有的DOM特性和属性（包括事件处理函数）都是小驼峰命名法命名。比如说，与HTML中的tabindex属性对应的React实现命名则是tabIndex。aria-*和data-*属性是例外的，一律使用小写字母命名。

5.1、React和HTML DOM属性的区别

有许多的属性在React和Html之间行为是不一样的：

checked属性

<input>标签type属性值为checkbox或radio时，支持checked属性。这对于构建受控组件很有用。与之相对defaultChecked这是非受控组件的属性，用来设定对应组件首次加载时是否选中状态。

类名属性

在React中，使用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 &middot; Second'};}function MyComponent() {  return <div dangerouslySetInnerHTML={createMarkup()} />;}

htmlFor

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

onChange函数

onChange事件处理函数的表现正如你所期望的：无论form表单何时发生变化，这个事件都会被触发。我们特意不使用浏览器已有的默认行为，因为onChange在浏览器中的表现和这个名字不相称，而且React真实依靠这个事件实现了对用户输入的实时响应处理。

selected

<option>组件支持selected 属性 。 当组件被选中时，你可以用它来设置。这经常被用来构建受控组件。

style属性

style属性接受一个键为小驼峰命名法命名的javascript**对象**作为值，而不是像css字符串。这和DOM中style属性接受javascript对象对象key的命名方式保持一致性，更高效而且能够防止跨站脚本（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。

suppressContentEditableWarning

一般来说，当一个拥有子节点的元素被标记为contentEditable时，React会发出一个警告信息，因为此时contentEditable是无效的。这个属性会触发这样的警告信息。一般不要使用这个属性。

value

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

5.2、所有受支持的HTMl属性

React支持一下所有的属性，同时也支持所有的data-* 和 aria-*属性：

accept acceptCharset accessKey action allowFullScreen allowTransparency altasync autoComplete autoFocus autoPlay capture cellPadding cellSpacing challengecharSet checked cite classID className colSpan cols content contentEditablecontextMenu controls coords crossOrigin data dateTime default defer dirdisabled download draggable encType form formAction formEncType formMethodformNoValidate formTarget frameBorder headers height hidden high href hrefLanghtmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind labellang list loop low manifest marginHeight marginWidth max maxLength mediamediaGroup method min minLength multiple muted name noValidate nonce openoptimum pattern placeholder poster preload profile radioGroup readOnly relrequired reversed role rowSpan rows sandbox scope scoped scrolling seamlessselected shape size sizes span spellCheck src srcDoc srcLang srcSet start stepstyle summary tabIndex target title type useMap value width wmode wrap

React也支持一下这些RDFa属性（有几个RDFa属性和HTML属性重叠，所以不包含在以下列表中）：

about datatype inlist prefix property resource typeof vocab

而且，React也支持下列非标准属性：

• autoCapitalize autoCorrect for Mobile Safari.
• color for <link rel="mask-icon" /> in Safari.
• itemProp itemScope itemType itemRef itemID for HTML5 microdata.
• security for older versions of Internet Explorer.
• unselectable for Internet Explorer.
• results autoSave for WebKit/Blink input fields of type search.

5.3、所有受支持的SVG属性

accentHeight accumulate additive alignmentBaseline allowReorder alphabeticamplitude arabicForm ascent attributeName attributeType autoReverse azimuthbaseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeightclip clipPath clipPathUnits clipRule colorInterpolationcolorInterpolationFilters colorProfile colorRendering contentScriptTypecontentStyleType cursor cx cy d decelerate descent diffuseConstant directiondisplay divisor dominantBaseline dur dx dy edgeMode elevation enableBackgroundend exponent externalResourcesRequired fill fillOpacity fillRule filterfilterRes filterUnits floodColor floodOpacity focusable fontFamily fontSizefontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fyg1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRefgradientTransform gradientUnits hanging horizAdvX horizOriginX ideographicimageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLengthkerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColorlimitingConeAngle local markerEnd markerHeight markerMid markerStartmarkerUnits markerWidth mask maskContentUnits maskUnits mathematical modenumOctaves offset opacity operator order orient orientation origin overflowoverlinePosition overlineThickness paintOrder panose1 pathLengthpatternContentUnits patternTransform patternUnits pointerEvents pointspointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnitsr radius refX refY renderingIntent repeatCount repeatDur requiredExtensionsrequiredFeatures restart result rotate rx ry scale seed shapeRendering slopespacing specularConstant specularExponent speed spreadMethod startOffsetstdDeviation stemh stemv stitchTiles stopColor stopOpacitystrikethroughPosition strikethroughThickness string stroke strokeDasharraystrokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacitystrokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchortextDecoration textLength textRendering to transform u1 u2 underlinePositionunderlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabeticvHanging vIdeographic vMathematical values vectorEffect version vertAdvYvertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacingwritingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrolexlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBasexmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

5、SyntheticEvent

此参考指南记录了构成React一部分事件系统的SyntheticEvent封装器

您的事件处理函数将会接收SyntheticEvent的实例，一个基于浏览器原生事件的跨浏览器实现。它拥有和浏览器原生事件一样的接口，包括stopPropagation()和preventDefault()，除了那些所有浏览器功能一样的事件。

出于某些原因，你得使用一些底层的浏览器事件，只需用nativeEnvent的属性就能找到。每个SyntheicEvent对象都有如下属性：

boolean bubblesboolean cancelableDOMEventTarget currentTargetboolean defaultPreventednumber eventPhaseboolean isTrustedDOMEvent nativeEventvoid preventDefault()boolean isDefaultPrevented()void stopPropagation()boolean isPropagationStopped()DOMEventTarget targetnumber timeStampstring type

事件池

SyntheticEvent是共享的。那就意味着在调用事件回调之后，SyntheticEvent对象将会被重用，并且所有属性会被置空。这是出于性能因素考虑的。 因此，您无法以异步方式访问事件。

function onClick(event) {  console.log(event); // => nullified object.无效对象  console.log(event.type); // => "click"  const eventType = event.type; // => "click" 保存在常量中  setTimeout(function() {    console.log(event.type); // => null 无法以异步方式访问事件    console.log(eventType); // => "click"  }, 0);  // Won't work. this.state.clickEvent will only contain null values.  this.setState({clickEvent: event});  // You can still export event properties.  this.setState({eventType: event.type});}

注：

如果您想以异步的方式访问事件的属性值，你必须在事件回调中调用event.persist()方法，这样会在池中删除合成事件，并且在用户代码中保留对事件的引用。

支持的事件

React标准化了事件，使其在不同的浏览器中拥有一致的属性。

下面的事件处理函数由冒泡阶段的事件触发。在事件名后面加Capture就能在事件捕获阶段注册事件处理函数。举个例子，你可以使用onClickCapture代替onClick在事件捕获阶段来处理点击事件。

• Clipboard Events 剪贴板事件
• Composition Events
• Keyboard Events
• Focus Events
• Form Events
• Mouse Events
• Selection Events
• Touch Events
• UI Events
• Wheel Events
• Media Events
• Image Events
• Animation Events
• Transition Events

Clipboard Events 剪贴板事件

事件名:

onCopy onCut onPaste

属性：

DOMDataTransfer clipboardData

Composition Events

事件名:

onCompositionEnd onCompositionStart onCompositionUpdate

属性：

string data

Keyboard Events 键盘事件

事件名:

onKeyDown onKeyPress onKeyUp

属性：

boolean altKeynumber charCodeboolean ctrlKeyboolean getModifierState(key)string keynumber keyCodestring localenumber locationboolean metaKeyboolean repeatboolean shiftKeynumber which

Focus Events 焦点事件

事件名:

onFocus onBlur

注：

这些焦点事件适用于React DOM中的所有元素，而不仅仅是表单元素。

属性：

DOMEventTarget relatedTarget

Form Events 表单事件

事件名:

onChange onInput onSubmit

Mouse Events 鼠标事件

事件名:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExitonDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeaveonMouseMove onMouseOut onMouseOver onMouseUp

onMouseEnter 和 onMouseLeave 事件由失去焦点的元素到正在输入的元素传播，并不是普通的冒泡，也没有捕获阶段。
属性：

boolean altKeynumber buttonnumber buttonsnumber clientXnumber clientYboolean ctrlKeyboolean getModifierState(key)boolean metaKeynumber pageXnumber pageYDOMEventTarget relatedTargetnumber screenXnumber screenYboolean shiftKey

Selection Events 选择事件

事件名:

onSelect

Touch Events 触摸事件

事件名:

onTouchStart onTouchMove onTouchEnd onTouchCancel

属性：

boolean altKeyDOMTouchList changedTouchesboolean ctrlKeyboolean getModifierState(key)boolean metaKeyboolean shiftKeyDOMTouchList targetTouchesDOMTouchList touches

UI Events UI事件

事件名:

onScroll

属性：

* *

事件名:

属性：

number detailDOMAbstractView view

Wheel Events 转动事件

事件名:

onWheel

属性：

number deltaModenumber deltaXnumber deltaYnumber deltaZ

Media Events 媒体事件

事件名:

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting

Image Events 图像事件

事件名:

onLoad onError

Animation Events 动画事件

事件名:

onAnimationStart onAnimationEnd onAnimationIteration

属性：

string animationNamestring pseudoElementfloat elapsedTime

Transition Events 变换事件

事件名:

onTransitionEnd

属性：

string propertyNamestring pseudoElementfloat elapsedTime

二级标题

二级标题

三级标题

四级标题

注：