ReactJS入門學習二

時間 2019-11-22

標籤 reactjs 入門學習简体版

原文原文鏈接

ReactJS入門學習二javascript

閱讀目錄css

React的背景和基本原理html

在web開發中，咱們總須要將變化的數據實時反應到UI上，這時就須要對DOM進行操做，複雜或頻繁的對DOM操做是性能瓶頸產生的緣由，React爲此引入了虛擬的DOM的機制，在瀏覽器端使用javascript實現了一套DOM API，基於React開發時全部的DOM構造都是經過虛擬的DOM進行的，每當數據有變化時，React都會從新構建整個DOM樹，而後React將當前的整個DOM樹與以前的DOM樹進行對比，獲得變化的部分，而後將變化的部分進行實際的瀏覽器的DOM更新，並且React可以批處理虛擬的DOM刷新，在一個事件循環內的兩次數據的變化會被合併，好比你連續先將節點內容A變成B，而後將B變成A，React會認爲UI不發生任何變化。儘管每一次都須要構造完整的虛擬DOM樹，可是虛擬DOM樹是內存數據，性能是很是高的，而對實際的DOM進行操做僅僅是Diff部分，所以能夠提升性能。在保證性能的同時，咱們將再也不須要關注某個數據的變化如何更新到一個或者多個具體的DOM元素，而只須要關心在任意一個數據狀態下，整個界面是如何Render的。前端

React組件化：java

虛擬DOM不只帶來了簡單的UI開發邏輯，同時也帶來了組件開發的思想，所謂組件，即封裝起來的具備獨立功能的UI部件，React推薦以組件的方式去重寫思考UI構成，將UI上的每個功能相對獨立的模塊定義成組件。而後將小組件經過嵌套的方式變成大組件，最終構成完整的UI構建。若是說MVC的思想讓咱們作到表現，數據，控制的分離，那麼React則以組件化的思考方式則帶來了UI模塊間的分離，好比我上一篇文章介紹的網站頁面同樣：以下圖：react

導航條，側邊欄及內容區分別爲不一樣的小組件經過嵌套的方式變成一個完整的UI界面構建。jquery

React組件應該有以下特徵：web

可組合：一個組件易於與其餘組件一塊兒使用，或者說嵌套在另外一個組件內部。
可重用：每一個組件都具備獨立的功能，它能夠被使用在多個UI場景。
可維護：每一個小的組件僅僅包含自身的邏輯，更容易理解及維護。

下面咱們首先使用React時候須要引用以下JS，react.js和JSXTransformer.js，下面的HTML代碼以下：算法

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="js/react.js"></script>
  <script src="js/JSXTransformer.js"></script>
 </head>
 <body>
    <div id = "demo"></div>
    <script type="text/jsx">
        // code
    </script>
 </body>
</html>

回到頂部

理解React.render()瀏覽器

React.render()是用於將模版轉爲HTML語言，而且插入指定的DOM節點。

以下代碼：

React.render(
    <h1>hello,world!</h1>,
    document.getElementById("demo")
);

頁面生成HTML結構以下：

頁面顯示以下：

回到頂部

什麼是JSX？

React的核心機制就是實現了一個虛擬DOM，利用虛擬DOM來減小對實際DOM的操做從而提高性能，組件DOM結構就是映射到這個虛擬的DOM上，React在這個虛擬DOM上實現了一個diff算法，當要更新組件的時候，會經過diff尋找要變動的DOM節點，再把這個修改更新到瀏覽器實際的DOM節點上，因此實際上不是真的渲染整個DOM樹，這個虛擬的DOM是一個純粹的JS數據結構，因此性能比原生DOM會提升不少；

虛擬DOM也能夠經過Javascript來建立，好比以下代碼：

var child1 = React.createElement('li',null,'First Text Content');
var child2 = React.createElement('li',null,'second Text Content');
var root = React.createElement('ul',{className:'test'},child1,child2);

React.render(root,document.getElementById("demo"));

在頁面中渲染成結構變成以下：

在頁面顯示以下：

可是這樣編寫代碼可讀性很差，因而React就出現了JSX，使用以下的方式建立虛擬DOM；

var root = (
        <ul className="test">
            <li>First Text Content</li>
            <li>second Text Content</li>
        </ul>
);
React.render(root,document.getElementById("demo"))；

上面2種方式實現的效果都同樣，可能不少人會認爲引入一個JSX的源碼進來會影響頁面性能，在這裏咱們只是爲了測試而已，若是真的在開發項目中，JSX在產品打包階段會編譯成純粹的javascript，JSX語法不會帶來任何性能影響的。

回到頂部

爲何要使用JSX？

前端開發最基本的功能是展現數據，所以不少框架都引入了模版引擎，若是咱們不使用模版的話，那麼咱們須要手動並接一個很長的html字符串，而且這樣並接很容易出錯，代碼也不太美觀，且最重要的是展現邏輯和業務邏輯沒有獲得足夠的分離(使用MVC思想考慮);所以React就發明了JSX；

回到頂部

JSX的語法

JSX容許HTML與javascript混寫，以下代碼：

var names = ['longen1','longen2','longen3'];
React.render(
    <div className="aa">
        {
            names.map(function(name){
                return <p>Hello,{name}</p>
            })
        }
        </div>,document.getElementById("demo")
);

JSX的語法規則是：遇到HTML標籤(以<開頭)，就是用HTML的規則解析，遇到代碼塊(以{開頭)，就用jSX的語法規則解析；上面的代碼生成以下：

理解this.props

Props表示的是組件自身的屬性，是父層節點傳遞給子層節點的一些屬性或者數據，以下代碼：

var HelloMessage = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});
React.render(<HelloMessage name="John" />, document.getElementById("demo"));

理解this.props.children

this.props對象的屬性與組件的屬性一一對應，可是有一個列外，就是this.props.children屬性。它表示的是組件的全部子節點；

以下代碼：

var NotesList = React.createClass({
    render: function() {
        return (
            <ol>
              {
                this.props.children.map(function (child) {
                  return <li>{child}</li>
                })
              }
             </ol>
        );
     }
});
React.render(
     <NotesList>
        <span>hello</span>
        <span>world</span>
    </NotesList>,
    document.getElementById("demo")
);

在頁面顯示以下：

理解React.createClass方法

React容許將代碼封裝成組件，而後像普通的HTML同樣插入，React.createClass方法用於生成一個組件類；以下代碼：

var NodeList = React.createClass({
    render: function() {
        return <h1>Hello {this.props.name}</h1>;
    }
});
React.render(
    <NodeList name="John" />,
    document.getElementById('demo')
);

如上代碼；NodeList就是一個組件類，模版插入<NodeList />時，會自動生成一個NodeList的實列；全部組件都必須有一個render()方法，用於輸出組件；如上<NodeList name=」John」/>就是加入了一個屬性name，組件上的屬性咱們可使用this.props對象上獲取，好比上面的name屬性就能夠經過this.props.name讀取；

在頁面顯示以下：

理解this.state

this.state是組件私有的,咱們能夠經過this.setState()來改變它，那麼組件會從新渲染下本身；以下代碼：

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>
        );
    }
});
React.render(
    <LikeButton />,
    document.getElementById('demo')
);

如上代碼先使用 getInitialState() 方法用於定義初始狀態(且只執行一次)，當用戶點擊時候，調用handleClick函數，使用this.setState來動態的更改值，每次更改後，會自動調用render()進行渲染組件。

this.props與this.state的區別？

this.props是指屬性從父節點元素繼承過來的，且屬性不能夠更改的。

this.state 是指能夠動態更改的；是組件的私有的；

Refs和findDOMNode()

爲了同瀏覽器交互，咱們有時候須要獲取真實的DOM節點，咱們能夠經過React的 React.findDOMNode(component)獲取到組件中真實的DOM；

以下代碼：

var MyComponent = React.createClass({
    handleClick: function() {
        React.findDOMNode(this.refs.myTextInput).focus();
    },
    render: function() {
        return (
            <div>
                <input type="text" ref="myTextInput" />
                <input
                      type="button"
                      value="Focus the text input"
                      onClick={this.handleClick}
                    />
              </div>
            );
        }
    });
    React.render(
        <MyComponent />,
        document.getElementById('demo')
    );

組件MyComponent的子節點有一個文本輸入框，點擊按鈕後，把焦點放在輸入框內，這時候咱們須要先獲取到MyComponent組件內的真實的DOM節點，爲了作到這點，文本輸入框必須有一個ref屬性，而後 this.refs.[refName]就指向與這個虛擬的DOM子節點，最後經過React.findDOMNode獲取真實的DOM節點。

理解React.createElement

參數：type(string), config(object), children(子節點)

以下代碼

var CommentBox = React.createClass({
    displayName: 'CommentBox',
    render: function(){
        return (
            React.createElement('div',{className:'commentBox'},"Hello,world!I am a CommentBox")
        );
    }
});
React.render(
    React.createElement(CommentBox,null),document.getElementById("demo")
);

在頁面上顯示以下：

理解React.PropTypes

驗證使用組件時，提供的參數是否符合要求，組件的屬性能夠接受任意值，字符串，對象，函數均可以；好比以下代碼，驗證組件中的 title屬性是不是字符串；以下代碼：

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired
  },
  render: function() {
     return  this.props.title == 1234 ? <p>是一個字符串</p> : null
   }
});
var data = "123";
React.render(
  <MyTitle title="1234" />,document.getElementById("demo")
);

能夠看到，在頁面打印出是一個字符串；

理解React.isValidElement

參數object

判斷參數是不是一個合法的的ReactElement，並返回Boolean值；以下代碼測試

var Longen = React.createClass({
    render: function() {
        return <p>123</p>     
}
});
var test = <Longen/>,
test2 = '<Longen/>';
console.log(React.isValidElement(test));  //true
console.log(React.isValidElement(test2));  //false

回到頂部

如何在JSX中如何使用事件

咱們之前編寫事件以下：

<button onclick="checkAndSubmit(this.form)">Submit</button>

這樣編寫代碼對於簡單的html頁面時沒有問題，可是對於複雜的的頁面，咱們可使用以下javascript來綁定事件：咱們能夠引用jquery；

$('#id').on('click', this.checkAndSubmit.bind(this));

可是在JSX中咱們能夠以下綁定事件：

在JSX中咱們不須要關心何時去移除事件綁定，由於React會在對應的真實的DOM節點移除就自動解除了事件綁定；

React並不會真正綁定事件到每個元素上，而是採用事件代理的方式，在根節點document上爲每種事件添加惟一的listener，而後經過事件的target找到真實的觸發目標元素，這樣從觸發元素到頂層節點之間的全部節點若是有綁定這個事件的話，React都會觸發對應的事件函數，這就是React模擬事件系統的基本原理。

儘管整個事件系統由React管理，可是其API和使用方法與原生事件一致。這種機制確保了跨瀏覽器的一致性：在全部瀏覽器（IE9及以上）均可以使用符合W3C標準的API，包括stopPropagation()，preventDefault()等等。對於事件的冒泡（bubble）和捕獲（capture）模式也都徹底支持。

下面咱們來作一個demo，來使用下JSX下的事件以下使用：

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});
React.render(<Input/>, document.getElementById("demo"));