React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫(kù)，它是 Facebook 的內(nèi)部項(xiàng)目，用來(lái)架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。React 主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。由于擁有較高的性能，且代碼邏輯非常簡(jiǎn)單，越來(lái)越多的人已開始關(guān)注和使用它。

中文官網(wǎng)：https://react.docschina.org

React特點(diǎn)
1、聲明式設(shè)計(jì)

react是面向數(shù)據(jù)編程，不需要直接去控制dom，你只要把數(shù)據(jù)操作好，react自己會(huì)去幫你操作dom，可以節(jié)省很多操作dom的代碼。這就是聲明式開發(fā)。

2、使用JSX語(yǔ)法

JSX 是 JavaScript 語(yǔ)法的擴(kuò)展。React 開發(fā)大部分使用 JSX 語(yǔ)法（在JSX中可以將HTML于JS混寫）。

3、靈活

react所控制的dom就是id為root的dom，頁(yè)面上的其他dom元素你頁(yè)可以使用jq等其他框架 ?？梢院推渌麕?kù)并存。

4、使用虛擬DOM、高效

虛擬DOM其實(shí)質(zhì)是一個(gè)JavaScript對(duì)象，當(dāng)數(shù)據(jù)和狀態(tài)發(fā)生了變化，都會(huì)被自動(dòng)高效的同步到虛擬DOM中，最后再將僅變化的部分同步到DOM中（不需要整個(gè)DOM樹重新渲染）。

5、組件化開發(fā)

通過(guò) React 構(gòu)建組件，使得代碼更加容易得到復(fù)用和維護(hù)，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中。

6、單向數(shù)據(jù)流

react是單向數(shù)據(jù)流，父組件傳遞給子組件的數(shù)據(jù)，子組件能夠使用，但是不能直接通過(guò)this.props修改。 這樣讓數(shù)據(jù)清晰代碼容易維護(hù)。

安裝React

npm install create-react-app -g  //或者使用淘寶源cnpm

使用React
創(chuàng)建項(xiàng)目

create-react-app demo

進(jìn)入項(xiàng)目并且把項(xiàng)目跑起來(lái),瀏覽器會(huì)自動(dòng)打開項(xiàng)目頁(yè)面

cd demo && npm start

編寫React項(xiàng)目
先把項(xiàng)目里面src目錄的文件全部刪除,創(chuàng)建一個(gè)index.js文件

import React from 'react';
import ReactDOM from 'react-dom';

//使用組件 多數(shù)是使用import從其他地方引入js文件

class App extends React.Component{
    render(){/* render(){}是渲染的方法,必須return(標(biāo)簽) */
        return(
            <div>/* 所有的標(biāo)簽必須放在一個(gè)根標(biāo)簽里 */}
             <form action="">
                    <label htmlFor=""></label>{/*  JSX語(yǔ)法格式里面for都要改成htmlFor  */}
                    <input type="text"/>
                </form>
                <p className="box" style={{color:'red',backgroundColor:'black'}}>文字</p>{/*  JSX語(yǔ)法格式里面class都要改成className,style={{鍵值對(duì)加駝峰式寫法}}  */}
            </div>
        )
    }
}




ReactDOM.render(//這里注意是用ReactDOM.render(參數(shù)一:標(biāo)簽,參數(shù)二,渲染到哪個(gè)位置)而不是React.render 
<div>{/* JSX表達(dá)式必須具有一個(gè)父元素 */}
    <h1>標(biāo)題</h1>
    <App/> //使用閉合標(biāo)簽或者雙標(biāo)簽插入組件
</div>
,document.getElementById('root')//這里的root是不用加#號(hào)的
)

React的JSX創(chuàng)建出來(lái)的是虛擬DOM，而不是HTML

const Rele = React.createElement('div')//虛擬DOM
const Dele = document.createElement('div')
let Rarr = []
let Darr = []
for(let i in Rele){
    Rarr.push(i)
}
for(let i in Dele){
    Darr.push(i)
}
console.log(Rarr.length);//7
console.log(Darr.length);//255

所以使用虛擬DOM是更加的優(yōu)化,它忽略了真實(shí)DOM中不必要的屬性
JSX不是HTML
JSX創(chuàng)建的是ReactDOM(虛擬DOM)
JSX中的<div>hello</div> 等同于 React.createElement("div");