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. MySQL学习笔记（四）悲观锁与乐观锁

    恼骚 最近在搞并发的问题,订单的异步通知和主动查询会存在并发的问题,用到了Mysql数据库的 for update 锁 在TP5直接通过lock(true),用于数据库的锁机制 Db::name('p ...

  2. velocity 新手用小常识--开源，简单易上手

    项目中经常用到的 .vm 后缀文件是什么? 基于 java 的 velocity 模版引擎的一种页面控制文件,是一些类似 html 语句和一种叫 VLT 的语句构成   velocity --美 [v ...

  3. JavaScript数据类型 Boolean布尔类型

    前言 布尔值Boolean类型可能是三种包装对象Number.String和Boolean中最简单的一种.Number和String对象拥有大量的实例属性和方法,Boolean却很少.从某种意义上说, ...

  4. HTML（一）HTML基础语法（HTML简介，HTML文档声明）

    HTML 概念介绍 [概念] (Hyper Text Markup Language)超文本标记语言,是用来描述网页的一种语言 超文本(Hyper Text):不只包括文本,也可以包括图片.链接.音乐 ...

  5. Spring IOC容器对bean的生命周期进行管理的过程

    1.通过构造器或者工厂方法创建bean的实例 2.为bean的属性设置值和对其他bean的引用 3.将bean的实例传递给bean的后置处理器BeanPostProcessor的postProcess ...

  6. $\be$-QGE 的弱强唯一性

    在 [Zhao, Jihong; Liu, Qiao. Weak-strong uniqueness criterion for the $\beta$-generalized surface qua ...

  7. 连接远程MySQL数据库项目启动时，不报错但是卡住不继续启动的，

    连接远程MySQL数据库项目启动时,不报错但是卡住不继续启动的, 2018-03-12 17:08:52.532DEBUG[localhost-startStop-1]o.s.beans.factor ...

  8. C#实现按键弹出查询窗口

    protected override bool ProcessCmdKey(ref Message msg, Keys keyData) { if (keyData == Keys.F2) { thi ...

  9. word 内容控件属性编辑

    场景: 别人发给自己一份word模板,基于统一性,里面包含了很多“内容控件”,一般情况下,只需要根据内容控件进行编辑即可,但如果想对内容控件本身做编辑操作,例如删除等. 操作: 单击 文件>选项 ...

  10. 饮冰三年-人工智能-Python-20 Python线程、进程、线程

    进程:最小的数据单元 线程:最小的执行单元 一: 1:线程1 import threading #线程 import time def Music(): print("Listen Musi ...