React_基本原理_ajax
React 基本原理
- 初始化显示界面
创建虚拟DOM树
渲染到 原生 DOM 树
绘制界面显示
- 更新界面
setState() 更新状态机
重新创建虚拟 DOM 树
新/旧树比较差异 (执行一次 DOM Diff 算法)
更新差异并渲染到对应 原生 DOM (捕获差异，并渲染)
局部界面重绘
基于 react 的 ajax 异步显示效果 (比如： 先显示 loading，等有了数据之后再显示正文)
测试接口: https://api.github.com/search/repositories?q=r&sort=stars
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title> <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta name="viewport"
content="user-scalable=no,
width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0"/> <style rel="stylesheet" type="text/css">
.unSelectedAble {
/* 内容不可以被选中 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} * {
padding: 0;
margin: 0;
} a {
text-decoration: none;
} ul,
ol {
list-style: none;
} input {
outline: none;
} img {
display: block;
} html,
body {
height: 100%;
/* overflow: hidden; */
} /**** Start ****/
html {
/* touch-action: none; */
} #wrap {
width: 100%;
min-height: 100%; background-color: #b3ccaf;
} #content {
width: 100%;
padding-bottom: 50px;
padding-top: 50px;
padding-left: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; font-size: 14px;
background-color: #b3ccaf;
} #footer {
width: 100%;
height: 50px;
margin-top: -50px; color: #b3ccaf;
background-color: #162454;
text-align: center;
line-height: 50px;
} button {
height: 36px;
margin: 20px;
padding: 4px; color: #000;
font-size: 18px;
background-color: #94b5b2;
border: 0 none;
border-radius: 6px;
} input {
padding: 6px;
font-size: 18px;
margin: 0 2px;
background-color: #b76f59;
border: 0 none;
}
</style>
</head> <body class="unSelectedAble"> <!-- 模拟屏幕区域 -->
<div id="wrap"> <!-- 内容区域 -->
<div id="content">
</div>
</div> <!-- 底部区域 -->
<div id="footer">
Copyright ©2019 耶梦加德
</div> <!-- javascript 代码 -->
<script src="https://cdn.bootcss.com/react/16.7.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.6.2/prop-types.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
<script type="text/babel">
class MostPopularReponsitory extends React.Component{
state = {
keyword: "",
repoUrl: "",
repoName: "",
points: [".", ".", "."],
result:"What do u wanna search ?"
}; handleInput = ()=>{
const keyword = this.refs.newKeyword.value;
this.setState({
keyword
});
}; handleSearch = ()=>{
const {keyword, points} = this.state;
if(keyword === ""){
return ;
} this.refs.newKeyword.value = "";
this.setState({
keyword: "",
result: <p>Searching{points.map(each=>each)}</p>
}); const url = `https://api.github.com/search/repositories?q=${keyword}&sort=stars`;
axios.get(url).then(response=>{
const {name:repoName, html_url:repoUrl} = response.data.items[0];
this.setState({
repoName,
repoUrl
});
this.setState({
result: <span>The most popular Git Reponsitory about {keyword} is
<a href={repoUrl} target="_blank"> {repoName}</a>
</span>
});
}).catch(err=>console.log(err?"Search error: "+err:"Search From: "+url));
}; render(){
const {result} = this.state;
return (
<div>
<label>
<input type="text" ref="newKeyword" onBlur={this.handleInput}/>
</label>
<button onClick={this.handleSearch}>Tips</button>
<h2>{result}</h2>
</div>
)
}
} ReactDOM.render(<MostPopularReponsitory/>, document.getElementById("content"));
</script>
</body>
</html>
React_基本原理_ajax的更多相关文章
- Ognl表达式基本原理和使用方法
Ognl表达式基本原理和使用方法 1.Ognl表达式语言 1.1.概述 OGNL表达式 OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写,他是一个 ...
- Android自定义控件之基本原理
前言: 在日常的Android开发中会经常和控件打交道,有时Android提供的控件未必能满足业务的需求,这个时候就需要我们实现自定义一些控件,今天先大致了解一下自定义控件的要求和实现的基本原理. 自 ...
- HMM基本原理及其实现（隐马尔科夫模型）
HMM(隐马尔科夫模型)基本原理及其实现 HMM基本原理 Markov链:如果一个过程的“将来”仅依赖“现在”而不依赖“过去”,则此过程具有马尔可夫性,或称此过程为马尔可夫过程.马尔可夫链是时间和状态 ...
- 动态令牌-(OTP,HOTP,TOTP)-基本原理
名词解释和基本介绍 OTP 是 One-Time Password的简写,表示一次性密码. HOTP 是HMAC-based One-Time Password的简写,表示基于HMAC算法加密的一次性 ...
- ZooKeeper基本原理
ZooKeeper简介 ZooKeeper是一个开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现同步服务,配置维护和命名服务等. ZooKeeper设计目的 1. ...
- GBDT的基本原理
这里以二元分类为例子,给出最基本原理的解释 GBDT 是多棵树的输出预测值的累加 GBDT的树都是 回归树 而不是分类树 分类树 分裂的时候选取使得误差下降最多的分裂 计算的技巧 最终分裂收益按照下面 ...
- 全文检索引擎 Solr 部署与基本原理
全文检索引擎 Solr 部署与基本原理 搜索引擎Solr环境搭建实例 关于 solr , schema.xml 的配置说明 全文检索引擎Solr系列-–全文检索基本原理 一.搜索引擎Solr环境搭建实 ...
- 相机位姿估计0：基本原理之如何解PNP问题
关键词:相机位姿估计 PNP问题求解 用途:各种位姿估计 文章类型:原理 @Author:VShawn(singlex@foxmail.com) @Date:2016-11-18 @Lab: CvLa ...
- geohash基本原理
geohash基本原理是将地球理解为一个二维平面,将平面递归分解成更小的子块,每个子块在一定经纬度范围内拥有相同的编码,这种方式简单粗暴,可以满足对小规模的数据进行经纬度的检索 目录: 经纬度常识 认 ...
随机推荐
- linux内存 free命令 buffer cache作用
free命令用于查看linux内存使用情况 #free shared:用于进程之间相互共享数据. Used:已使用内存. total:内存总量. free:未使用的内存. available:开启一个 ...
- JSP起源
JSP起源: 在很多动态网页中,绝大部分内容都是固定不变的,只有局部内容需要动态产生和改变. 如果使用Servlet程序来输出只有局部内容需要动态改变的网页,其中所有的静态内容也需要程序员用Java程 ...
- 题解 P5065 【[Ynoi2014]不归之人与望眼欲穿的人们】
出现了一篇跑得炒鸡慢的题解! noteskey 无 fuck 说,好像就是整个数列分块然后合并区间...什么的吧 对于每块内部就是算一下前缀信息.后缀信息(就是以 第一个点/最后一个点 为一个边界,不 ...
- 【原创】大叔问题定位分享（4）Kafka集群broker节点从zookeeper上消失
kafka_2.8.0-0.8.1 一 现象 生产环境一组kafka集群经常发生问题,现象是kafka在zookeeper上的broker节点消失,此时kafka进程和端口都在,然后每个broker都 ...
- 入坑C++
c++中的++来自c语言中的递增运算符,该运算符将变量加1,c++起初也叫c with class ,通过通过名称表面,C++是对c的扩展,因此C++是c语言的超集,这以为这任何有效的c程序都是有效的 ...
- 从GitHub下载demo时遇到的依赖问题
从GitHub上使用download zip下载时,经常遇到一些依赖工程没有一起下载,如果额外手动下载,配置起来也相当费事,其实,标准的方法是使用以下命令下载这样的demo. git clone -- ...
- Python——plot可视化数据，作业8（python programming）
subject1k和subject1v的形状相同 # -*- coding: utf-8 -*- import scipy.io as sio raw_K = sio.loadmat('Subject ...
- 基于BootStrap的initupload()实现Excel上传和获取excel中的数据
简单说明:后边要做exl解析(还没做呢),所以先有一个excel的的上传以及获取excel中的数据,展示出来. 代码: //html代码 <div class="btn-group&q ...
- java----JDOM解析XML
JDOM: 与DOM类似,基于树形结构 效率比DOM快 下载: http://www.jdom.org/dist/binary/jdom-2.0.6.zip 导包导java中的工程目录 jdom-2. ...
- 记账本-NABCD分析
N(Need)需求 这个软件主要解决了大学生管理自己财务状况的问题,随着手机支付的日趋流行大家对财务的概念就变成了银行卡账户余额的一串数字,在不知不觉中,这串数字就一变小,也就出现了月光族.由此看来, ...