React更新元素 基础
React元素创建后无法修改其内容和属性。唯一的办法是创建新的元素,传入ReactDOM.render()方法
三种实现形式:
1.整体替换
- function tick () {
- const ele=(
- <div>
- <h1>更新元素</h1>
- <h2>现在是:{new Date().toLocaleTimeString()}</h2>
- </div>) ;
- ReactDOM.render(
- ele,
- document.getElementById('example')
- )
- }
- setInterval(tick,1000);
2.将要展示的部分封装起来
- function Clocks (props) {
- return (
- <div>
- <h1>Hello,world</h1>
- <h2>现在是{props.date.toLocaleString()}</h2>
- </div>
- )
- }
- function tick () {
- ReactDOM.render(
- <Clock date={new Date()}>,
- document.getElementById('example')
- )
- }
- setInterval(tick,1000)
解析:每隔1秒执行tick 触发Clock 将参数传递到Clock函数中,修改html
3.创建React.Component的类,封装要显示的元素
- class Clock extends React.Component{
- render(){
- return (
- <div>
- <h1>Hello world</h1>
- <h2>现在是{this.props.date}</h2>
- </div>
- )
- }
- }
- function tick (){
- ReactDOM.render(
- <Clock date={new Date()}/>,
- document.getElementById('example')
- )
- }
- setInterval(tick,1000)
React会对比元素内容的先后不同,渲染的时候只更新不同的部分
React更新元素 基础的更多相关文章
- php Hash Table(四) Hash Table添加和更新元素
HashTable添加和更新的函数: 有4个主要的函数用于插入和更新HashTable的数据: int zend_hash_add(HashTable *ht, char *arKey, uint n ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- 获取更新元素文本html()
html() 方法,获取元素文本,包含元素标签,也可以设置元素的文本值(包含元素标签),还可以包含子元素标签.相当于JavaScript中的innerHTML. <!DOCTYPE html&g ...
- 获取更新元素文本text()
text() 方法,获取元素文本,也可以设置元素的文本值.相 <!DOCTYPE html> <html lang="en"> <head> & ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- react的新手基础知识笔记
<!DOCTYPE html> <html> <head> <script src="../build/react.js">< ...
- 【温故知新】—— React/Redux/React-router4基础知识&独立团Demo
前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...
- react 子元素修改父元素值的一个偏方,虽然简单,但是不建议用,
this.state.obj = { name: "小明" } <Zizujian obj={this.state.obj} /> // 子组件这样修改父元素的值 // ...
- react复习总结(1)--react组件开发基础
这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...
随机推荐
- UI自动化selenium
1.什么是UI自动化?模拟人用代码的方式去操作页面2.为什么要做UI自动化?后期迭代的时候,老功能比较多,人工维护成本较大,重复性工作较多,这个时候就考虑因为UI自动化3.什么时候做UI自动化?项目稳 ...
- 2019-04-17-day034-线程与数据共享
内容回顾 锁 互斥锁 能够保护数据的安全性 保证对于数据的修改操作同一时刻多个进程只有一个进程执行 进程数据不安全 : 同时修改文件/数据库/其他共享资源的数据 ###队列 -- 实现了进程之间的通信 ...
- asp.net 网页跳转的几种常用方法
Response.Redirect("http://www.baidu.com",false); 后面的bool值为是否停止执行当前页.跳转向新的页面,原窗口被代替.浏览器中的UR ...
- swap 用指针交换两个整型数值
- 自由线程FreeThreadDOMDocument
Posted on 2006年09月4日by 不及格的程序员-八神 星期二 天气:晴 昨天燕子 自己去五爱了 给我买了一堆袜子 给妈买了一双鞋 给自己买了一件 红色的内衣服 挺好看的 在市场买了一 ...
- ORA-02275: 此表中已经存在这样的引用约束条件
问题描述: 针对这个问题,发表一下我的观点.emp表和dept表使用hibernate关联查询时报的错,使用的是非注解形式,和其他一样.他们各自有entity,各自有一个hbm.xml文件,emp表这 ...
- 【java多线程】队列系统之ArrayBlockingQueue源码
1.简介 ArrayBlockingQueue,顾名思义:基于数组的阻塞队列.数组是要指定长度的,所以使用ArrayBlockingQueue时必须指定长度,也就是它是一个有界队列. 它实现了Bloc ...
- 1.1 VMware简介
VMware是真正“同时”运行,多个操作系统在主系统的平台上,像标准Windows应用程序那样切换.而且每个操作系统你都可以进行虚拟的分区.配置而不影响真实硬盘的数据,通过网卡将几台虚拟机用网卡连接为 ...
- sql 不够七位数 在左侧自动补零 ,并循环插入N条记录
select right(cast('0000000000'+rtrim(字段) as varchar(20)),7) declare @i intdeclare @qid int set @i=1s ...
- The query below helps you to locate tables without a primary key:
SELECT tables.table_schema, tables.table_name, tables.table_rows FROM information_schema.tables LEFT ...