组件 API


setState

  1. 合并 nextState 和当前 state。
  2. 这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法。
  3. 另外,也支持可选的回调函数,该函数在 setState 执行完毕并且组件重新渲染完成之后调用
  4. 注意:
  • 绝对不要直接改变 this.state,
  • setState() 不会立刻改变 this.state,而是创建一个即将处理的 state 转变。在调用该方法之后获取 this.state 的值可能会得到现有的值,而不是最新设置的值。
  • setState() 将总是触发一次重绘,除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。
  • 如果使用可变的对象,但是又不能在 shouldComponentUpdate() 中实现这种逻辑,仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。

replaceState

  1. 类似于 setState(),但是删除之前所有已存在的 state 键,这些键都不在 nextState 中。

forceUpdate()

  1. render() 方法从 this.props 或者 this.state 之外的地方读取数据,你需要通过调用 forceUpdate() 告诉 React 什么时候需要再次运行 render()
  2. 如果直接改变了 this.state,也需要调用 forceUpdate()
  3. 调用 forceUpdate() 将会导致 render() 方法在相应的组件上被调用,并且子级组件也会调用自己的 render(),但是如果标记改变了,那么 React 仅会更新 DOM

getDOMNode

  1. 如果组件已经挂载到了 DOM 上,该方法返回相应的本地浏览器 DOM 元素。
  2. 从 DOM 中读取值的时候,该方法很有用,比如获取表单字段的值和做一些 DOM 操作。
  3. 当 render 返回 null 或者 false 的时候,this.getDOMNode() 返回 null

isMounted

  1. 如果组件渲染到了 DOM 中,isMounted() 返回 true。可以使用该方法保证 setState() 和 forceUpdate() 在异步场景下的调用不会出错

setProps

  1. 调用 setProps() 来改变组件的属性,触发一次重新渲染。
  2. 另外,可以传递一个可选的回调函数,该函数将会在 setProps 完成并且组件重新渲染完成之后调用
  3. 刚方法仅在根组件上面调用。也就是说,仅在直接传给 React.render() 的组件上可用,在它的子级组件上不可用。如果你倾向于在子组件上使用 setProps(),不要利用响应式更新,而是当子组件在 render() 中创建的时候传入新的 prop 到子组件中。

replaceProps

  1. 类似于 setProps(),但是删除所有已存在的 props,而不是合并新旧两个 props 对象

顶层 API


React.createClass

  1. 创建一个组件类,并作出定义。组件实现了 render() 方法,该方法返回一个子级。
  2. 该子级可能包含很深的子级结构。
  3. 组件与标准原型类的不同之处在于,你不需要使用 new 来实例化。 组件是一种很方便的封装,可以(通过 new )为你创建后台实例。

React.createElement

  1. 创建并返回一个新的指定类型的 ReactElement
  2. type 参数可以是一个 html 标签名字字符串(例如,“div”,“span”,等等),或者是 ReactClass (通过 React.createClass 创建的)。

React.createFactory

  1. 返回一个生成指定类型 ReactElements 的函数。比如 React.createElement
  2. type 参数可以是一个 html 标签名字字符串(例如,“div”,“span”,等等),或者是 ReactClass

React.render

  1. 渲染一个 ReactElement 到 DOM 中,放在 container 指定的 DOM 元素下,返回一个到该组件的引用。
  2. 如果 ReactElement 之前就被渲染到了 container 中,该函数将会更新此 ReactElement,仅改变需要改变的 DOM 节点以展示最新的 React 组件。
  3. 如果提供了可选的回调函数,则该函数将会在组件渲染或者更新之后调用。

React.unmountComponentAtNode

  1. 从 DOM 中移除已经挂载的 React 组件,清除相应的事件处理器和 state。
  2. 如果在 container 内没有组件挂载,这个函数将什么都不做。如果组件成功移除,则返回 true;如果没有组件被移除,则返回 false

React.renderToString

  1. 把组件渲染成原始的 HTML 字符串。该方法应该仅在服务器端使用。
  2. React 将会返回一个 HTML 字符串。你可以在服务器端用此方法生成 HTML,然后将这些标记发送给客户端,这样可以获得更快的页面加载速度,并且有利于搜索引擎抓取页面,方便做 SEO。
  3. 如果在一个节点上面调用 React.render(),并且该节点已经有了服务器渲染的标记,React 将会维护该节点,并且仅绑定事件处理器,保证有一个高效的首屏加载体验。

React.renderToStaticMarkup

  1. string renderToStaticMarkup(ReactElement element)
  2. 和 renderToString 类似,除了不创建额外的 DOM 属性,例如 data-react-id,因为这些属性仅在 React 内部使用。如果你想用 React 做一个简单的静态页面生成器,这是很有用的,因为丢掉额外的属性能够节省很多字节。

React.isValidElement

  1. boolean isValidElement(* object)
  2. 判断对象是否是一个 ReactElement。

React.DOM

  1. React.DOM 运用 React.createElement 为 DOM 组件提供了方便的包装。该方式仅在未使用 JSX 的时候适用。例如,React.DOM.div(null, 'Hello World!')

React.PropTypes

  1. React.PropTypes 包含了能与组件 propTypes 对象共用的类型,用于验证传入组件的 props。更多有关 propTypes 的信息,参考复用组件

React.initializeTouchEvents

  1. initializeTouchEvents(boolean shouldUseTouch)
  2. 配置 React 的事件系统,使 React 能处理移动设备的触摸( touch )事件。

React.Children

  1. React.Children 为处理 this.props.children 这个封闭的数据结构提供了有用的工具。

React.Children.map

  1. object React.Children.map(object children, function fn [, object context])
  2. 在每一个直接子级(包含在 children 参数中的)上调用 fn 函数,此函数中的 this 指向 上下文
  3. 如果 children是一个内嵌的对象或者数组,它将被遍历:不会传入容器对象到 fn 中。
  4. 如果 children 参数是 null 或者 undefined,那么返回 null 或者 undefined 而不是一个空对象。

React.Children.forEach

  1. React.Children.forEach(object children, function fn [, object context])
  2. 类似于 React.Children.map(),但是不返回对象。

React.Children.count

  1. number React.Children.count(object children)
  2. 返回 children 当中的组件总数,和传递给 map 或者 forEach 的回调函数的调用次数一致。

React.Children.only

  1. object React.Children.only(object children)
  2. 返回 children 中仅有的子级。否则抛出异常。

React API的更多相关文章

  1. 一、基础知识 React API 一览

    1.10 Hooks 参考文章:https://juejin.im/post/5be3ea136fb9a049f9121014 demo: /** * 必须要react和react-dom 16.7以 ...

  2. React学习系列一

    系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初学者,英语也不是很好 ...

  3. [转] Immutable 详解及 React 中实践

    https://zhuanlan.zhihu.com/p/20295971 作者:camsong链接:https://zhuanlan.zhihu.com/p/20295971来源:知乎著作权归作者所 ...

  4. React学习系列

    React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...

  5. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  6. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  7. React——高阶组件

    1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...

  8. 当初要是看了这篇,React高阶组件早会了

    当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...

  9. 重谈react优势——react技术栈回顾

    react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...

随机推荐

  1. 拓扑排序+数学+DP【洛谷P1685】 游览

    P1685 游览 题目描述 顺利通过了黄药师的考验,下面就可以尽情游览桃花岛了! 你要从桃花岛的西头开始一直玩到东头,然后在东头的码头离开.可是当你游玩了一次后,发现桃花岛的景色实在是非常的美丽!!! ...

  2. 2019年GPLT L2-1 特立独行的幸福 比赛题解 中国高校计算机大赛-团体程序设计天梯赛题解

    对一个十进制数的各位数字做一次平方和,称作一次迭代.如果一个十进制数能通过若干次迭代得到 1,就称该数为幸福数.1 是一个幸福数.此外,例如 19 经过 1 次迭代得到 82,2 次迭代后得到 68, ...

  3. [TJOI2013]松鼠聚会 BZOJ 3170

    题目描述 草原上住着一群小松鼠,每个小松鼠都有一个家.时间长了,大家觉得应该聚一聚.但是草原非常大,松鼠们都很头疼应该在谁家聚会才最合理. 每个小松鼠的家可以用一个点x,y表示,两个点的距离定义为点( ...

  4. 牛客寒假算法基础集训营4 I Applese 的回文串

    链接:https://ac.nowcoder.com/acm/contest/330/I来源:牛客网 自从 Applese 学会了字符串之后,精通各种字符串算法,比如……判断一个字符串是不是回文串. ...

  5. Flashcache的 KEEP属性自动失效

    如果希望一个数据对象长期地缓存在flashcache中,则可以手动地将该数据对象的CELL_FLASH_CACHE属性设置为"keep". 其实需要说明的是,但不是数据对象的CEL ...

  6. php 安装扩展库

    liunx系统 1. /usr/local/php/bin/php-config php 配置文件位置 [ php-config是一个脚本文件,用于获取所安装的php配置的信息 ] 在编译扩展时,如果 ...

  7. POJ2676 (数独问题 + DLX + 状态优化顺序)

    (1)最简单的最是去暴力DFS搜索答案 , 很容易想到 , 每行每列的方式去搜索 , 不过效率是真的不行;但这个还是给出代码 ,毕竟打了也不容易呀! #include<cstdio> #i ...

  8. shell入门基础必备

    作者:KornLee 2005-02-03 15:32:57 来自:Linux先生    1.建立和运行shell程序   什么是shell程序呢? 简单的说shell程序就是一个包含若干行 shel ...

  9. hive表多种存储格式的文件大小差异,无重复数据

    -- 重点,目标表无重复数据 -- dbName.num_result 无重复记录 -- 插入数据 CREATE TABLE dbName.test_textfile( `key` string, ` ...

  10. python模块之wordcloud

    wordcloud官方文档: http://amueller.github.io/word_cloud/generated/wordcloud.WordCloud.html#wordcloud.Wor ...