React常用的API说明
楼主刚开始学习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说明的更多相关文章
- 【转】React 常用面试题目与分析
作者:王下邀月熊链接:https://zhuanlan.zhihu.com/p/24856035来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 本文有一定概率为水文,怕 ...
- 微信小程序入门与实战 常用组件API开发技巧项目实战*全
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- vue 和 react 常用包(插件、组件 或 工具)
vue 和 react 都可以使用的包(只是 纯 js 功能的包) 1.qs : https://blog.csdn.net/sansan_7957/article/details/82227040 ...
- Appium常用的API函数
在学习应用一个框架之前,应该了解一下这个框架的整体结构或是相应的API函数.这篇文章还不错:http://blog.sina.com.cn/s/blog_68f262210102vzf9.html,就 ...
- elasticsearch中常用的API
elasticsearch中常用的API分类如下: 文档API: 提供对文档的增删改查操作 搜索API: 提供对文档进行某个字段的查询 索引API: 提供对索引进行操作,查看索引信息等 查看API: ...
- 第二篇、JavaScript常用的API
下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属性操作 内容操作 css操作 位置大小 事件 DOM加载完毕 绑定上下文 去除空格 Ajax JS ...
- [Windows Phone]常用类库&API推荐
原文 [Windows Phone]常用类库&API推荐 简介: 把自己的应用程序搭建在稳定的API之上,这会使得我们在开发时能把精力都集中在程序的业务逻辑之上,避免重复造轮子,并且使得程序结 ...
- 生活常用类API调用的代码示例合集:邮编查询、今日热门新闻查询、区号查询等
以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 邮编查询:通过邮编查询地名:通过地名查询邮编 今日热门新闻查询:提 ...
- Web自动化框架LazyUI使用手册(7)--浏览器常用操作API
LazyUI框架中,BrowserEmulator类提供了大量的浏览器操作,常用的API列举如下: 1. 基本操作 /** * Open the URL * 打开一个URL * @param ur ...
随机推荐
- C#连接Access数据库(详解)
做一个用VS2012的C#连接Access数据库的备忘, SQL数据库固然强大,有大微软的强力技术支持,LINQ的方便操作,但是如果写一个小程序对数据库方面没有什么大的要求的话,将来在数据库方面就可以 ...
- sprintf溢出的bug
向printf.sprintf这种函数在编译时很难检查错误,所以程序员必须小心.比如我就遇到了这样的bug: void test() { ]; sprintf(t,"); } //执行spr ...
- [工作中的设计模式]责任链模式chain
一.模式解析 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出这个请求的客户端并不知 ...
- tornado 学习笔记10 Web应用中模板(Template)的工作流程分析
第8,9节中,我们分析Tornado模板系统的语法.使用以及源代码中涉及到的相关类,而且对相关的源代码进行了分析.那么,在一个真正的Web应用程序中,模板到底是怎样使用?怎样被渲染? ...
- React Native开发之npm start加速
在Windows下好不容易安装好React Native环境之后,运行npm start,结果就是无限被等待,快的话160秒(将近3分钟啊....) 而Mac下因为有watchman所以是飞一样的速度 ...
- js模块化方案【转】
(function(){ var CENTER = new EvtCenter(); var Loaded={}; var Modules={}; function loadScript(name,u ...
- HTML常用属性
blue:蓝色 red:红色 yellow:黄色 green:绿色 white:白色 gray:灰色 /*去掉下划线*/ text-decoration: none; /*添加下划线*/ te ...
- Test Driven Development
链接:https://msdn.microsoft.com/zh-tw/library/dn743856.aspx
- NOIP2014初赛分数线及金华上线名单
NOIP2014初赛分数线及金华上线名单 分数线:提高组81.5,普及组93 这分数线还能再高些吗?悲催的浙江. 金华上线普及组名单: 地市 姓名 学校 年级 参赛语种 成绩 金华 成浩鹏 稠州丹溪校 ...
- LruCache为GridView异步加载大量网络图片
MainActivity如下: import android.os.Bundle; import android.widget.GridView; import android.app.Activit ...