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. SEO学习知识

    监控流量的工具 百度统计 CNZZ  51LA 谷歌分析工具 如何从平台借流量? 竞价(付费).SEO 关键词定位: 定位人:负责人 将公司的业务全部列出来 选词: 根据定位的关键词选择出我们需要优化 ...

  2. 查找命令which、whereis、locate

      1.find 最常用和最强大的查找命令.它能做到实时查找,精确查找,但速度慢. find的使用格式如下: $ find [指定目录] [指定条件] [指定动作] 指定目录:是指所要搜索的目录和其子 ...

  3. 第五节：从源码的角度理解各种Result(ActionResult、JsonResult、JavaScriptResult等)

    一. 背景 提到MVC不得不说MVC中的各种Result,这些高度封装的xxxResult以及在xxxResult再度封装的xxx,大大提高了MVC框架的开发效率. 相信做过MVC开发的朋友都会用到过 ...

  4. 乘积型Sobolev不等式

    (Multiplicative Sobolev inequality). Let $\mu,\lambda$ and $\gamma$ be three parameters that satisfy ...

  5. pygame学习点滴

    pygame分为四块 引用/ 初始化/ 事件处理/ 窗口刷新 普通版壁球游戏 """ 引用部分 """ import pygame, sys ...

  6. python 模块 SQLalchemy

    SQLalchemy 概述: # &&&&&&&&&&&&&&&&&am ...

  7. 引用变量&和指针*的区别

    &在C/C++中做右值时,为取地址运算符,来指示变量的地址.C++给&符号赋予了另外一个含义,将其用来声明引用. 引用变量的作用: 1.别名 int b = 0; int& a ...

  8. vue 3.0

    参照网址: https://blog.csdn.net/qq_36407748/article/details/80739787

  9. iOS开发之微信平台分享

    在工程开始之前应该先准备在微信开放平台申请的appid,从微信平台下载sdk文件.下面开始步骤讲述 1.先将SDK导入工程目录 2.在info.plist文件设置相关信息,包括appid标识.白名单 ...

  10. query string parameters 、 Form Data 、 Request Payload

    微信小程序ajax向后台传递参数的时候总是报400错误 然后看了一下network 发现是query string parameters,但是我写的header如下 header:{ "Co ...