走進React

時間 2020-06-10

標籤走進 react 欄目 React 简体版

原文原文鏈接

走進React

　　React是一個構建用戶界面的JavaScript庫，是Facebook公司在2013年5月在github上開源的。其特色以下：javascript

高效--React經過對DOM的模擬，最大程度地減小和DOM的交互。
JSX--它是對JavaScript的擴展，在React中能夠不使用JSX，可是咱們建議使用之。
它主要是用於構建UI，不少人認爲React是MVC中的V（視圖）。

第一部分：React基本結構

　　React的基本結構大體以下：html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">java

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);react

</script>
</body>
</html>webpack

　　在這個React的基本結構裏，咱們須要明白三點：git

不管怎麼說，React也是一個js庫，這裏咱們首先要加載三個js文件，其中react.min.js文件時React的核心文件，這個js文件有18000多行；react-dom.min.js提供了與DOM相關的功能，以前咱們也提到了「React經過對DOM的模擬，最大程度地減小和DOM的交互」，這個文件只有40多行代碼;browser.min.js 能夠將JSX語法轉化爲Javascript語法，這裏咱們引用的cdn,若是下載該文件，會有1.3M之多，因此通常只在生產環境中，在線上纔會使用cdn。（注意：生產環境是指程序員在開發程序的開發環境，而線上環境是指上線以後的環境，二者是不一樣的）
咱們能夠看到<script type="text/babel">其中的babel替換了咱們十分熟悉的javascript，這是由於這裏使用的JSX的語法，而不是JavaScript的語法，需格外注意。
React和Babel他倆不是一回事，其中React是JavaScript的擴展，而Babel是一個編譯器。他們兩個的關係就是經過Babel咱們能夠把JSX轉化爲普通的JavaScript代碼。
固然，React JSX代碼也能夠放在一個獨立文件中，好比咱們建立了一個myReact.js文件用於編寫JSX代碼，咱們只須要這樣引用<script type="text/babel" src="./js/myReact.js"></script>

　　另外這個例子獲得的結果是顯示 Hello world! 而ReactDOM.render()就是一個核心方法。React代表這是由React提供的方法，DOM代表此方法與DOM密切相關，render的由於是「渲染」。因此這裏的意思就是將<h1>Hello，world!</h1>渲染到html中id爲example下。值得注意的是，在JavaScript中對於html標籤必定要打引號的，而這裏沒有使用引號，這也正體現了JSX的特別之處。可是JSX到底是什麼呢？它還有什麼特別的用處呢？下面咱們就能夠對它瞭解。程序員

　　這裏使用了引入js的方法，還可使用webpack打包的方法，把全部的js文件打包到同一個文件中，最後的結構相似這樣：（這裏有相關方法）　　github

<html>
  <head>
    <meta charset="utf-8">
    <title>Add style to React</title>
  </head>
  <body>
    <div id="content" />
    <script src="public/bundle.js" type="text/javascript"></script>
    <span style="float:center">Yo!</span>
  </body>
</html>

第二部分：JSX

　　 JSX也是Facebook團隊提出的一個語法方案，它能夠在JavaScript的代碼中直接使用HMTL標籤來編寫JavaScript對象。它是一個相似於XML的JavaScript語法擴展（JSX的全稱即爲JavaScriptXML），這種語法方案須要經過JSXTransformer來進行編譯轉換成真實可用的JavaScript代碼。web

　　React是基於組件的開發思想，它認爲組件是一個徹底獨立的沒有任何其餘依賴的模塊文件，一個組件中能夠有本身的樣式(Inline Style)和結構(JSX編寫的HTML)。　segmentfault

　　React使用JSX來代替常規的JavaScript，由於使用JSX後執行地更快，用它編寫模版也很是簡單。

　　基本語法以下：

　　1. 使用JSX來建立一個HTML標籤，首字母小寫：

var link = <href="#">Hello World</a>

　　注意：這即是JSX語法，若是使用JavaScript，那麼link變量值不多是一個標籤！！！

　　上面的這句代碼實際上至關於調用了React.createElement('a',{href:'#'},'Hello World!');因而咱們能夠看到React.createElement()方法接收三個參數：‘標籤的名稱’，｛屬性的名稱：屬性值｝，'標籤的內容'。（注：顯然React.createElement()方法是JavaScript語法，而var link = <href="#">Hello World</a>是JSX語法。具體咱們能夠這樣使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react.js</title>
     <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var link = <a href="#">Hello World</a>;
        ReactDOM.render(
            link,
            document.getElementById('example')
        );
    </script>
</body>
</html>

　　關於ReactDOM.render()方法後面會講到，大體上說它是一個將html元素渲染的方法。

　　咱們在https://babeljs.io/repl/這個網站上能夠在線將jsx代碼轉化爲js代碼，這裏將上面的js代碼轉化以下：

"use strict";

var link = React.createElement(
    "a",
    { href: "#" },
    "Hello World"
);
ReactDOM.render(link, document.getElementById('example'));

　　能夠看到，原生的js代碼來使用起來更加的麻煩，這也是使用jsx語法的最大好處和動因。

　　2.使用JSX來建立一個Component(組件，後面會詳細講解)，首字母大寫：

var HelloWorld = <HelloWorld foo="bar"></HelloWorld>

　　注意：上面之因此嚴格要求區分首字母的大小寫，這是由於這樣JSX能夠很簡單的經過區分首字母的大小寫來判斷轉換的是HTML標籤仍是自定義的Component標籤。就像var a=5; 這裏a顯然是Number類型的，而var a = 'hello'; 顯然這裏的a就是string類型的，這樣咱們就無需再去判斷了，從而更加簡便。　

　　3.JSX能夠經過{變量名}這種形式來插入一個JavaScript變量。以下所示：

var variable = "World";
<a href="#"> hello {variable}!</a>

　　　因而咱們居然看到JavaScript語法和HTML語法完美結合！

　　4.剛剛說了能夠經過{變量名}來插入一個JavaScript變量，實際上，咱們還能夠經過{一個一次就能執行完的語句}在JSX中插入一個一次就能執行完成的JavaScript代碼。也就是說：咱們能夠在JSX中使用JavaScript表達式，但表達式必定要寫在{}中。以下所示：

var link = <a href="#"> Hello {conditions ? 'zzw':''}! </a>;

　　因爲這是JSX語法，須要編譯，編譯以後獲得的就是以下語法（顯然編譯獲得的JS語法）：

var link = React.createElement('a',{href:'#'},if(conditions){zzw});

　　因而咱們能夠獲得這樣的一個結論：JSX的基本語法規則爲：遇到HTML標籤（以<開頭），就用HTML規則解析；遇到代碼塊(以{開頭)就用JavaScript規則解析。

　　5.1 以前所說的都是單個標籤的狀況，若是有多個（語句）呢？這時應當注意：不管你的JSX代碼有多長，每一段代碼都只能有一個根節點，不然編譯經過不了，以下所示：

var test = (
      <button>點擊</button>
      <h1>錯誤的語法</h1> 
);

var test = （
      <div>
        <button>點擊</button>
        <h1>正確的語法</h1> 
      </div>
　　　　）;

　　5.2 咱們更經常使用的是ReactDOM.render()方法（這個方法也是JSX語法），它接受兩個參數：第一個參數時html元素，如<h1>哈哈</h1>;第二個參數是獲取一個元素，即要將第一個參數插入的地方，如document.getElementById("#ha");具體舉例以下所示：

ReactDOM.render(
    <div>
    <h1>JSX學習</h1>
    <h2>React 學習</h2>
    <p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p>
    </div>
    ,
    document.getElementById('example')
);

　　值得注意的是：這裏咱們添加了自定義屬性data-myattribute,且添加自定義屬性時必定要添加data-前綴。

　　6.由於JSX能夠直接將HTML寫在JavaScript代碼中，因此對於HTML中的屬性可能會和JavaScript的關鍵字衝突，爲避免衝突，咱們必須作出相應的轉變，如HTML的類class須要在JSX中寫成className，而for須要轉化成htmlFor。

　　7. 以前咱們說過：React是基於組件的開發思想，它認爲組件是一個徹底獨立的沒有任何其餘依賴的模塊文件，一個組件中能夠有本身的樣式(Inline Style)和結構(JSX編寫的HTML)。

　　　而以前咱們已經介紹了使用JSX來直接編寫HTML，這裏咱們將會把樣式添加到這裏組件中，舉例以下所示：

　　這裏應當知道：mystyle是一個對象，因此var myStyle = 後面用的是花括號。 定義的inline_style對象中的屬性名(key)就是樣式的屬性，若是該屬性有「-」，那麼咱們應當將之轉化爲駝峯式，如本例中的fontSize，不須要寫px，對於數字，會自動加上px，固然直接寫成fontSize:100px'; 雖然這裏把樣式寫成了內聯的形式（在組件內部）違反告終構、表現相分離的原則，可是它卻解決了由於分離帶來的組件獨立性的問題。

　　8. JSX支持組件的命名空間。

　　9.代碼風格建議：爲了有更好的可讀性，不管是單行語句仍是多行語句，都建議使用()來包裹JSX語句。

第三部分：React組件

　　組件是React的核心部分。

　 React容許將代碼封裝成組件（component）,而後像插入普通HTML標籤同樣，在網頁中插入這個組件。而React.createClass方法就用於生成一個組件類。

　　先看下面的這個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react.js</title>
     <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
    var MyComponent = React.createClass({
        render:function(){
            return <h1> hello {this.props.name}! </h1>
        }
    });    
    
    ReactDOM.render(
        <MyComponent name="zhenwei"/>,
        document.getElementById('example')
    );
    </script>
</body>
</html>

　　上面的代碼中，變量MyComponent就是一個組件類。模版插入<MyComponent/>（注意這裏不須要寫成‘開始標籤+結束標籤’的形式）時，就會自動生成MyComponent的一個實例，且全部的組件類都須要有本身的render方法，用於輸出組件（即由render方法肯定輸入的組件實例的形式）。

　　而其中的props是指全部的屬性的集合（即屬性properties的縮寫形式），能夠看做一個數組對象，本例的name只是props中的其中一個屬性，還能夠有其餘的屬性，以下例所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react.js</title>
     <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
    var MyComponent = React.createClass({
        render:function(){
            return <h1> hello {this.props.name} , you are {this.props.gender} ! </h1>
        }
    });    
    
    ReactDOM.render(
        <div>
        <MyComponent name="zhenwei" gender="male"/>
        <MyComponent name="heting" gender="female"/>
        </div>,
        document.getElementById('example')
    );
    </script>
</body>
</html>

最終咱們能夠看到效果以下：

值得注意的是：在ReactDOM.render()中的兩個組件實例必須由div包裹起來，由於在第一個參數中不得有兩個根元素，不然會報錯，以下面的形式就是錯的：

    ReactDOM.render(
        <MyComponent name="zhenwei" gender="male"/>
        <MyComponent name="heting" gender="female"/>
        ,
        document.getElementById('example')
    );

報錯以下：

　　固然，上面這種建立組件的方式是可行的，可是進來React又有了新的建立方式，即函數法，咱們能夠把組件看做函數同樣來建立，因而咱們能夠把上面代碼的React.createClass部分替換成以下的函數，並獲得相同的答案：　　

    function MyComponent (props){
      return <h1> hello {props.name} , you are {props.gender} </h1> ;
    }

第四部分： React State(狀態)

　　咱們能夠將React的組件當作是一個狀態機，一開始有一個初始狀態，這時有一個對應的UI；而後用戶和頁面互動以後，致使狀態發生了改變，從而觸發重新渲染UI。以下例所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 實例</title>
    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
    var LikeButton = React.createClass({
          getInitialState: function() {
            return {liked: false};
          },
          handleClick: function(event) {
            this.setState({liked: !this.state.liked});
          },
          render: function() {
            var text = this.state.liked ? 'like' : 'haven\'t liked';
            return (
              <p onClick={this.handleClick}>
                You {text} this. Click to toggle.
              </p>
            );
          }
    });

    ReactDOM.render(
      <LikeButton />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

　　顯然，在上面的代碼中LikeButton是一個組件，其中getInitialState方法是固有的、React給咱們提供的方法，用於定義這個「狀態機」的初始狀態，這個狀態是一個對象，且咱們能夠經過this.state來改變；而handleClick方法是說當咱們點擊時，會自動切換兩種狀態。

這裏須要注意的是：

state即爲組件的狀態，咱們也能夠把它和props同樣看做是數組對像，其中liked僅僅是這個數組對象中的其中一個屬性，也就是說，state下面還能夠有更多的屬性。
state和props的區別在於，props表示那些一旦定義就不會再改變的特性；而state表示那些會隨着用戶互動而改變的特性。

第五部分：this.props.children　　

　　該屬性不一樣於this.props，它表示組件的全部子元素節點。而且React提供了一個方法即React.Child.map方法來遍歷子元素節點，而不用擔憂this.props.children是undefined類型（當組件沒有元素子節點時）、仍是object類型(當組件有一個元素子節點時)、或者是array類型(當組件有兩個及以上的元素子節點時)。由於React.Child.map方法能夠很好地處理各類狀況，舉例以下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 實例</title>
    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
        var MyComponent = React.createClass({
            render:function(){
                return (
                    <ol>
                        {
                            React.Children.map(this.props.children,function(child){
                                 return    <li>{child}</li>;
                            })
                        }
                        {/*凡是出現js代碼塊的地方，咱們都須要在外圍添加 {} ,來告訴React如何去解析*/}
                    </ol>
                ); 
                {/*這裏的return是一個語句，因此最後要添加分號*/} 
            }
                                     
        });
        ReactDOM.render(
            <MyComponent>
                <span>這是react</span>
                <span>這是JSX</span>
                <span>這是JavaScript</span>
            </MyComponent>
            ,
            document.body
        );
    </script>
  </body>
</html>

注意

咱們在JSX中使用註釋時，必須將註釋包裹在{}中，即{/*這是一條註釋*/}這樣的形式。不然將會報錯。
在return 以後，由於return的是<ol>這樣的html標籤，因此後面應當添加()來告訴React如何去解析，不然會報錯。
因爲render: function....這是一種相似函數聲明的方式，因此最後是不可加分號的，不然會報錯。這裏也能夠看做是建立的對象，由於該對象中只有一個屬性，因此咱們不須要在末尾添加符號。
遺留問題1：我在return （以後添加註釋時，總會不錯，不清楚是什麼問題。
遺留問題2：我在render:function()...這個函數聲明的末尾也沒法成功添加註釋。

第六部分：表單

　　用戶在表單中填入內容，這就是用戶跟組件的互動，因此不能用this.props讀取，由於咱們以前說過「this.props表示那些一旦定義，就不能再改變的特性，而this.state是會隨着用戶互動而產生變化的特性」。因此這裏要互動，就得使用this.state來跟組<!DOCT<html>

 <head> <meta charset="UTF-8" /> <title>React 實例</title> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.runoob.com/assets/react/browser.min.js"></script> </head> <body> <script type="text/babel"> var Input = React.createClass({ getInitialState: function() { return {value: ''}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value = this.state.value; var myStyle={ width:'500px', height:'50px', fontSize:25, backgroundColor:'#ccc' }; return ( <div> <input type="text" value={value} style={myStyle} onChange={this.handleChange} /> <h1>I will repeat the input:{value}</h1> </div> ); } }); ReactDOM.render(<Input/>, document.body); </script> </body> </html>

React.createClass方法中由於包含的是JavaScript代碼，因此須要用{}括起來，咱們也能將之看做一個對象，有三個屬性，而這三個屬性又都是三個方法。

　　其中getInitialState()方法用來設置初始狀態；而handleChange()方法是用來處理change事件的，change事件被觸發時，就會將event.target.value設置位當前的狀態，而event.target即爲觸發這個事件的html元素，本例中即爲input元素； 而render方法則是必須的，用來告訴瀏覽器如何將這個組件渲染，最終效果以下所示：
　　

第七部分：組件的生命週期

　　組件的生命週期能夠分爲如下三個狀態：

Mounting:已經插入真實DOM。（注：mounting的中文意思即增長，嵌入）
Updating: 正在被從新渲染。（注：updating的中文意思即更新）
Unmounting:已移出真實DOM （注：unmounting即和mounting相反）

　　React爲每種狀態提供了兩種處理函數，will函數在進入狀態以前使用，did函數在進入狀態以後使用，三種狀態能夠有五種處理函數，以下所示：

componentWillMount() 即組件插入時
componentDidMount() 即組件插入後
componentWillUpdate() 即組件更新時
componentDidUpdate() 即組件更新後
componentWillUnmount() 即組件移出時

　　另外React還提供了兩種特殊狀態的處理函數：

componentWillReceiveProps() 即當已加載組件接受到參數時調用
shouldComponentUpdate() 即組件判斷是否從新渲染時調用

　　下面是一個與之相關的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react.js</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<style>
.my_own_class{
font-size: 25px;
color:red;
}
</style>
</head>
<body>
<div id="container">

</div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState:function(){
alert("init");
return {
opacity:1.0,
fontSize:'22px',
color:'red'
};
{/*關鍵：上面返回的值咱們通常能夠經過this.state獲得，顯然，這樣獲得的是一個對象。*/}
},
render:function(){
return <div style={this.state} > Hello ,{this.props.name} </div>
},
componentWillMount:function(){
alert("will");
},
componentDidMount:function(){
alert('did');
var _self = this;
{/*這裏之因此要把this賦值給_self，是由於這以前this指的是組件實例；而在window.setTimeout函數中時，this就指向了global全局環境，因此須要把this賦值給_self*/}
window.setTimeout(function(){
_self.setState({
opacity:0.3,
fontSize:'50px',
color:'blue'
});
},1000);
{/*顯然，這一句代碼被執行時，就處在了updating階段*/}
}
});
{/* 注意:props一旦定義，通常不可再變化；然而state仍是能夠不斷變化的。 */}

ReactDOM.render(
<Hello name="zhuzhenwei" />,
document.getElementById("container")
);
</script>
</body>
</html>

這一部份內容較爲重要，咱們能夠參考慕課網視頻，點擊進入。

第八部分：事件監聽、組件複用與獲取dom的真實節點

　　　　咱們經過下面的這個例子來學習這一部分的知識內容，以下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react.js</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<style>

</style>
</head>
<body>
<div id="container">
  <!-- This element's content will be replaced by your component. -->
</div>
<script type="text/babel">
  var  TestClickComponent = React.createClass({
      handleClick:function(event){
          var tipE=React.findDOMNode(this.refs.tip);
          {/* 上面這行代碼的做用是拿到ref="tip" 的span的真實節點，其中 this.refs.tip只是虛擬節點，只有使用React.findDOMNode()方法才能夠獲得其真實節點。須要格外注意大小寫，由於JSX是嚴格區分大小寫的。*/}
          if(tipE.style.display==='none'){
              tipE.style.display='inline-block';
          }else{
              tipE.style.display='none';
          }
          event.stopPropagation();
          event.preventDefault();
      },
      render: function(){
          return (
            <div>
              <button onClick={this.handleClick}>顯示|隱藏</button><span ref="tip">測試點擊</span>
            </div>
          );   
      }
  });

  var  TestInputComponent = React.createClass({
      getInitialState:function(){
          return {
            inputContent:''
          };
      },
      changeHandler:function(event){
          this.setState({
            inputContent: event.target.value
          });
          {/*注意:this.setState（）函數必定是須要在圓括號內添加花括號的，而後再添加須要設置的狀態state*/}
          event.stopPropogation();
          event.preventDefault();
      },
      render: function(){
          return (
          <div>
            <input type="text" onChange={this.changeHandler}/> <span>{this.state.inputContent}</span>
            {/*這裏綁定了onChange事件（因爲這個虛擬節點，因此和純粹的html是不一樣的），注意區分大小寫。且一旦發生了onChange事件，就會回調this.changeHandler函數*/}
          </div>

          );
      }
  });


  React.render(<div><TestClickComponent/><br/><br/><br/><TestInputComponent/></div>,document.getElementById('container'));
  {/*
    注意：第一：React.render()函數中的第一個參數必須只能有一個頂層標籤，因此咱們須要使用div包裹起來。
          第二：這裏咱們使用了三個<br/>，這是爲了在實驗時更加地清楚，可是這違背了最佳實踐---樣式和結構的徹底分離，在作項目的過程當中，咱們千萬不能這麼作！
  */}
</script>
</body>
</html>