Reac官网Top-Level API翻译

原文地址

React是React库的入口. 如果你正在用一个预编译包, 那它是全局可用的; 如果你正在用CommonJS 模块, 你可以用 require(), 引入它.

React

React.Component

class
这是React组件的基本类, 当你打算用ES6 的classes. 阅读Reusable Components, 可以了解如何在React中用ES6 classes. 想了解基本的class提供的方法, 请看 Component API

React.createClass

ReactClass createClass(object specification)
创建一个组件类, 给定了一个规范. 它这个组件实现了一个render方法, 这个方法返回单一的child. 这个child可以有人以深度的子结构. 他们是便利的包装器, 可以通过new, 为你构造返回实例.
更多关于这个对象的信息, 请看 Component Specs and Lifecycle(组件规则和生命周期)

React.createElement

第一个参数可以是html代码,也可以是React组件
第二个参数: 附加到这个ReactElement上的属性键值对
第三个参数: 是子节点, 相当于element.innerHTML

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

创建并且返回一个ReactElement. type这个参数可以是一个html标签名字(例如 ‘div’, ‘span’, etc), 或是一个ReactClass(可通过React.createClass创建).

React.cloneElement

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

用element参数为切入点, 克隆并返回一个新的ReactElement. 得到的元素有原始元素的属性, 也有合并进来的浅的新属性. 新的子属性会替换存在的子. 不像React.addons.cloneWithProps, key和ref 将会被保存. 它没有特定的行为去合并任何属性.
请看 v0.13 RC2 博客帖子了解更多详情

React.createFactory

factoryFunction createFactory(string/ReactClass type)

返回一个函数, 他将会生产出 ReactElement, 用所给的type参数. 很像React.createElement.

React.isValidElement

boolean isValidElement(*object)

验证一个对象是否是ReactElement

React.DOM

它提供了便利的包装器, 为DOM组件包装React.createElement. 当不使用JSX的时候,可以使用它. 例如, React.DOM.div(null, ‘Hello World!’)

React.PropTypes

它包括类型, 这些类型能够被一个组件的proTypes对象使用, 可以用来验证被传递到你的组件上的属性. 更多propTypes信息, 请看Reusable Components

React.Children

它提供了实用程序用来处理this.props.children这种不透明数据结构

React.Children.map

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

当每一个子被包含在children参数中, 会调用fn, this指向thisArg参数. 如果children是一个keyed fragment 或是数组, 他将会被遍历: fn将不会传递容器对象. 如果children是null或是undefined, 会返回null或undefined,而不是数组.

实例

var List = React.createClass(
          {
            render: function ()
            {
              return (
                <ol>
                {
                  this.props.children.map(function (child) {
                    return <li>{child}</li>
                  })
                }
                </ol>
              );
            }
        });


        ReactDOM.render(
          <List>
            <a href="#">百度</a>
            <a href="#">谷歌</a>
          </List>,
          document.getElementById("content")
        );

React.Children.forEach

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

和React.Children.map()相似,但是不会返回意识数组

React.Children.count

number React.Children.count(object children)

返回children中组件的总数,相当于传递到map或foreach中的回调函数被调用的次数.

React.Children.only

object React.Children.only(object children)

返回children中唯一的child. 否则抛出异常.

React.Children.toArray

array React.Children.toArray(object children)

返回children不透明数据结构, 带有keys的flat数组被分配到每一个子. 如果你想在你的render方法中操作children的集合, 它是挺有用的, 尤其是在你传递它下来之前, 如果你想重新排序或是切片this.props.children

ReactDOM

react-dom包提供了特定的DOM方法, 可以用在你的应用的顶层并且可以作为一个React模型之外的应急路径, 如果你需要的时候. 你的大多数的组件不应用到这个模块

ReactDOM.render

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

渲染一个React元素到container提供的DOM中, 并且返回一个组件的引用(或返回null,对于无状态组件).
如果ReactElement先前被渲染到了容器中, 他将会执行更新, 仅仅在必要时改变DOM以反映最新的React组件.
如果提供可选的callback这个参数, 在组件被渲染或是更新后,它将会被执行.

ReactDOM.unmountComponentAtNode

boolean unmountComponentAtNode(DOMElement container)

从DOM中 移除已挂载的React组件, 清空它的事件处理器和状态. 如果没有组件被挂载在容器中, 则调用function,什么都不做.
如果有一个组件被卸载,则返回true, 如果没有组件卸载,则返回false

ReactDOM.findDOMNode

DOMElement findDOMNode(ReactComponent component)

如果这个组件已经被挂载到DOM, 它会返回相应的本地浏览器DOM元素. 这个方法是有用的:在读取DOM的值, 例如表单字段的值, 和操作DOM 尺寸的时候. 在大多数时候, 你可以附加一个引用到DOM 节点上, 应该完全避免使用findDOMNode. 当render返回null或是false的时候, findDOMNode会返回null.

ReactDOMServer

react-dom/server包允许你在服务器上渲染你的组件

ReactDOMServer.renderToString

string renderToString(ReactElement element)

渲染ReactElement为它最初的HTML. 它只能用到服务器上. React会返回一个HMTL字符串. 你可以用这个方法在服务器上去生成HMTL, 在初始请求中下发标记可以让页面的加载更快, 并且允许搜索引擎检索你的页面为了更好的SEO. 如果你在一个节点上调用ReactDOM.render()方法, 并且这个节点有服务器呈现的标记, React会保存它 并且添加事件处理器, 让你有一个非常高性能的首加载体验.

ReactDOMServer.renderToStaticMarkup

string renderToStaticMarkup(ReactElement element)

类似于renderToString, 除了它不会创建额外的DOM 属性, 例如 data-react-id, React在内部使用它. 如果你想用React作为一个简单静态页面生成器, 是挺有用的. 因为剥离额外的属性能够节约大量的字节.