React (七)

2023-11-17

React 组件 API

在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法:

  • 设置状态: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()中实现了一些条件渲染逻辑。

实例

React 实例

var Counter = React . createClass ( { getInitialState : function ( ) { return { clickCount : 0 } ; } , handleClick : function ( ) { this . setState ( function ( state ) { return { clickCount : state . clickCount + 1 } ; } ) ; } , render : function ( ) { return ( < h2 onClick = { this . handleClick } >点我!点击次数为: { this . state . clickCount } </ h2 > ) ; } } ) ; ReactDOM . render ( < Counter />, document . getElementById ( ' message ' ) ) ;

尝试一下 »

实例中通过点击 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()
  • 返回值:truefalse,表示组件是否已挂载到DOM中

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

本文参考:http://itbilu.com/javascript/react/EkACBdqKe.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React (七) 的相关文章

  • Linux系统管理

    磁盘管理 磁盘基本概述 Linux中磁盘的命名方式与磁盘的接口有关 规则如下 传统IDE接口硬盘 dev hd a z SCISI接口硬盘 dev sd a z 虚拟化硬盘 dev vd a z 在设备名称的定义规则如下 其他分区可以以此类
  • MongoDB安装(win)Redis安装

    下载MongoDB 全MonogoDB链接 win安装 进入e盘 找到安装好的文件路径 以E 盘为例 在bin目录同级下创建一个文件夹 data 在data里面创建一个db和logs文件夹 进入logs创建一个文本文档 monogo log
  • 为分布式做准备吧——深入理解JVM

    文章目录 类加载机制 类执行机制 字节码解释执行 运行时 编译执行 反射执行 内存回收 内存空间 收集器 Sun JDK可用的GC 之前我们文章提到过 反射 说的比较浅显 我们这里来理解JVM 一个标准的JVM是这样的 JVM负责装载cla
  • 关于 剪映电脑版无法打开的问题!

    剪映专业版 安装到电脑上使用几次后 突然就打不开了 经过几天的漫长查找网上也无一个答案 说什么字体冲突的 都不是病根 这个bug病根是业务层加载不到veCreator dll 代码里尝试去加载veCreator dll dll 导致异常 下
  • 使用OSWatcher来监控服务器

    OSWatcher是oracle提供的监控服务器资源的工具 配合AWR等工具为调优数据库提供基本信息 OSWatcher有支持不同平台 WINDOWS平台下 OSWatcher For Windows OSWFW LINUX平台 OS Wa
  • RGMII信号是什么样子的----大揭秘

    RGMII信号 测试 1 测试RGMII 先判断RGMII信号频率多少 就知道是千兆百兆的模式 发送时钟信号 速率为Gbit s时 时钟速率为125MHz 速率为100Mbit s时 速率为25MHz 速率为10Mbit s时 速率为2 5
  • java自动化测试语言基础之方法

    java自动化测试语言基础之方法 文章目录 java自动化测试语言基础之方法 Java 方法 Java 方法 在前面几个章节中我们经常使用到 System out println 那么它是什么呢 println 是一个方法 System 是
  • Linux网络通信----htonl()、htons()、ntohl()、ntohs()四个函数

    转载 https blog csdn net miao19920101 article details 69398158 前言 今天在工作中用到htonl 这个函数 不是很理解 查阅资料之后随笔就记录下来 方便以后工作和学习翻阅 首先需要说
  • python反复运行清空plot图_仅清除matplotlib图的一部分

    我正在使用嵌入在Wx Python GUI中的matplotlib图来呈现一些数据 图中的内容 显示的数据 随点击按钮的功能不断变化 数据有两种类型 1 轮廓线 self axes contour x scale map y scale m
  • 并发锁的学习

    锁 锁的定义 锁是用来协调多个线程并发访问同一共享资源时带来的安全问题 频繁用锁必然会带来性能问题 但不用锁又会造成安全问题 1 从性能上分 乐观锁和悲观锁 乐观锁 CAS自旋锁 是非常经典的乐观锁 并发性能比较好 但是自旋会造成很大的开销
  • Python经典练习题——求水仙花数

    严格来说 我并不知道何谓 水仙花数 因为以前读书时根本没听过这种数 也不知道这种数有什么特征 后来从事编程之后反而听说了所谓的 水仙花数 如果通过网络查询 则发现水仙花数的定义也不统一 比如通过baidu百科查到如下定义 水仙花数 Narc
  • 元数据管理工具atlas初探

    元数据管理工具atlas初探 安装 Ambari添加服务 略 Hive配置 将atlas主节点 usr hdp 2 6 3 0 235 atlas hook拷贝到其他节点 自定义hive env HIVE AUX JARS PATH usr
  • 携手区块链技术,踏上可信“双碳”之路

    自中央明确提出碳达峰碳中和的 双碳 目标以来 区块链技术凭借能为碳排放 碳足迹打上可信标签的天赋异禀 引起了政策部门 学术界及产业实践代表们的高度重视 7月11日 在第33个全国节能宣传周之际 全国低碳日前夕 微众区块链联合金链盟 FISC
  • gcc生成静态库与动态库(附带使用方法)

    目录 前言 1 gcc生成静态库 从使用者的角度出发 如何使用别人的静态库 方法1 方法2 直接使用静态库 2 gcc生成动态库 动态库的使用 第二种方法 与使用静态库的方法一样 解决方案 方法3 ldconfig 配置 etc ld so
  • json解析豆瓣数据

    继续上次的文章 我们找到了json的数据包 那么证明我们可以获取到他们的数据 点击Headers Request URL对应的就是json数据的url 找到url之后我们就可以开始爬虫了 import requests import jso
  • Windows和Linux混合系统通过AD域实现用户集中认证

    一 Windows AD域 1 统一认证简介 管理的Linux服务器和Windows服务器如果很多 如果都用本地用户名管理 要管理和记住几十台甚至上百台服务器的不同账号不同密码 这是很难的 但是如果所有服务器账号密码都设置一样 那又完全没有
  • Unity的C#编程教程_59_字典 Dictionary 详解及应用练习

    文章目录 C Dictionary Introduction C Dictionary Looping through Dictionary C Dictionary When to Use C Dictionary Using Dicti
  • 自举电路原理

    文章目录 一 自举电路核心原理 二 为什么要自举升压 三 简单的自举电路模型 四 自举电路在高电压栅极驱动电路中的应用 1 MOS管Q开通时 2 MOS管Q关断时 一 自举电路核心原理 电容两端电压不能突变 根据电容公式 i t C du
  • 2023智源大会议程公开丨具身智能与强化学习论坛

    6月9日 2023北京智源大会 将邀请这一领域的探索者 实践者 以及关心智能科学的每个人 共同拉开未来舞台的帷幕 你准备好了吗 与会知名嘉宾包括 图灵奖得主Yann LeCun 图灵奖得主Geoffrey Hinton OpenAI创始人S
  • 使用AddN构建tensorflow简单图例

    import tensorflow compat v1 as tf import numpy as np Define a model a computational graph Parameters for a linear model

随机推荐

  • 宋浩线性代数笔记(二)矩阵及其性质

    更新线性代数第二章 矩阵 本章为线代学科最核心的一章 知识点多而杂碎 务必仔细学习 重难点在于 1 矩阵的乘法运算 2 逆矩阵 伴随矩阵的求解 3 矩阵的初等变换 4 矩阵的秩 去年写的字 属实有点ugly 大家尽量看
  • R语言备忘录

    title dataclear rbase author MengKe date 2023 03 12 output html document 1 Load R packages library ggplot2 library tidyr
  • p2b网络

    把p2b的工作推广到p2rb 目的 学习目标检测 熟悉目标检测 为自己写论文打基础 我的碎碎念 真的是fuck了 自己这个东西整了这么久 还是没有整出来 从5月分我就开始了把 因为考试 因为自己喜欢玩游戏 因为我tm真的浪费了好多时间 像个
  • Vue 基于ElementUI 封装table表格组件 + pagination分页组件

    效果展示 状态页面 用户页面 Vue 源码 定义封装组件 Pagination vue
  • c 中 中文乱码_Windows平台C语言程序在控制台显示中文乱码分析及解决

    前言 初学者在Windows平台上进行C C 语言 中文 程序开发时 有时会遇到编译报错 在控制台运行时显示中文乱码的问题 本文就此类问题进行描述 展开原因分析 然后给出解决方法 本次分享内容的目录如下 基本概念 字符集 字符编码 代码页
  • vue顶部一级菜单侧边二三级菜单

    侧边栏 顶部导航
  • 电脑主板接口_如何看电脑主板 M.2 接口是支持 SATA 还是 NVMe 固态硬盘?

    飚王出品 必是精品 你的电脑能 吃鸡 吗 这句话已经成为检验一台电脑配置是否过硬的标准之一 电脑是否能 吃鸡 除了 CPU GPU 必须强悍 内存要大外 选择固态硬盘也会在安装和加载游戏时有 加持 效果 NVMe M 2 固态硬盘 固态硬盘
  • 【华清远见嵌入式培训】C基础

    Linux命令基础 1 Linux文件类型 bsp lcd 七种 b 块 block 设备文件 存储设备 硬盘 SD卡 dev sd s 套接字 socket 文件 网络编程 p 管道 pipe 文件 I O编程 普通文件 c文件 h文件
  • 遇见狂神说,JavaSE基础总结(完整思维导图)

    转自 狂神学JAVA 基础篇 JavaSE Xmind总结 思维导图 Bilibili源视频 狂神说Java JavaSE阶段回顾总结 学习 思维导图与实际知识点结合
  • 虚拟机桥接模式连不上网问题(非桥接网卡原因)

    虚拟机和宿主机可以互相ping通 但是ping www baidu com不能成功 常见的原因是桥接到的网卡不对 网上搜也是大部分搜到这种原因解决办法 参见解决VMware虚拟机桥接模式上不了网 我遇到的问题不是这个 是因为我没有配置网关
  • c++赋值(赋值为函数返回值)语句的返回值问题

    不知道为什么 之前一直脑子里有一个误解 赋值语句的返回值应该是1 成功赋值 或0 赋值失败 今天其实在学linux的时候突然揣摩了一下代码才发现这个问题 if dir opendir home ljz Desktop NULL opendi
  • ABB ACS 510 1.5-5.5kw驱动板图纸 PDF格式

    ABB ACS 510 1 5 5 5kw驱动板图纸 PDF格式 编号 3416654015862907LHY782717783
  • ASP.NET Core WebAPI学习-4

    ASP NET Core WebAPI学习 1 ASP NET Core WebAPI学习 2 ASP NET Core WebAPI学习 3 ASP NET Core WebAPI学习 4 ASP NET Core WebAPI学习 5
  • Wxml2Canvas的bug之旅

    Wxml2Canvas的bug之旅 问题描述 微信小程序当你想根据节点生成海报图片 会想到wxml2canvas这个插件 就会遇到下列问题 在页面组件中直接使用是没什么问题的 但是当你要写到自定义组价去就会出现bug bug1 微信小程序中
  • 数据库中的连接查询方式(基本)

    1 问题描述 在数据库的学习中 我们知道数据库涉及到多表查询的时候需要用到不同的连接查询方式 SQL中将连接分成 内连接 外连接 自然连接 交叉连接 其中内连接与外连接是比较常用的连接 内连接 从左表中取出数据去跟右表中的所有记录进行匹配
  • ChatGPT大解密:带您探讨机器学习背后的秘密、利用与发展

    一 什么是机器学习 二 ChatGPT 的运作原理 三 ChatGPT 生活利用 1 自然语言处理 2 翻译 3 自动回复 四 ChatGPT vs 其他相关技术 五 ChatGPT 的未来 1 未来发展 2 职业取代 3 客服人员 4 翻
  • Loaded runtime CuDNN library: 8.0.5 but source was compiled with: 8.1.0. CuDNN library needs to hav

    2021 08 16 Loaded runtime CuDNN library 8 0 5 but source was compiled with 8 1 0 CuDNN library needs to have matching ma
  • 行业经验

    原文地址 http www blogjava net ITdavid archive 2008 01 21 176730 html 很多职场新人都谈到了工作经验的问题 似乎招聘公司不给你机会 你就没办法获得必要的工作经验 其实并不一定 很多
  • 前端用js实现粘贴图片实现上传图片功能

    前端实现粘贴复制图片 引入实现粘贴复制功能的外部js文件 设置放置图片的盒子 监听粘贴事件 实现上传功能 粘贴即上传 实现效果截图 引入实现粘贴复制功能的外部js文件 引入复制的外部js文件 设置放置图片的盒子 给放置图片的盒子设置可编辑里
  • React (七)

    React 组件 API 在本章节中我们将讨论 React 组件 API 我们将讲解以下7个方法 设置状态 setState 替换状态 replaceState 设置属性 setProps 替换属性 replaceProps 强制更新 fo