摘要：定義一個組件可以在其他組件中調(diào)用這個組件調(diào)用組件劉宇組件插入內(nèi)容在上面的案例中可以看到吧寫到當中，這種寫法稱為。

React是Facebook推出的一個javascript庫(用來創(chuàng)建用戶界面的Javascript庫)，所以他只是和用戶的界面打交道，你可以把它看成MVC中的V(視圖)這一層。

React的一切都是基于組件的。web世界的構(gòu)成是基于各種HTML標簽的組合，這些標簽也叫語意化標簽每個標簽代表一個含義，在react，vue，angular中我們可以將這些標簽組合成一個輪播／導航...等，可以稱為自定義組件。
react中最重要的特性就是基于組件的設計流程。使用React你唯一需要關心的就是如何構(gòu)建組件（封裝性，復用性，測試）,如下圖，每個塊都是一個組件，頁面由組件構(gòu)建而成，就像搭積木。

每個組件都有各自的狀態(tài)，當狀態(tài)變更時，便會重新渲染整個組件。
定義一個組件

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

class Comment extends Component {
  render() {
    return (
      

        {this.props.name}
        {this.props.children}
      
    );
  }
}
export default Comment;

可以在其他組件中調(diào)用這個組件

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

class App extends Component {
  render() {
    return (
      

        {/**調(diào)用組件**/}
        組件插入內(nèi)容
      
    );
  }
}

export default App;

在上面的案例中可以看到react吧html寫到js當中，這種寫法稱為JSX。這是一種類似XML的寫法，他可以定義類似HTML一樣簡潔的樹狀結(jié)構(gòu)。這種語法結(jié)合了JavaScript語法和HTML的優(yōu)點，既可以像平常一樣使用HTML,也可以在里面前套JavaScript語法。這種有好的格式，讓開發(fā)者易于閱讀和開發(fā)。而且，對于組件來說，直接使用類似HTML的格式，也是非常嗨皮的。但是需要注意的是。JSX和HTML完全不是一回事，JSX只是作為編輯器，把類似HTML的結(jié)構(gòu)編譯成JavaScript。

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

使用類XML語法的好處是標簽可以任意嵌套，我們可以像HTML一樣清晰地看到DOM樹狀結(jié)構(gòu)及其屬性。比如，我們構(gòu)建一個List組件

const List = () => (
    

        
列表元素1
        
列表元素2
        
列表元素3
        
列表元素4
    
)

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

定義標簽時，只允許被一個標簽包裹 
標簽一定要閉合

在React中創(chuàng)建的虛擬元素可以分為兩類，DOM元素(DOM element)與組件元素(component element)
分別對應著原生DOM元素與自定義元素，而JSX與創(chuàng)建元素過程有這莫大的關聯(lián)，在JSX中對應的規(guī)則是HTML標簽首字母是否為小寫字母，其中小寫首對應DOM元素，而組件元素自然對應大寫首字母

在HTML中，注釋語法是在jsx依舊使用的是js語法注釋，唯一要注意的是，在一個組件的子元素位置使用注釋要用{}包起來。

const List = () => (
    

        {/**這個是個列表**/}
        
列表元素1
    
)

元素除了標簽之外，另一個組成部分就是標簽的屬性。
在JSX中，不論是DOM元素還是組件元素，他門都有屬性。不同的是，DOM元素的屬性是標準規(guī)范屬性，但有兩個例外--class和for，這是因為在JavaScript中這兩個單詞都是關鍵詞。因此有對應的倆個轉(zhuǎn)化

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

在組件中元素的屬性是完全自定義的屬性，也可以理解為組件傳遞的參數(shù)。

組件插入內(nèi)容

在自定義組件中除了上面?zhèn)鬟f屬性的方法外也可以

const comment = 組件插入內(nèi)容;
comment.props.name = "劉宇";

也可以使用es6語法

const data = {name:"劉宇",age:10};
const comment = 組件插入內(nèi)容;

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

 //不被渲染
 //成功渲染

React會將所有要顯示到DOM的字符串轉(zhuǎn)義，防止XSS。所以，如果jsx中含有轉(zhuǎn)義后的實體字符?？梢允褂靡韵路椒?/p>

直接使用utf-8字符
使用對應的Unicode編碼查詢編碼；
使用數(shù)組組裝
{["cc",?," 2017"]}

直接插入原始html

在傳統(tǒng)的web應用中每次更新頁面的時候都需要手動操作DOM來更新

事件－》執(zhí)行操作－》改變dom

DOM操作非常昂貴。在前端開發(fā)中，性能消耗最大的就是DOM操作，而且這部分的操作代碼不好維護。React把真實的DOM操作轉(zhuǎn)成JavaScript對象樹，也就是虛擬DOM;

這是普通的Html標簽寫法

React

//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")

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

  
Item 1
  
Item 2
  
Item 3