第五章，API

React.Component

当使用ES6时，它是所有组件的父类。

import React from 'react';

export default class MyComponent extends React.Component {
  render() {}
}

React.createClass

在不使用上面的ES6class语法时，可以使用该方法创建一个组件。

ReactClass createClass(object specification)

创建一个组件类，该组件类实现了render()方法并返回一个单根子节点(组件,多节点要包裹起来)。 组件类和普通JavaScript类不同点在于你不用使用new方法来实例化。

React.createElement

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

使用指定的类型来创建并返回一个新的ReactElement。类型参数可以是一个普通的HTML元素标签名称（例如： div,span）或者一个ReactClass。

React.cloneElement

ReactElement cloneElement(
  ReactElement element,
  [object props],
  [children ...]
)

用来克隆一个ReactElement。

React.createFactory

factoryFunction createFactory(string/ReactClass type)

返回一个生产ReactElement的方法。

React.isValidElement

boolean isValidElement(* object)

验证对象是否是标准的ReactElement。

React.DOM

React.DOM.Div(null, 'hello world')

这个API是给不使用JSX语法准备的，它是React.createElement的包装。

React.PropTypes

包含propTypes对象用来验证组件中props所有属性的类型信息。

React.Children

这个对象是操作不公开对象this.props.children的工具类。它有以下方法：

React.Children.map

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

React.Children.forEach

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

React.Children.count

number React.Children.count(object children)

React.Children.only

object React.Children.only(object children)

React.Children.toArray

array React.Children.toArray(object children)

ReactDOM

ReactDOM提供一些具体操作DOM的方法，大多数情况下用户组件内部不需要使用它。

ReactDOM.render

ReactComponent render(
  ReactElement element,
  DOMElement container,
  [function callback]
)

在给出的container中渲染一个ReactElement并返回它的引用。如果这个ReactElement之前已经在container中渲染过，它将只执行一个局部更新操作。

如果提供callback函数，这个函数将在渲染完成或者更新完成后被调用。

注意：该方法在执行时将会替换container中已经存在的DOM元素。

ReactDOM.unmountComponentAtNode

boolean unmountComponentAtNode(DOMElement container)

移除一个已经渲染的React组件并清理它的事件处理映射和状态处理映射。如果container中没有组件，该函数将不执行任何代码。

ReactDOM.findDOMNode

DOMElement findDOMNode(ReactComponent component)

这个方法用来查找并返回一个已经渲染的组件的原生DOM对象。这个方法常用来读取DOM额外的信息和操作DOM尺寸。大多数情况下，我们可以在DOM上添加ref来定位该DOM。

import React, {Component} from 'react';
import {findDOMNode} from 'react-dom';

export default class MyComponent extends Component {
  render() {
    return (
      <div>
         <input type="text" ref="ref_input" />
         <button onClick={this.handleOnClick}>Add</button>
      </div>
    );
  }

  handleOnClick = () => {
    const node = findDOMNode(this.refs.ref_input);
    const value = node.value.trim();

    console.log('input value=', value);
  }
}

推荐尽可能少的使用该方法来访问底层DOM，这种做法不符合组件化思想。

如果在没有渲染的组件上使用该方法将会抛出异常。

该方法不能使用在无状态的组件上。

ReactDOMServer

react-dom/server包能让你在服务器端渲染你的组件。

ReactDOMServer.renderToString

string renderToString(ReactElement element)

渲染一个组件并返回它的HTML代码。主要是对搜索引擎爬虫，SEO友好。

ReactDOMServer.renderToStaticMarkup

string renderToStaticMarkup(ReactElement element)

大体和renderToString相同，但是不会在DOM上创建额外的属性比如data-react-id，这些属性仅供React内部使用。这能节省很多页面开销。