API

• 概览
      组件
          React.Component
          React.PureComponent(与Component相似，只是自带了shouldComponentUpdate() 的浅比较，某些情况可提高性能。
          React.memo(适用于函数组件，在props相同的情况记忆渲染结果来提高性能。)

• 创建React 元素
      React.createElement(type,[props],[...children])：创建并返回新的React元素

• 转换元素
      React.cloneElement(type,[props],[...children])：( 浅合并克隆React元素
      React.isValidElement() ：验证一个元素是否是React 元素。
      React.Children：获取当前React元素的子元素。

• Fragments
      减少不必要的嵌套：<React.Fragments></React.Fragments> 或 <></>

• Refs
      React.createRef：创建一个能够通过ref属性附加到React元素的ref
      React.forwardRef：创建可以将接收的ref下发到组件树的React组件。

• Suspense
     目前仅支持通过React.lazy 动态加载的组件。
     React.lazy()：定义一个动态加载的组件，可以减少bundle的体积，优化初次渲染效率。
       React.Suspense：组件渲染成功前

• ReactDOM
     ReactDOM提供了可以在顶层使用DOM的方法。
     render()：ReactDOM.render(element,container[,callback]) 在container内渲染React元素，回调会在渲染或更新后执行。
       React.hydrate()：与render用法相同，但是会在ReactDOMServer渲染的容器对HTML进行hydrate操作，React会尝试在已有的标记上绑定事件监听器
     React.unmountComponentAtNode()：从DOM中卸载组件，会将所有的state 和 事件处理器一并清除。
     React.createPortal()：提供一个将React元素渲染到其他DOM节点上的方式

• ReactDOMServer
     将组件渲染成静态标记，通常使用在node服务上。
     同时支持服务器和浏览器坏境：
        ReactDOMServer.renderToString(element)：将React元素渲染成为初始HTML，如果使用hydrate()方法，React则会保留节点且只进行事件绑定处理。
        ReactDOMServer.renderToStaticMarkup()：与renderToString相似，但却不会在React内部创建额外的DOM属性。
     只支持服务端环境：
        ReactDOMServer.renderToNodeStream(element)：将Reacty元素渲染成一个初始HTML，返回一个可输出HTML字符串的可读流，
        ReactDOMServer.renderToStaticNodeStream()：与renderToNodeStrream类似，但是不会创建额外的DOM属性。

• DOM元素
     React 有一套独立于浏览器的DOM系统，React中，所有的特性和属性（包括事件处理），都应该使用小写字母命名，但是依然可以使用aria-label和data-label。
     属性差异：
        checked：是受控组件，defaultChecked 则是非受控
        value：是受控组件，defaultValue 则是非受控
        className：用来指定class属性（因为class是关键字）
        dangerouslySetInnerHTML：React提供的innerHTML的替代方案
        <div dangerouslySetInnerHTML={__html: 'First &middot; Second'} />
      htmlFor：由于for在 JavaScript 中是保留字，所以 React 元素中使用了 htmlFor来代替
        onChange：故意没有使用浏览器已有的默认行为，是因为onChange在浏览器中的行为和名称不对应，并且 React 依靠了该事件实时处理用户输入
        selected：该属性设置组件是否被选择(受控组件)
        style：React中的style接收的是小驼峰命名属性的 JavaScript 对象
        suppressContentEditableWarning：当拥有子节点的元素被标记为 contentEditable时，React 会发出一个警告，因为这不会生效。该属性将禁止此警告。尽量不要使用该属性，除非你要构建一个类似 Draft.js的手动管理 contentEditable属性的库
        suppressHydrationWarning：如果设置 suppressHydrationWarning 为 true，React 将不会警告你属性与元素内容不一致。它只会对元素一级深度有效，并且打算作为应急方案

• 合成事件
      React 事件系统一部分的 SyntheticEvent 包装器，SyntheticEvent 实例将被传递给你的事件处理函数，它是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。
     如果因为某些原因，当你需要使用浏览器的底层事件时，只需要使用 nativeEvent 属性来获取即可。每个 SyntheticEvent 对象都包含以下属性：

       事件池：SyntheticEvent 是合并而来。这意味着 SyntheticEvent 对象可能会被重用，而且在事件回调函数被调用后，所有的属性都会无效。出于性能考虑，你不能通过异步访问事件
       如果你想异步访问事件属性，你需在事件上调用 event.persist()，此方法会从池中移除合成事件，允许用户代码保留对事件的引用。
       支持得事件：
           剪贴板事件：onCopy onCut onPaste
           复合事件：onCompositionEnd onCompositionStart onCompositionUpdate
           键盘事件：onKeyDown onKeyPress onKeyUp
           焦点事件：onFocus onBlur
           表单事件：onChange onInput onInvalid onReset onSubmit
           通用事件：onError onLoad
           鼠标事件：oonClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp
           指针事件：onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
           选择事件：onSelect
           触摸事件：onTouchCancel onTouchEnd onTouchMove onTouchStart
           UI 事件：onScroll
           滚轮事件：onWheel
           媒体事件：onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting
           图像事件：onLoad onError
           动画事件：onAnimationStart onAnimationEnd onAnimationIteration
           过渡事件：onTransitionEnd
           动画事件：onAnimationStart onAnimationEnd onAnimationIteration
           其他事件：onToggle

• Test Utilities
     ReactTestUtils 可搭配你所选的测试框架，轻松实现 React 组件测试。

• Test Renderer
     ReactTestUtils 提供了一个 React 渲染器，用于将 React 组件渲染成纯 JavaScript 对象，无需依赖 DOM 或原生移动环境。