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

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

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

每個(gè)組件都有各自的狀態(tài)，當(dāng)狀態(tài)變更時(shí)，便會(huì)重新渲染整個(gè)組件。
定義一個(gè)組件

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)用這個(gè)組件

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寫到j(luò)s當(dāng)中，這種寫法稱為JSX。這是一種類似XML的寫法，他可以定義類似HTML一樣簡(jiǎn)潔的樹(shù)狀結(jié)構(gòu)。這種語(yǔ)法結(jié)合了JavaScript語(yǔ)法和HTML的優(yōu)點(diǎn)，既可以像平常一樣使用HTML,也可以在里面前套JavaScript語(yǔ)法。這種有好的格式，讓開(kāi)發(fā)者易于閱讀和開(kāi)發(fā)。而且，對(duì)于組件來(lái)說(shuō)，直接使用類似HTML的格式，也是非常嗨皮的。但是需要注意的是。JSX和HTML完全不是一回事，JSX只是作為編輯器，把類似HTML的結(jié)構(gòu)編譯成JavaScript。

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

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

const List = () => (
    

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

寫這個(gè)組件的過(guò)程就像寫html一樣，只不過(guò)它被包裹在JavaScript的方法中，需要注意以下幾點(diǎn)。

定義標(biāo)簽時(shí)，只允許被一個(gè)標(biāo)簽包裹 
標(biāo)簽一定要閉合

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

在HTML中，注釋語(yǔ)法是在jsx依舊使用的是js語(yǔ)法注釋，唯一要注意的是，在一個(gè)組件的子元素位置使用注釋要用{}包起來(lái)。

const List = () => (
    

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

元素除了標(biāo)簽之外，另一個(gè)組成部分就是標(biāo)簽的屬性。
在JSX中，不論是DOM元素還是組件元素，他門都有屬性。不同的是，DOM元素的屬性是標(biāo)準(zhǔn)規(guī)范屬性，但有兩個(gè)例外--class和for，這是因?yàn)樵贘avaScript中這兩個(gè)單詞都是關(guān)鍵詞。因此有對(duì)應(yīng)的倆個(gè)轉(zhuǎn)化

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

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

組件插入內(nèi)容

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

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

也可以使用es6語(yǔ)法

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

自定義html屬性，上面說(shuō)的是組件上的屬性，在JSX中往DOM元素中傳入自定義屬性，React是不會(huì)渲染的；
如果要使用HTML自定義屬性，要使用data-前綴，這與HTML標(biāo)準(zhǔn)也是一致的：

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

React會(huì)將所有要顯示到DOM的字符串轉(zhuǎn)義，防止XSS。所以，如果jsx中含有轉(zhuǎn)義后的實(shí)體字符。可以使用以下方法

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

直接插入原始html

在傳統(tǒng)的web應(yīng)用中每次更新頁(yè)面的時(shí)候都需要手動(dòng)操作DOM來(lái)更新

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

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

這是普通的Html標(biāo)簽寫法

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é)點(diǎn)標(biāo)簽名
  props: { // DOM的屬性，用一個(gè)對(duì)象存儲(chǔ)鍵值對(duì)
    id: "list"
  },
  children: [ // 該節(jié)點(diǎn)的子節(jié)點(diǎn)
    {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