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. [再寄小读者之数学篇](2014-11-02 Herglotz' trick)

    设 $f$ 是 $\bbR$ 上周期为 $1$ 的连续可微函数, 满足 $$\bee\label{141102_f} f(x)+f\sex{x+\frac{1}{2}}=f(2x),\quad\for ...

  2. 设置redis服务开机自启动

    今天周一,一大早来公司开完会,就听到开发的同学说本地项目起不来了,叫我查下原因.想了下,他们本地项目只跟我们公司的一台内网服务器有关,那台服务器他们要用到的呢,也就只有mysql和redis这两个服务 ...

  3. Java部分概念理解

    第1部分 方法 1.1 方法基本概念 1) 方法:用于封装一段特定功能代码,尽可能一个方法至只实现一个基本功能,相当于C语言中的函数: 2) 方法可以多次调用: 3) 避免代码冗余,便于维护,便于团队 ...

  4. sql where,group by ,having,order by用法和区别

    select 子句 指定列 可放置分组函数 where子句:限制行 group by 子句:对数据进行分组 和 having子句:限定组.和group by 一起使用 (对分组时候进行筛选)可放置分组 ...

  5. UE4 AR开发笔记

    1.基础使用 ArToolKit:生成图片特征,可以用彩图.(图片先灰化)    genTexData效准相机.由于有的相机照相有弧度.  calib_camera 2.使用UE4ARPlugins做 ...

  6. 【转】解决keepalived正常启动但是虚IP(VIP)没有生成的问题

    如题所示,keepalived安装配置好之后能够正常启动,但是虚IP并没有生成.接着检查防火墙(iptables)发现也没有相关的限制.稍微郁闷了一下之后,查看了keepalived日志文件,这次成功 ...

  7. python正则表达式--特殊字符

    正则表达式—特殊表达式含义 正则表达式的字母和数字表示他们自身,但多数字母和数字前加一个反斜杠时会拥有不同的含义. 下面列出了正则表达式模式语法中的特殊元素. 1.普通字符集 1)    \w     ...

  8. docker部署express应用

    1.拷贝express应用目录拷到服务器某个目录,如/home/leyi/front_app_docker 2.新建一个pm2的配置文件preocess.json,配置如下: { "apps ...

  9. bzoj 3277

    十分之恶心的后缀自动机 (其实是水题,但是我太弱了...) 首先,有一个预备知识:bzoj 2780https://blog.csdn.net/lleozhang/article/details/89 ...

  10. Tomcat 下4个配置文件详解

    Tomcat 的配置文件由4个 xml 文件构成,context.xml.web.xml.server.xml.tomcat-users.xml 这4个文件.每个文件都有自己的功能与配置方法,下列将逐 ...