react開發教程（－）初識

React初識

React是Facebook推出的一個javascript庫(用來建立用戶界面的Javascript庫)，因此他只是和用戶的界面打交道，你能夠把它當作MVC中的V(視圖)這一層。

組件

React的一切都是基於組件的。web世界的構成是基於各類HTML標籤的組合，這些標籤也叫語意化標籤每一個標籤表明一個含義，在react，vue，angular中咱們能夠將這些標籤組合成一個輪播／導航...等，能夠稱爲自定義組件。
react中最重要的特性就是基於組件的設計流程。使用React你惟一須要關心的就是如何構建組件（封裝性，複用性，測試）,以下圖，每一個塊都是一個組件，頁面由組件構建而成，就像搭積木。

每一個組件都有各自的狀態，當狀態變動時，便會從新渲染整個組件。
定義一個組件

import React, { Component } from 'react';、
import './Comment.css';

class Comment extends Component {
  render() {
    return (
      <div className="Comment">
        {this.props.name}
        {this.props.children}
      </div>
    );
  }
}
export default Comment;

能夠在其餘組件中調用這個組件

import React, { Component } from 'react';
import Comment from "./Comment";
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        {/**調用組件**/}
        <Comment name="劉宇">組件插入內容</Comment>
      </div>
    );
  }
}

export default App;

JSX

在上面的案例中能夠看到react吧html寫到js當中，這種寫法稱爲JSX。這是一種相似XML的寫法，他能夠定義相似HTML同樣簡潔的樹狀結構。這種語法結合了JavaScript語法和HTML的優勢，既能夠像日常同樣使用HTML,也能夠在裏面前套JavaScript語法。這種有好的格式，讓開發者易於閱讀和開發。並且，對於組件來講，直接使用相似HTML的格式，也是很是嗨皮的。可是須要注意的是。JSX和HTML徹底不是一回事，JSX只是做爲編輯器，把相似HTML的結構編譯成JavaScript。

注意：在瀏覽器中不能直接使用這種格式，須要添加JSX編譯器來完成這項工做。

JSX基本語法

使用類XML語法的好處是標籤能夠任意嵌套，咱們能夠像HTML同樣清晰地看到DOM樹狀結構及其屬性。好比，咱們構建一個List組件

const List = () => (
    <ul>
        <li>列表元素1</li>
        <li>列表元素2</li>
        <li>列表元素3</li>
        <li>列表元素4</li>
    </ul>
)

寫這個組件的過程就像寫html同樣，只不過它被包裹在JavaScript的方法中，須要注意如下幾點。

定義標籤時，只容許被一個標籤包裹
標籤必定要閉合

元素類型

在React中建立的虛擬元素能夠分爲兩類，DOM元素(DOM element)與組件元素(component element)
分別對應着原生DOM元素與自定義元素，而JSX與建立元素過程有這莫大的關聯，在JSX中對應的規則是HTML標籤首字母是否爲小寫字母，其中小寫首對應DOM元素，而組件元素天然對應大寫首字母

註釋

在HTML中，註釋語法是<!--註釋內容-->在jsx依舊使用的是js語法註釋，惟一要注意的是，在一個組件的子元素位置使用註釋要用{}包起來。

const List = () => (
    <ul>
        {/**這個是個列表**/}
        <li>列表元素1</li>
    </ul>
)

元素屬性

元素除了標籤以外，另外一個組成部分就是標籤的屬性。
在JSX中，不管是DOM元素仍是組件元素，他門都有屬性。不一樣的是，DOM元素的屬性是標準規範屬性，但有兩個例外--class和for，這是由於在JavaScript中這兩個單詞都是關鍵詞。所以有對應的倆個轉化

class屬性改成className。
for屬性改成htmlFor。

在組件中元素的屬性是徹底自定義的屬性，也能夠理解爲組件傳遞的參數。

<Comment name="劉宇">組件插入內容</Comment>

在自定義組件中除了上面傳遞屬性的方法外也能夠

const comment = <Comment>組件插入內容</Comment>;
comment.props.name = "劉宇";

也可使用es6語法

const data = {name:"劉宇",age:10};
const comment = <Comment {...data}>組件插入內容</Comment>;

自定義html屬性，上面說的是組件上的屬性，在JSX中往DOM元素中傳入自定義屬性，React是不會渲染的；
若是要使用HTML自定義屬性，要使用data-前綴，這與HTML標準也是一致的：

<div a="aaa"></div> //不被渲染
<div data-a="aaa"></div> //成功渲染

HTML轉譯

React會將全部要顯示到DOM的字符串轉義，防止XSS。因此，若是jsx中含有轉義後的實體字符。可使用如下方法

直接使用utf-8字符
使用對應的Unicode編碼查詢編碼；
使用數組組裝<div>{["cc",<span>©</span>," 2017"]}</div>
直接插入原始html

虛擬DOM(Virtual DOM)

在傳統的web應用中每次更新頁面的時候都須要手動操做DOM來更新

事件－》執行操做－》改變dom

DOM操做很是昂貴。在前端開發中，性能消耗最大的就是DOM操做，並且這部分的操做代碼很差維護。React把真實的DOM操做轉成JavaScript對象樹，也就是虛擬DOM;

這是普通的Html標籤寫法

<!--html-->
<a class="link" href="https://github.com/facebook/react">React<a>

這是在js中手動生成相同dom的寫法

//javascript dom
var a = document.createElement('a')
a.setAttribute('class', 'link')
a.setAttribute('href', 'https://github.com/facebook/react')
a.appendChild(document.createTextNode('React'))
//這是一種封裝，沿用的React.createElement的命名
var a = React.createElement('a', {
    className: 'link',
    href: 'https://github.com/facebook/react'
}, 'React')

全部html結構，均可以用js dom來構造，並且能將構造的步驟封裝起來，作到「數據-dom結構」的映射。
緩存初始數據，新數據進來時，與舊數據對比，找到差別，根據差別自己的性質進行dom操做；無差別，則不做爲。

dom自己在js中就是一種數據結構
console.dir(document.body)
在控制檯能夠看到body的數據結構。然而，dom相關的數據豐富並且複雜，咱們其實只關心少數元素的少數屬性。

創建一個javascript plain object，很是輕量，用它保存咱們真正關心的與dom相關的少數數據；對它進行操做，而後對比操做先後的差別，再根據映射關係去操做真正的dom，無疑能提升性能。

相對於 DOM 對象，原生的 JavaScript 對象處理起來更快，並且更簡單。DOM 樹上的結構、屬性信息咱們均可以很容易地用 JavaScript 對象表示出來：

var element = {
  type: 'ul', // 節點標籤名
  props: { // DOM的屬性，用一個對象存儲鍵值對
    id: 'list'
  },
  children: [ // 該節點的子節點
    {type: 'li', props: {className: 'item'}, children: ["Item 1"]},
    {type: 'li', props: {className: 'item'}, children: ["Item 2"]},
    {type: 'li', props: {className: 'item'}, children: ["Item 3"]},
  ]
}

上面對應的HTML寫法是：

<ul id='list'>
  <li class='item'>Item 1</li>
  <li class='item'>Item 2</li>
  <li class='item'>Item 3</li>
</ul>

每次數據更新後，從新計算虛擬DOM,並和上一次的做比較，對發生改變的部分作批量更新。React也提供了生命週期方法減小了沒必要要的對比過程，以保證性能

下一篇：react開發教程（二）安裝