React: 認識React

時間  2019-11-24
標籤 react 認識 欄目 React 简体版
原文   原文鏈接

1、簡介javascript

React-Native是Facebook開源的跨平臺框架，用於實現前端和原生進行混合開發。React-Native開發能夠很好的使用原生UI構建用戶界面，與傳統的使用WebView相比，不只保留了原生的用戶體驗和流暢度，還提升了開發效率，React-Native的構建思路圖以下。而React-Native是基於React設計的，因而可知React在RN開發中是極其重要的。React的地址是Github地址：https://github.com/facebook/react、官網地址：https://facebook.github.io/react/。接下來開始認識React。css

 

2、基礎html

須要瞭解React的幾個基本的特色，以下：前端

  • 做爲UI： React強調的是界面，只做爲視圖View在MVC中使用。
  • 虛擬DOM：採用虛擬的節點，能夠很好地優化視圖的渲染和刷新（局部重繪），提升了性能。
  • 數據流：單方向的數據流，比傳統的數據綁定，更加靈活和快捷。

學習React須要掌握一些基本知識，以下：
java

  • JSX語法知識：相似於XML語言，HTML是XML的子集，它跟HTML也很像。一種語法糖，更方便地建立虛擬DOM，須要解析器對它進行解析成JS。
  • ES6/7/8的知識：遵循ECMAScript的JavaScript標準庫，添加了許多新的語法特性，ES6解決了ES5的缺陷，有了類的概念，實現了代碼庫之間的共享。
  • Web基礎知識：這個是要具有的最爲基本前端知識，例如CSS/JavaScript等。

通常的React開發須要的文件工具，以下：react

  • react.js：是React的核心文件，經過嵌套JSX來建立組件的工具。
  • react-dom.js，browser.js：將JSX轉譯成JavaScript和HTML的工具。
  • 這幾個文件下載地址：可前往下載。
  • 推薦使用Node.js預編譯：npm install -g react-tools。最新版本用babel：https://babeljs.io/docs/en/

 

3、JSXgit

一、概念github

<script type="text/babel"></script>中type規定的是MIME類型，現代瀏覽器默認的是text/javascript，因此不用像之前那樣手動添加jsxTransformer.js專門用來解析js/jsx文件中的jsx語法，而babel不光能幹這些還能編譯ES6語法等等。只要將代碼放在script標籤對中就能正確解析，那麼JSX究竟是什麼？npm

一、相似於XML的語法糖
JSX是JavaScript的擴展，React爲了代碼的可讀性更方便地建立虛擬DOM等緣由，加入了一些相似XML的語法的擴展。其實它就是HTML標籤，只不過在JS中寫這些標籤時，再也不像之前那樣做爲字符串用引號引發來，而是像在XML文件中書寫同樣，直接寫便可。

二、第一代編譯器——jsxTransformer
JSX代碼並不能直接運行，須要將它編譯成正常的JavaScript表達式才能運行，jsxTransformer.js就是這一編譯器的角色。

三、第二代編譯器——babel
React官方博客發佈了一篇文章，聲明其自身用於JSX語法解析的編譯器JSTransform已通過期，再也不維護，React JS和React Native已經所有采用第三方Babel的JSX編   譯器實現。緣由是二者在功能上已經徹底重複，而Babel做爲專門的JavaScript語法編譯工具，提供了更爲強大的功能。而browser.js是babel編譯器的瀏覽器版本。

二、書寫數組

//這就是一個JSX對象
<h1>I am XYQ</h1> //這也是一個JSX對象，JSX執行的是JavaScript表達式
var obj = "I am XYQ";
<h1>{obj}</h1> 或者 <h1>obj</h1> 

//這仍然是一個JSX對象，顯示HTML，_html爲屬性
<div>{{_html:'<h1>I am XYQ</h1>'}}</div>

三、載入

//方式1：內聯方式載入
<script type="text/babel">
     ReactDOM.render(
           //這裏面書寫JSX代碼
      );
</script> //方式2：外聯方式載入 //test.js文件
ReactDOM.render(
    //這裏面書寫JSX代碼        
);
//開始引入 <script type="text/babel" src="test.js"></script>

四、轉換

這個<script type="text/babel">...</script>解析器會把JSX對象解析成JavaScript對象，轉換格式爲：
React.createElement(
    string/ReactClass type,   
    [object props],  
    [children ...]   
)
第一個參數：能夠是一個字符串，也能夠是一個HTML標籤的元素，或者是ReactClass類型的對象 第二個參數：是一個對象或者字段，表示組件的全部屬性 第三參數：元素的子元素 JSX對象轉換爲: //不帶屬性 
<h1>I am XYQ</h1>  <===> React.createElement("h1", null, "I am XYQ");

//若帶屬性 <h1 width:"20px">I am XYQ</h1>  <===> React.createElement("h1", {width:"20px"}, "I am XYQ");

//帶樣式的 <h1 style={{color:'#ff0000', fontSize:'14px'}}>I am XYQ</h1> 
<===> React.createElement("h1",{style:{color:'#ff0000',fontSize:'14px'}}, "I am XYQ")

 

4、動手

IDE：WebStorm或Sublime

文件結構的組成：

HTML中建立組件：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Hello React</title>
        <script src="react.js"></script>
        <script src="react-dom.js"></script>
        <script src="browser.min.js"></script>
    </head>

    <body>
        <script type="text/babel">
            ReactDOM.render(
                 <h1>I am XYQ</h1>, 
                 document.body
             );
        </script>
    </body>
</html>


5、分析

一、在head中，經過<script src=""></script>引入了React的3個核心js框架，做用上面已經有過解釋；

二、在body中，經過<script type="text/babel"></script>引入JSX編譯器對建立的JSX對象進行解析；

三、內部解析的標準形式爲：React.createElement(string/ReactClass type, [object props], [childre...] );

四、ReactDOM.render()是將JSX對象轉化後掛載到父節點上，最後並渲染到DOM模型上進行展現；

五、ReactDOM.render()兩個參數分別是JSX對象、掛載的父節點，本示例掛載到body顯然實現了，可是是有問題的，不規範，應該在body內再建立新的節點，做爲掛載的父節點使用，檢查元素，警告日誌以下：

  

6、規範

進行分析後，從新修改文件後，渲染結果是同樣的，不過能夠查看控制檯警告發現已經去除了，修改以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1>I am XYQ</h1>, 
            document.getElementById('example')
        );
    </script>
</body>
</html>

 

7、組件

上面的代碼是常規的方式，建立jsx對象，而後轉換解析成DOM，最後進行渲染出來。React之因此能如此流行，主要是它採用了組件化的思想來構建界面。React提供了createClass方法來專門建立自定義的組件，組件內部經過render方法返回一個jsx對象，而後再經過ReactDOM.render方法將建立的組件渲染出來。ReactJS中約定自定義的組件標籤首字母必定要大寫，這樣便於區分是組件標籤仍是HTML標籤。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        <!-- 建立一個HelloMessage組件 -->
        var HelloMessage = React.createClass({
            render: function(){
                <!-- 建立一個jsx對象 -->
                return <h1>welcome XYQ!</h1>
            }
        });
        <!-- 將HelloMessage組件掛載到父節點div上，並渲染出來 -->
        ReactDOM.render(<HelloMessage/>, document.getElementById('example'));
    </script>
</body>
</html>

 

8、屬性

上面的例子中，數據都固定的，那麼若是想要經過傳入數據的形式進行更新，該如何作呢？React中對數據的綁定也作了處理，React中默認了組件身份爲this對象，this對象都含有一個隱藏的props字段，它是從父組件傳遞給子組件的，經過這個字段開發者就能夠經過this.props獲取屬性對象。react官方認爲，props應該是隻讀的，不該該被修改。以下：

一、普通屬性: this.props.varName

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        <!-- 建立HelloMessage組件 -->
        var HelloMessage = React.createClass({
            render: function(){
                <!-- 建立jsx對象 -->
                <!-- this.props.name獲取到了HelloMessage組件的name屬性 -->
                return <h1>welcome {this.props.name}!</h1>
            }
        });
        <!-- 渲染組件 -->
        <!-- 給HelloMessage組件的name屬性賦值 -->
        ReactDOM.render(<HelloMessage name="HelloMessage" />, document.getElementById('example'));
    </script>
</body>
</html>

二、數組屬性: this.props.children

注意：this.props.children的值有三種可能：若是當前組件沒有子節點，它是undefine; 若是有一個子節點，數據類型是Object; 若是有多個子節點，數據類型是Array。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var HelloMessage = React.createClass({
            render: function(){
                return (
                    <div>
                        <ol>
                            {
                                <!-- {this.props.children} -->
                                <!-- React.Children.map()是React提供的對children的遍歷 -->
                                React.Children.map(this.props.children,function(child){
                                    return <li>{child}</li>;
                                })
                            }
                        </ol>
                    </div>
                );
            }
        });
        ReactDOM.render(
                        <div>
                            <HelloMessage>HelloMessage1</HelloMessage>
                            <HelloMessage>HelloMessage2</HelloMessage>
                            <HelloMessage>HelloMessage3</HelloMessage>
                        </div>,
                        document.querySelector('#example')
                    );
    </script>
</body>
</html>

 

9、樣式

在作Web開發中，元素的樣式是必不可少的，由於沒有CSS佈局，渲染的界面會是很醜的，那麼在JSX中是如何使用樣式的呢？有兩種方式，分別以下所示：

一、引用CSS佈局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>

    <style type="text/css">

        #container {
            padding: 50px;
            background-color: red;
        } /*
　　 這種方式不以下面採用類名的方式設置CSS佈局更直接 div div div { padding: 10px; margin: 10px; display: inline-block; background-color: #ffde00; color: #333; font-family: monospace; text-align: center;
        } */
        .helloMessage {
            padding: 10px;
            margin: 10px;
            display: inline-block;
            background-color: #ffde00;
            color: #333;
            font-family: monospace;
            text-align: center;
        }

    </style>

</head>
<body>
    <div id="container"></div>
    <script type="text/babel">
        var HelloMessage = React.createClass({
            render: function(){
                return (
                    <div className="helloMessage"> //添加類名，只能是className，不能寫成class
                        {this.props.children}
                    </div>
                );
            }
        });
        ReactDOM.render(
                        <div>
                            <HelloMessage>I</HelloMessage>
                            <HelloMessage>A</HelloMessage>
                            <HelloMessage>M</HelloMessage>
                            <HelloMessage>X</HelloMessage>
                            <HelloMessage>Y</HelloMessage>
                            <HelloMessage>Q</HelloMessage>
                        </div>,
                        document.querySelector('#container')
                    );
    </script>
</body>
</html>

二、嵌入JSX佈局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>

    <style type="text/css">
        #container {
            padding: 50px;
            background-color: red;
        }
    </style>

</head>
<body>
    <div id="container"></div>
    <script type="text/babel">
        var HelloMessage = React.createClass({

            render: function(){                            
                                
                //將CSS的樣式生成一個JS對象
                var helloMessageStyle = {
                    padding: 10,
                    margin: 10,
                    backgroundColor: this.props.bgcolor, //獲取組件屬性bgcolor
                    color: "#333",
                    display: "inline-block",
                    fontFamily: "monospace",
                    fontSize: 32,
                    textAlign: "center"
                };

                return (
                    <div style={helloMessageStyle}> //將上面的CSS的JS對象嵌入到JSX中
                        {this.props.children}
                    </div>
                );
            }
        });
        ReactDOM.render(
                        <div>
                            <HelloMessage bgcolor="#58B3FF">I</HelloMessage> //設置組件屬性bgcolor
                            <HelloMessage bgcolor="#FF605F">A</HelloMessage>
                            <HelloMessage bgcolor="#FFD52E">M</HelloMessage>
                            <HelloMessage bgcolor="#49DD8E">X</HelloMessage>
                            <HelloMessage bgcolor="#AE99FF">Y</HelloMessage>
                            <HelloMessage bgcolor="#EF4d6F">Q</HelloMessage>
                        </div>,
                        document.querySelector('#container')
                    );
    </script>
</body>
</html>

 

10、事件

俗話說代碼之間沒有交互，就至關於沒有靈魂。瞭解了React中JSX的定義和樣式後，再來看看JSX中如何完成事件綁定的。其實，JSX中事件的綁定和HTML使用的綁定事件幾乎是同樣的，JSX支持全部的HTML元素的事件。不過，須要注意的是，JSX中的事件名稱必須採用駝峯式寫法。例如點擊事件，須要寫成onClick，不能寫成onclick，不然不會生效。無參數時：onClick = {function.bind(this)}、有參數時: onClick = {function.bind(this, 'argName')}。以下所示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>

    <style type="text/css">
        #container {
            padding: 50px;
            background-color: red;
        }
    </style>

</head>
<body>
    <div id="container"></div>
    <script type="text/babel">
        var HelloMessage = React.createClass({

            render: function(){
                //定義一個點擊函數的js事件對象並接收一個參數
                function testClick(message){
                    alert(message);
                }

                var helloMessageStyle = {
                    padding: 10,
                    margin: 10,
                    backgroundColor: this.props.bgcolor,
                    color: "#333",
                    display: "inline-block",
                    fontFamily: "monospace",
                    fontSize: 32,
                    textAlign: "center"
                };
                                
                //對組件綁定上面的事件，並傳入參數
                return (
                    <div style={helloMessageStyle} onClick={testClick.bind(this, this.props.message)}>
                        {this.props.children}
                    </div>
                );
            }
        });
        ReactDOM.render(
                        <div>
                            <HelloMessage bgcolor="#58B3FF" message='I'>I</HelloMessage>
                            <HelloMessage bgcolor="#FF605F" message='A'>A</HelloMessage>
                            <HelloMessage bgcolor="#FFD52E" message='M'>M</HelloMessage>
                            <HelloMessage bgcolor="#49DD8E" message='X'>X</HelloMessage>
                            <HelloMessage bgcolor="#AE99FF" message='Y'>Y</HelloMessage>
                            <HelloMessage bgcolor="#EF4d6F" message='Q'>Q</HelloMessage>
                        </div>,
                        document.querySelector('#container')
                    );
    </script>
</body>
</html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程