React_基本原理_ajax

時間 2019-11-08

標籤 react 基本原理 ajax 欄目 React 简体版

原文原文鏈接

React 基本原理javascript

初始化顯示界面

建立虛擬DOM樹css

渲染到原生 DOM 樹html

繪製界面顯示java

更新界面

setState() 更新狀態機react

從新建立虛擬 DOM 樹ios

新/舊樹比較差別 (執行一次 DOM Diff 算法)git

更新差別並渲染到對應原生 DOM (捕獲差別，並渲染)github

局部界面重繪web

基於 react 的 ajax 異步顯示效果 (好比：先顯示 loading，等有了數據以後再顯示正文)ajax

測試接口: 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>

1. 【全棧之路】JAVA基礎課程七_AJAX原理剖析（20190617v1.0）
2. React_生命週期
3. Struts2基本原理
4. hive 基本原理
5. Redis基本原理
6. IAP基本原理
7. svm基本原理
8. XGBoost基本原理
9. hibernate基本原理
10. Spark基本原理
更多相關文章...
• Lua 基本語法 - Lua 教程
• C# 基本語法 - C#教程
• Kotlin學習（二）基本類型
• Kotlin學習（一）基本語法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。