楼主刚开始学习react,感受到了他的博大精深,看到很多莫名的用法,不知云云,找了很多没有找到参考手册,只有在中文社区和react官方看了一些,收集了一些比较常用的API,有补充的可以楼下评论补充。后面会继续更新的。
***************************************action****************************************
React 常用顶层API:
React.createClass:创建一个组件类,并作出定义。组件实现了 render()方法,该方法返回一个子级。该子级可能包含很深的子级结构。组件与标准原型类的不同之处在于,你不需要使用 new 来实例化;
ReactClass createClass(object specification)
React.createElement:创建并返回一个新的指定类型的 ReactElement。type 参数可以是一个 html 标签名字字符串(例如,“div”,“span”,等等),或者是 ReactClass (通过 React.createClass 创建的);
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
)
React.createFactory:返回一个生成指定类型 ReactElements 的函数。比如 React.createElement,type 参数可以是一个 html 标签名字字符串(例如,“div”,“span”,等等),或者是 ReactClass。
factoryFunction createFactory(
string/ReactClass type
)
React.render:渲染一个 ReactElement 到 DOM 中,放在 container 指定的 DOM 元素下,返回一个到该组件的引用。
如果 ReactElement 之前就被渲染到了 container 中,该函数将会更新此 ReactElement,仅改变需要改变的 DOM 节点以展示最新的 React 组件。
ReactComponent render(
ReactElement element,
DOMElement container,
[function callback]
)
React.unmountComponenAtNode:从 DOM 中移除已经挂载的 React 组件,清除相应的事件处理器和 state。如果在 container 内没有组件挂载,这个函数将什么都不做。如果组件成功移除,则返回 true;如果没有组件被移除,则返回 false。
boolean unmountComponentAtNode(DOMElement container)
React.renderToString:把组件渲染成原始的 HTML 字符串。该方法应该仅在服务器端使用。React 将会返回一个 HTML 字符串。你可以在服务器端用此方法生成 HTML,然后将这些标记发送给客户端,这样可以获得更快的页面加载速度,并且有利于搜索引擎抓取页面,方便做 SEO。
如果在一个节点上面调用 React.render(),并且该节点已经有了服务器渲染的标记,React 将会维护该节点,并且仅绑定事件处理器,保证有一个高效的首屏加载体验
string renderToString(ReactElement element)
React.isValidElement:判断对象是否是一个 ReactElement。
boolean isValidElement(* object)
React.DOM:React.DOM 运用 React.createElement 为 DOM 组件提供了方便的包装。该方式仅在未使用 JSX 的时候适用。例如,React.DOM.div(null, 'Hello World!')。
React.PropTypes:React.PropTypes 包含了能与组件 propTypes 对象共用的类型,用于验证传入组件的 props。更多有关 propTypes 的信息,
propTypes: { title: React.PropTypes.string.isRequired,},
React.initializeTouchEvents:配置 React 的事件系统,使 React 能处理移动设备的触摸( touch )事件。
initializeTouchEvents(boolean shouldUseTouch)
React.Children:
React.Children 为处理 this.props.children 这个封闭的数据结构提供了有用的工具。
React.Children.map
object React.Children.map(object children, function fn [, object context])
在每一个直接子级(包含在 children 参数中的)上调用 fn 函数,此函数中的 this 指向 上下文。如果 children是一个内嵌的对象或者数组,它将被遍历:不会传入容器对象到 fn 中。如果 children 参数是 null 或者undefined,那么返回 null 或者 undefined 而不是一个空对象。
React.Children.forEach
React.Children.forEach(object children, function fn [, object context])
类似于 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 中仅有的子级。否则抛出异常。
组件API:
setState:设置组件状态(改变),当状态改变时,改变部分重新渲染
setState(object nextState[, function callback])
replaceState:类似于 setState(),但是删除之前所有已存在的 state 键,这些键都不在 nextState 中
replaceState(object nextState[, function callback])
forceUpdate(): render() 方法从 this.props 或者 this.state 之外的地方读取数据,你需要通过调用 forceUpdate() 告诉 React 什么时候需要再次运行 render()。如果直接改变了 this.state,也需要调用 forceUpdate()。
getDOMNode:如果组件已经挂载到了 DOM 上,该方法返回相应的本地浏览器 DOM 元素。从 DOM 中读取值的时候,该方法很有用,比如获取表单字段的值和做一些 DOM 操作。当 render 返回 null 或者 false 的时候,this.getDOMNode() 返回null。
DOMElement getDOMNode()
isMounted():如果组件渲染到了 DOM 中,isMounted() 返回 true。可以使用该方法保证 setState() 和 forceUpdate() 在异步场景下的调用不会出错
bool isMounted()
插件工具(简介):
React.addons:是为了构建 React 应用而放置的一些有用工具的地方;
- TransitionGroup和CSSTransitionGroup,用于处理动画和过渡,这些通常实现起来都不简单,例如在一个组件移除之前执行一段动画。
- LinkedStateMixin,用于简化用户表单输入数据和组件 state 之间的双向数据绑定。
- classSet,用于更加干净简洁地操作 DOM 中的 class 字符串。
- cloneWithProps,用于实现 React 组件浅复制,同时改变它们的 props 。
- update,一个辅助方法,使得在 JavaScript 中处理不可变数据更加容易。
- PureRednerMixin,在某些场景下的性能检测器。
以下插件只存在于 React 开发版(未压缩):
- TestUtils, 简单的辅助工具,用于编写测试用例(仅存在于未压缩版).
- Perf,用于性能测评,并帮助你检查出可优化的功能点。
要使用这些插件,需要用 react-with-addons.js (和它的最小化副本)替换常规的React.js