React.js

時間 2019-11-10

標籤 react.js react 欄目 React 简体版

原文原文鏈接

react

　　Facebook內部的一個javascript庫，它引入了一種新的方試來操做DOM。

　　進行數據交互的時候，利用差別算法，不用總體更新DOM，只會更新有變化的DOM，極大的提升的性能
javascript

　　官網訪問：https://facebook.github.io/react/html

　　國外網站，速度通常比較慢，能夠訪問國內的網站：http://reactjs.cn/java

　　學習過程當中，遇到任何問題均可以到這個論壇去留言：http://react-china.org/react

1、特色

一、JSX語法

html結構與js能夠混在一塊兒寫，更加清晰git

二、虛擬DOM

經過DOM diff算法，只會更新有差別化的部分，不用渲染整個頁面，從而提升效率github

三、組件化

把頁面上的功能都寫個組件，而後能夠結合起來，能夠作到重用算法

二、安裝

一、須要引入三個js文件

react.js 核心代碼數組

react-dom.js 渲染DOMbabel

browser.min.js 解析JSX語法dom

<head> <meta charset="UTF-8"> <title></title> <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script> </head>

二、script標籤的type類型必定要是text/babel

　　(browser.min.js看到type爲text/babel的script標籤後，會把裏面的內容解析成正常的js語法)

<script type="text/babel"></script>

3、js的代碼依然要用//或者//註釋，不能用html的註釋，要不會報錯**

/*ReactDOM.render( <ul> { colors.map(function(value,index){ return <li>第{index}個是:{value}</li> }) } </ul>, document.getElementById('box') );*/

三、ReactDOM.render()方法

React的最基本方法，將React的模板語法轉爲真正的HTML，並插入到指定的DOM節點裏，再渲染它

參數1：建立的元素

參數2：要添加給誰（DOM元素）

參數3：渲染成功後的回調函數

<script type="text/babel"> ReactDOM.render( <h1>kaivon</h1>,　　//建立的元素 document.getElementById('box'),//要添加給誰（DOM元素)　　 function(){ console.log('渲染完成了');//渲染成功後的回調函數  } ); </script>

四、JSX語法　　JavaScript XML

概念

React的語法，它容許HTML與JavaScript混寫，在html裏能夠寫js

React不使用JSX的語法也能夠工做，使用的話會提升組件的可讀性，推薦使用JSX

特色

一、遇到尖括號開頭的解析成html。遇到大括號開頭的解析成JavaScript

注意：大括號要解析成js代碼，因此裏面不要有分號

var colors=['red','green','blue']; ReactDOM.render( <ul> { colors.map(function(value,index){ return <li>第{index}個是:{value}</li>  }) } </ul>,　　　　　　　　　　　　//第一個參數 document.getElementById('box') //第二個參數 );

　　二、能夠在模板裏插入變量，若是這個變量是個數組，則會本身把數組裏全部數據所有顯示

var arr=[ <li>kaivon</li>, <li>陳學輝</li>, <li>356985332</li> ]; ReactDOM.render( <ul>{arr}</ul>, document.getElementById('box') ）

5、定義組件

　　React中能夠把每一個功能都定義成組件，而後組件會像普通的html標籤同樣，插入到頁面中

一、建立組件

React.createClass()

注意：

一、存組件的變量名首字母要大寫

二、render的return裏只能出現一個頂層標籤

二、插入組件

把定義好的組件放在尖括號裏，就造成了一個標籤，就能以標籤的形式插入到頁面中

　插入方法：

一、<組件名/>這就是XML

二、<組件名></組件名>

<script type="text/babel"> //建立組件 var Person=React.createClass({  render:function(){ 　　return ( 　　 <div> 　　 <h1>kaivon</h1> 　　 <h2>陳學輝</h2> 　　<h3>18</h3> 　　 </div>  　　　) 　　} }); //添加組件，ReactDOM.render不只能夠輸出html結構，還能夠輸出組件  ReactDOM.render(
 <Person/>, //這裏能夠寫單標籤，也能夠寫雙標籤
 document.getElementById('box') ); </script

6、組件的屬性

　 props 它身上放的就是咱們傳進來的屬性

插入組件的時候能夠像html標籤添加屬性的方式同樣，給組件傳遞數據

<script type="text/babel"> var name='kaivon'; var age=18; var sex='男'; var Person=React.createClass({ render:function(){ return ( <div> <h1>{this.props.name}</h1> <h2>{this.props.age}</h2> <h3>{this.props.sex}</h3> </div>  ) } }); ReactDOM.render( //<Person age='18'/>, <Person name={name} age={age} sex={sex}/>, //這裏能夠寫單標籤，也能夠寫雙標籤   document.getElementById('box') ); </script>

七、組件子節點

　　props對象的屬性與組件的屬性是一一對應的，可是有一個例外，props.children屬性(組件的全部子節點)它的值不必定是一一對應的

　　props.children的值有三種類型

一、undefined 當前組件沒有子節點

二、object 當前組件只有一個子節點

三、array 當前組件有多個子節點

能夠用

React.Children.map()方法來遍歷子節點，不用擔憂它的類型是什麼，均可以遍歷出來

<script type="text/babel"> var List=React.createClass({ render:function(){ return ( <ul> { //console.log(this.props.children) 　　　　　　　React.Children.map(this.props.children,function(child){ return <li>{child}</li>  }) } </ul>  ) } }); ReactDOM.render( <List> <span>red</span> <span>green</span> </List>, document.getElementById('box') ); </script>

八、驗證組件屬性值的類型：

　　組件的屬性能夠接受任意值，字符串、對象、函數等等均可以。有時，咱們須要一種機制，驗證別人使用組件時，提供的參數是否符合要求

只會提示警告，可是內容依然能夠出來

<script type="text/babel"> var person={ name:'kaivon', age:18, sex:'男' } var Person=React.createClass({ render:function(){ return ( <div> <h1>{this.props.name}</h1> <h2>{this.props.age}</h2> <h3>{this.props.sex}</h3> </div>  ) },  propTypes:{ name:React.PropTypes.string, age:React.PropTypes.number, sex:React.PropTypes.string } }); ReactDOM.render( <Person {...person} />, document.getElementById('box') ); </script>

九、組件的狀態

組件免不了要與用戶互動，React的一大創新，就是將組件當作是一個狀態機

　　一開始有一個初始狀態， 而後用戶互動，致使狀態變化，從而觸發從新渲染UI

getInitialState() 獲取組件的狀態

一、它必需寫在建立組件的函數裏

二、它必需有一個返回值是null或者對象

　　state 獲取狀態對應的屬性值(getInitialState方法的返回值)

　　 setState() 設置組件的狀態

　　 它是組件身上的方法，組件是放在ReactDOM.render的返回值裏

<script type="text/babel">
    var Status=React.createClass({ getInitialState:function(){ return {  on:true, mes:'kaivon的第一種狀態'    //數據
 } }, render:function(){ var style={ //三目運算符 定義樣式
                color:this.state.on?'red':'blue', fontSize:this.state.on?'20px':'30px' } return ( //添加到行間樣式
                //style={style}結構裏面想要執行js,須要添加大括號
                <h2 style={style}>{this.state.mes}</h2>
 ) } }); //渲染
     //聲明一個變量接收render的返回值
   var component=ReactDOM.render( <Status/>,
        document.getElementById('box') ); //console.log(component);
 component.setState({ on:false, mes:'kaivon的第二種狀態' });</script>