楼主刚开始学习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

 

React常用的API说明的更多相关文章

  1. 【转】React 常用面试题目与分析

    作者:王下邀月熊链接:https://zhuanlan.zhihu.com/p/24856035来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 本文有一定概率为水文,怕 ...

  2. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  3. vue 和 react 常用包(插件、组件 或 工具)

    vue 和 react  都可以使用的包(只是 纯 js 功能的包) 1.qs : https://blog.csdn.net/sansan_7957/article/details/82227040 ...

  4. Appium常用的API函数

    在学习应用一个框架之前,应该了解一下这个框架的整体结构或是相应的API函数.这篇文章还不错:http://blog.sina.com.cn/s/blog_68f262210102vzf9.html,就 ...

  5. elasticsearch中常用的API

    elasticsearch中常用的API分类如下: 文档API: 提供对文档的增删改查操作 搜索API: 提供对文档进行某个字段的查询 索引API: 提供对索引进行操作,查看索引信息等 查看API: ...

  6. 第二篇、JavaScript常用的API

    下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属性操作 内容操作 css操作 位置大小 事件 DOM加载完毕 绑定上下文 去除空格 Ajax JS ...

  7. [Windows Phone]常用类库&API推荐

    原文 [Windows Phone]常用类库&API推荐 简介: 把自己的应用程序搭建在稳定的API之上,这会使得我们在开发时能把精力都集中在程序的业务逻辑之上,避免重复造轮子,并且使得程序结 ...

  8. 生活常用类API调用的代码示例合集:邮编查询、今日热门新闻查询、区号查询等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 邮编查询:通过邮编查询地名:通过地名查询邮编 今日热门新闻查询:提 ...

  9. Web自动化框架LazyUI使用手册(7)--浏览器常用操作API

      LazyUI框架中,BrowserEmulator类提供了大量的浏览器操作,常用的API列举如下: 1. 基本操作 /** * Open the URL * 打开一个URL * @param ur ...

随机推荐

  1. Java日期处理

    日常工作中经常遇到关于日期的处理,下面把自个写好的Java代码段分享一下,也当做自个的一个备份,同时也欢迎交流,如若分享请注明出处,谢谢. 1.返回两个时间段之间的月份: /** * 返回任意两个月份 ...

  2. 将公司的主要项目从eclipse迁移到android studio for mac环境(2)

    1.将eclipse 的 代码迁移到android studio的过程中,现在已经有了一个未优化版本能够在android studio使用,这时候,只需要将已优化版本的代码中的libs  res  s ...

  3. node模块函数图解

    已截图方式记录模块信息: HTTP模块: 对于网络返回处理状态封装了很多种,我已截图展现 以上状态也是在http协议中包含的状态. http函数: path模块:

  4. 为什么<b></b>不推荐使用

    曾经在网上看见说:不推荐是用b标签,咦,我好像用过不少,难道我又坑了别人……度娘是这样说的:只要是从网页的简洁性和搜索引擎的友好度来看的.<b>是加粗,和css的font-weight在视 ...

  5. Android -- 自定义控件(ImageButton)

    1. 效果图

  6. BZOJ1090: [SCOI2003]字符串折叠

    区间dp. 一种是分段dp[i][j]=min(dp[i][j],dp[i][k]+dp[k+1][j]); 一种是这一段可以缩写dp[i][j]=min(dp[i][j],dp[i][l]+2+ca ...

  7. 在list_*页面显示出一级栏目下的所有二级栏目

    <ul class="nav nav-pills nav-stacked"> {dede:channelartlist typeid='1,1'} <div cl ...

  8. easy ui插件

    简介: easy UI是类似于jQuery UI的插件库 注意:多脚本同时使用时,注意脚本冲突问题. 常用插件: 1.tree插件(tree插件实现动态树形菜单) 2.datagrid插件(datag ...

  9. [LintCode] Single Number 单独的数字

    Given 2*n + 1 numbers, every numbers occurs twice except one, find it. Have you met this question in ...

  10. 关于box-shadow属性的一点心得

    一般我用到box-shadow都是用于诸如按钮,文本块,某些图标,css类似为: box-shadow: 1px 1px 5px rgba(0, 0, 0, .8); 这样,样式看上去会更加柔和,或者 ...