设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted

设置状态:setState

setState(object nextState[, function callback])

参数说明

  • nextState，将要设置的新状态，该状态会和当前的state合并
  • callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。

合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

关于setState

不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。

setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

实例

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>setState</title><script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body><div id="message" align="center"></div><script type="text/babel">// 创建 Counter 组件var Counter = React.createClass({// 定义初始状态getInitialState: function() {return { clickCount: 0 }; // 这个对象可以通过this.state属性读取},// 点击事件handleClick: function(){// 设置状态this.setState(function(state){return { clickCount: this.state.clickCount + 1 };})},// 渲染render: function() {return (<h2 onClick={this.handleClick}>点我!点击次数为:{this.state.clickCount}</h2>);}});// 创建虚报DOMReactDOM.render(<Counter />,document.getElementById('message'));</script></body>
</html>

实例中通过点击 h2 标签来使得点击计数器加 1。

替换状态：replaceState

replaceState(object nextState[, function callback])
  • nextState，将要设置的新状态，该状态会替换当前的state。
  • callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

设置属性：setProps

setProps(object nextProps[, function callback])
  • nextProps，将要设置的新属性，该状态会和当前的props合并
  • callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。

设置组件属性，并重新渲染组件。

props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。

更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。

替换属性：replaceProps

replaceProps(object nextProps[, function callback])
  • nextProps，将要设置的新属性，该属性会替换当前的props。
  • callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。

replaceProps()方法与setProps类似，但它会删除原有 props。

强制更新：forceUpdate

forceUpdate([function callback])

参数说明

  • callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。

forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。

forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()

一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。

获取DOM节点：findDOMNode

DOMElement findDOMNode()
  • 返回值：DOM元素DOMElement

如果组件已经挂载到DOM中，该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时，this.findDOMNode()也会返回null。从DOM 中读取值的时候，该方法很有用，如：获取表单字段的值和做一些 DOM 操作。

判断组件挂载状态：isMounted

bool isMounted()
  • 返回值：true或false，表示组件是否已挂载到DOM中

isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

.

React 组件 API相关推荐

  1. 小鸡啄米之React组件内部的API

    React组件内部的API 组件API setState replaceState setProps replaceProps forceUpdate findDOMNode isMounted 组件 ...

  2. react测试组件_测试驱动的开发，功能和React组件

    react测试组件 This article is part of my studies on how to build sustainable and consistent software. In ...

  3. 编写react组件_React组件的“黄金法则”如何帮助您编写更好的代码

    编写react组件 以及钩子如何发挥作用 (And how hooks come into play) Recently I've adopted a new philosophy that chan ...

  4. 【React组件】写一个模仿蓝湖的图片查看器

    前言 最近公司让写一个可以自由拖拽放大的图片查看器,我寻思这还不简单,一顿操作猛如虎,俩小时后: 事实证明,一旦涉及到 DOM 的变换操作,如果很多细节考虑不全,抓过来就写,那基本就凉了.于是我仔细分 ...

  5. react页面数据过多怎么办_性能！！让你的 React 组件跑得再快一点，收藏

    性能和渲染(Render)正相关 React 基于虚拟 DOM 和高效 Diff 算法的完美配合,实现了对 DOM 最小粒度的更新.大多数情况下,React 对 DOM 的渲染效率足以我们的业务日常. ...

  6. React组件设计实践总结05 - 状态管理

    今天是 520,这是本系列最后一篇文章,主要涵盖 React 状态管理的相关方案. 前几篇文章在掘金首发基本石沉大海, 没什么阅读量. 可能是文章篇幅太长了?掘金值太低了? 还是错别字太多了? 后面静 ...

  7. mathcal 对应于什么库_如何快速构建React组件库

    前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...

  8. 从搭建脚手架到在npm上发布react组件

    从搭建脚手架到在npm上发布react组件 最近公司给公司里架设了私有的npm仓库,相应地也需要一个用来发布react组件用的脚手架,在这个过程中又又又又复习了一下webpack,在这里分享下脚手架搭 ...

  9. 使用 Jest 和 Enzyme 测试 React 组件

    type: FrontEnd title: Testing React components with Jest and Enzyme link: hackernoon.com/testing-rea ...

最新文章

  1. R语言使用yardstick包的roc_curve函数评估多分类（Multiclass）模型、并使用autoplot函数可视化模型在每个交叉验证（或者重采样）的每一折fold在每个分类上的ROC曲线
  2. Docker----在Docker中部署Asp.net core2.1以及修改发布
  3. 1.4 正则化-深度学习第二课《改善深层神经网络》-Stanford吴恩达教授
  4. model存储 swift_Swift语言IOS8开发战记10.Data Model
  5. C++:53---菱形继承、虚继承
  6. bundle 安装_centos6.7安装zabbix4
  7. 英伟达：今年显卡将继续供不应求 尽量保证供应普通玩家
  8. Intellij IDEA创建maven项目无java文件问题
  9. 使用html制作一个网页
  10. 微信小程序轮播图禁止滚动
  11. Ubuntu/CentOS查看系统启动项
  12. 【IIS】XP系统的IIS发布
  13. php 大型网站内链,制定网站内链优化策略
  14. Java的链式编程（支持lombok）
  15. 02.MICO-HELLOWORLD
  16. 【10】AccessibilityService实现探探app的自动化喜欢和不喜欢+ [as 3.0如何打开层级调用uiautomatorviewer]
  17. 计算机在识别图像时“看到”了什么？
  18. 小长假出游攻略之新加坡圣淘沙
  19. 操作系统ahci aci ide模式
  20. django 微信支付成功回调url（notify_url）

热门文章

  1. python 的import m.a.b 和 from m.a import b的区别
  2. 关于http301与302的技术讨论
  3. js_Event Loop（笔记）
  4. 安全证书导入到java中的cacerts证书库
  5. 程序员跳槽获25K月薪，只因他给面试官看了这6000行代码
  6. [转]XPS转JPG转换器
  7. Jsp页面中使用fckeditor控件的两种方法
  8. windows2003系统的iis不能下载exe文件问题的解决
  9. 深入学习Redis持久化
  10. mysql字段类型、范围详解