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的更多相关文章

  1. Ognl表达式基本原理和使用方法

    Ognl表达式基本原理和使用方法 1.Ognl表达式语言 1.1.概述 OGNL表达式 OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写,他是一个 ...

  2. Android自定义控件之基本原理

    前言: 在日常的Android开发中会经常和控件打交道,有时Android提供的控件未必能满足业务的需求,这个时候就需要我们实现自定义一些控件,今天先大致了解一下自定义控件的要求和实现的基本原理. 自 ...

  3. HMM基本原理及其实现（隐马尔科夫模型）

    HMM(隐马尔科夫模型)基本原理及其实现 HMM基本原理 Markov链:如果一个过程的“将来”仅依赖“现在”而不依赖“过去”,则此过程具有马尔可夫性,或称此过程为马尔可夫过程.马尔可夫链是时间和状态 ...

  4. 动态令牌-(OTP,HOTP,TOTP)-基本原理

    名词解释和基本介绍 OTP 是 One-Time Password的简写,表示一次性密码. HOTP 是HMAC-based One-Time Password的简写,表示基于HMAC算法加密的一次性 ...

  5. ZooKeeper基本原理

    ZooKeeper简介 ZooKeeper是一个开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现同步服务,配置维护和命名服务等. ZooKeeper设计目的 1. ...

  6. GBDT的基本原理

    这里以二元分类为例子,给出最基本原理的解释 GBDT 是多棵树的输出预测值的累加 GBDT的树都是 回归树 而不是分类树 分类树 分裂的时候选取使得误差下降最多的分裂 计算的技巧 最终分裂收益按照下面 ...

  7. 全文检索引擎 Solr 部署与基本原理

    全文检索引擎 Solr 部署与基本原理 搜索引擎Solr环境搭建实例 关于 solr , schema.xml 的配置说明 全文检索引擎Solr系列-–全文检索基本原理 一.搜索引擎Solr环境搭建实 ...

  8. 相机位姿估计0：基本原理之如何解PNP问题

    关键词:相机位姿估计 PNP问题求解 用途:各种位姿估计 文章类型:原理 @Author:VShawn(singlex@foxmail.com) @Date:2016-11-18 @Lab: CvLa ...

  9. geohash基本原理

    geohash基本原理是将地球理解为一个二维平面,将平面递归分解成更小的子块,每个子块在一定经纬度范围内拥有相同的编码,这种方式简单粗暴,可以满足对小规模的数据进行经纬度的检索 目录: 经纬度常识 认 ...

随机推荐

  1. SNMP源码分析之（一）配置文件部分

    snmpd.conf想必不陌生.在进程启动过程中会去读取配置文件中各个配置.其中几个参数需要先知道是干什么的: token:配置文件的每行的开头,例如 group MyROGroup v1 readS ...

  2. metasploit 教程之信息收集

    信息收集 信息收集范围很大,可以从不同层面,不同维度进行信息收集. 系统补丁 我们知道目标机器缺少什么补丁就意味着存在与其对应的漏洞.我们可以利用这些漏洞来达到我们渗透攻击的目的. # 使用的模块 u ...

  3. 自定义border 为 dashed 时的虚线间距

    li{ width: 100%; height: 3px; background-image: linear-gradient(to right, #009a61 0%, #009a61 50%, t ...

  4. MySQL学习4 - 数据类型一

    介绍 一.数值类型 二.浮点型 验证三种类型建表 验证三种类型的精度 三.日期类型 综合练习: 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选 ...

  5. 第30月第3天 iOS图标icon自动生成和自定义尺寸

    1. http://icon.wuruihong.com/ https://www.jianshu.com/p/684751c14735 2.status bar UIViewControllerBa ...

  6. Vue导出json数据到Excel表格

    一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二. ...

  7. Django-3-Template模板

    模板是html文档+Django逻辑语句的组合. 一.变量和标签 变量通过{{ }}来表示,两个大括号中间是变量名. 标签通过{% %}来表示,就是Python中的函数和方法. 常用标签: {% fo ...

  8. Windows2016的 IIS中配置PHP7运行环境

    Windows2016的 IIS中配置PHP7运行环境 在Windows 的IIS(8.0)中搭建PHP运行环境: 一:安装IIS服务器 .进入控制面板>>程序和功能>>打开或 ...

  9. python的一些基本概念

    1.为什么python被称为胶水语言?他是新一代的系统脚本参考博客:https://www.cnblogs.com/ningskyer/articles/5264172.html 2.python百度 ...

  10. Machine Schedule poj1325

    Machine Schedule Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 17454   Accepted: 7327 ...