React API
组件 API
setState
- 合并 nextState 和当前 state。
- 这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法。
- 另外,也支持可选的回调函数,该函数在 setState 执行完毕并且组件重新渲染完成之后调用
- 注意:
- 绝对不要直接改变 this.state,
- setState() 不会立刻改变 this.state,而是创建一个即将处理的 state 转变。在调用该方法之后获取 this.state 的值可能会得到现有的值,而不是最新设置的值。
- setState() 将总是触发一次重绘,除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。
- 如果使用可变的对象,但是又不能在 shouldComponentUpdate() 中实现这种逻辑,仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。
replaceState
- 类似于
setState(),但是删除之前所有已存在的 state 键,这些键都不在 nextState 中。
forceUpdate()
render()方法从this.props或者this.state之外的地方读取数据,你需要通过调用forceUpdate()告诉 React 什么时候需要再次运行render()。- 如果直接改变了
this.state,也需要调用forceUpdate() - 调用
forceUpdate()将会导致render()方法在相应的组件上被调用,并且子级组件也会调用自己的render(),但是如果标记改变了,那么 React 仅会更新 DOM
getDOMNode
- 如果组件已经挂载到了 DOM 上,该方法返回相应的本地浏览器 DOM 元素。
- 从 DOM 中读取值的时候,该方法很有用,比如获取表单字段的值和做一些 DOM 操作。
- 当
render返回null或者false的时候,this.getDOMNode()返回null。
isMounted
- 如果组件渲染到了 DOM 中,
isMounted()返回 true。可以使用该方法保证setState()和forceUpdate()在异步场景下的调用不会出错
setProps
- 调用
setProps()来改变组件的属性,触发一次重新渲染。 - 另外,可以传递一个可选的回调函数,该函数将会在
setProps完成并且组件重新渲染完成之后调用 - 刚方法仅在根组件上面调用。也就是说,仅在直接传给
React.render()的组件上可用,在它的子级组件上不可用。如果你倾向于在子组件上使用setProps(),不要利用响应式更新,而是当子组件在render()中创建的时候传入新的 prop 到子组件中。
replaceProps
- 类似于
setProps(),但是删除所有已存在的 props,而不是合并新旧两个 props 对象
顶层 API
React.createClass
- 创建一个组件类,并作出定义。组件实现了
render()方法,该方法返回一个子级。 - 该子级可能包含很深的子级结构。
- 组件与标准原型类的不同之处在于,你不需要使用 new 来实例化。 组件是一种很方便的封装,可以(通过 new )为你创建后台实例。
React.createElement
- 创建并返回一个新的指定类型的
ReactElement。 - type 参数可以是一个 html 标签名字字符串(例如,“div”,“span”,等等),或者是
ReactClass(通过React.createClass创建的)。
React.createFactory
- 返回一个生成指定类型 ReactElements 的函数。比如
React.createElement, - type 参数可以是一个 html 标签名字字符串(例如,“div”,“span”,等等),或者是
ReactClass。
React.render
- 渲染一个 ReactElement 到 DOM 中,放在
container指定的 DOM 元素下,返回一个到该组件的引用。 - 如果 ReactElement 之前就被渲染到了
container中,该函数将会更新此 ReactElement,仅改变需要改变的 DOM 节点以展示最新的 React 组件。 - 如果提供了可选的回调函数,则该函数将会在组件渲染或者更新之后调用。
React.unmountComponentAtNode
- 从 DOM 中移除已经挂载的 React 组件,清除相应的事件处理器和 state。
- 如果在 container 内没有组件挂载,这个函数将什么都不做。如果组件成功移除,则返回
true;如果没有组件被移除,则返回false。
React.renderToString
- 把组件渲染成原始的 HTML 字符串。该方法应该仅在服务器端使用。
- React 将会返回一个 HTML 字符串。你可以在服务器端用此方法生成 HTML,然后将这些标记发送给客户端,这样可以获得更快的页面加载速度,并且有利于搜索引擎抓取页面,方便做 SEO。
- 如果在一个节点上面调用
React.render(),并且该节点已经有了服务器渲染的标记,React 将会维护该节点,并且仅绑定事件处理器,保证有一个高效的首屏加载体验。
React.renderToStaticMarkup
- string renderToStaticMarkup(ReactElement element)
- 和
renderToString类似,除了不创建额外的 DOM 属性,例如data-react-id,因为这些属性仅在 React 内部使用。如果你想用 React 做一个简单的静态页面生成器,这是很有用的,因为丢掉额外的属性能够节省很多字节。
React.isValidElement
- boolean isValidElement(* object)
- 判断对象是否是一个 ReactElement。
React.DOM
React.DOM运用React.createElement为 DOM 组件提供了方便的包装。该方式仅在未使用 JSX 的时候适用。例如,React.DOM.div(null, 'Hello World!')。
React.PropTypes
React.PropTypes包含了能与组件propTypes对象共用的类型,用于验证传入组件的 props。更多有关propTypes的信息,参考复用组件。
React.initializeTouchEvents
- initializeTouchEvents(boolean shouldUseTouch)
- 配置 React 的事件系统,使 React 能处理移动设备的触摸( touch )事件。
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中仅有的子级。否则抛出异常。
React API的更多相关文章
- 一、基础知识 React API 一览
1.10 Hooks 参考文章:https://juejin.im/post/5be3ea136fb9a049f9121014 demo: /** * 必须要react和react-dom 16.7以 ...
- React学习系列一
系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初学者,英语也不是很好 ...
- [转] Immutable 详解及 React 中实践
https://zhuanlan.zhihu.com/p/20295971 作者:camsong链接:https://zhuanlan.zhihu.com/p/20295971来源:知乎著作权归作者所 ...
- React学习系列
React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...
- Immutable 详解及 React 中实践
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
- React——高阶组件
1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...
- 当初要是看了这篇,React高阶组件早会了
当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...
- 重谈react优势——react技术栈回顾
react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...
随机推荐
- 拓扑排序+数学+DP【洛谷P1685】 游览
P1685 游览 题目描述 顺利通过了黄药师的考验,下面就可以尽情游览桃花岛了! 你要从桃花岛的西头开始一直玩到东头,然后在东头的码头离开.可是当你游玩了一次后,发现桃花岛的景色实在是非常的美丽!!! ...
- 2019年GPLT L2-1 特立独行的幸福 比赛题解 中国高校计算机大赛-团体程序设计天梯赛题解
对一个十进制数的各位数字做一次平方和,称作一次迭代.如果一个十进制数能通过若干次迭代得到 1,就称该数为幸福数.1 是一个幸福数.此外,例如 19 经过 1 次迭代得到 82,2 次迭代后得到 68, ...
- [TJOI2013]松鼠聚会 BZOJ 3170
题目描述 草原上住着一群小松鼠,每个小松鼠都有一个家.时间长了,大家觉得应该聚一聚.但是草原非常大,松鼠们都很头疼应该在谁家聚会才最合理. 每个小松鼠的家可以用一个点x,y表示,两个点的距离定义为点( ...
- 牛客寒假算法基础集训营4 I Applese 的回文串
链接:https://ac.nowcoder.com/acm/contest/330/I来源:牛客网 自从 Applese 学会了字符串之后,精通各种字符串算法,比如……判断一个字符串是不是回文串. ...
- Flashcache的 KEEP属性自动失效
如果希望一个数据对象长期地缓存在flashcache中,则可以手动地将该数据对象的CELL_FLASH_CACHE属性设置为"keep". 其实需要说明的是,但不是数据对象的CEL ...
- php 安装扩展库
liunx系统 1. /usr/local/php/bin/php-config php 配置文件位置 [ php-config是一个脚本文件,用于获取所安装的php配置的信息 ] 在编译扩展时,如果 ...
- POJ2676 (数独问题 + DLX + 状态优化顺序)
(1)最简单的最是去暴力DFS搜索答案 , 很容易想到 , 每行每列的方式去搜索 , 不过效率是真的不行;但这个还是给出代码 ,毕竟打了也不容易呀! #include<cstdio> #i ...
- shell入门基础必备
作者:KornLee 2005-02-03 15:32:57 来自:Linux先生 1.建立和运行shell程序 什么是shell程序呢? 简单的说shell程序就是一个包含若干行 shel ...
- hive表多种存储格式的文件大小差异,无重复数据
-- 重点,目标表无重复数据 -- dbName.num_result 无重复记录 -- 插入数据 CREATE TABLE dbName.test_textfile( `key` string, ` ...
- python模块之wordcloud
wordcloud官方文档: http://amueller.github.io/word_cloud/generated/wordcloud.WordCloud.html#wordcloud.Wor ...