導語

React中的核心概念
1 虛擬DOM（Virtual DOM）
2 Diff算法（虛擬DOM的加速器，提升React性能的法寶）

React主要的原理
Virtual DOM 虛擬DOM;

提供了一種不同的而又強大的方式來更新DOM，
代替直接的DOM操作。
就是Virtual DOM,
一個輕量級的虛擬的DOM;
通過這個Virtual DOM去更新真實的DOM，
由這個Virtual DOM管理真實DOM的更新

?
?我想問的是：為什么通過這多一層的Virtual DOM操作就能更快呢？
?diff算法。
?React會等到事件循環結束，然后利用這個diff算法，
?通過當前新的dom表述與之前的作比較，
?計算出最小的步驟更新真實的DOM
?
?virtual dom----diff----real dom
?
?
?之前我的想法是：dom樹是元素組成的;但是在react里面就是
?Components 組件
在DOM樹上的節點被稱為元素，在這里則不同，Virtual DOM上稱為commponent。
Virtual DOM的節點就是一個完整抽象的組件，它是由commponents組成。

Components存在讓diff算法更加高效

如何呈現真實的DOM：如何渲染組件，什么時候渲染，怎么同步更新的
1，state,render;
當數據發生變化時，將會調用Render重現渲染，這里只能通過提供的setState方法更新數據。
setState({})更新數據;

React不是一個MVC框架，它是構建易于可重復調用的web組件，側重于UI, 也就是view層
其次React是單向的從數據到視圖的渲染，非雙向數據綁定（這個是很重點的問題！！）
不直接操作DOM對象，而是通過虛擬DOM通過diff算法以最小的步驟作用到真實的DOM上。
不便于直接操作DOM，大多數時間只是對 virtual DOM 進行編程

https://120.24.108.143/svn/GAMC/DevCode/MD_Dialog_XML/xml

React將DOM抽象為虛擬DOM，
虛擬DOM其實就是用一個對象來描述DOM，
通過對比前后兩個對象的差異，
最終只把'變化'的部分重新渲染，提高渲染的效率

為什么用虛擬dom，
當dom發生更改時需要遍歷 而原生dom可遍歷屬性多大231個?
且大部分與渲染無關 更新頁面代價太大

https://segmentfault.com/a/1190000012921279
https://zhuanlan.zhihu.com/p/20346379
React 源碼剖析系列 － 不可思議的 react diff
知其然更要知其所以然

JSX的注意點
注意 1: 如果在 JSX 中給元素添加類, 需要使用 className 代替 class

類似：label 的 for屬性，使用htmlFor代替
注意 2：在 JSX 中可以直接使用 JS代碼，直接在 JSX 中通過 {} 中間寫 JS代碼即可
注意 3：在 JSX 中只能使用表達式，但是不能出現 語句！！！
注意 4：在 JSX 中注釋語法：{/* 中間是注釋的內容 */}

React創建組件的兩種方式
1 通過 JS函數 創建（無狀態組件）
2 通過 class 創建（有狀態組件）
函數式組件 和 class 組件的使用場景說明：
1 如果一個組件僅僅是為了展示數據，那么此時就可以使用 函數組件
2 如果一個組件中有一定業務邏輯，需要操作數據，那么就需要使用 class 創建組件，因為，此時需要使用 state

JavaScript函數創建
注意：1 函數名稱必須為大寫字母開頭，React通過這個特點來判斷是不是一個組件
注意：2 函數必須有返回值，返回值可以是：JSX對象或null
注意：3 返回的JSX，必須有一個根元素
注意：4 組件的返回值使用()包裹，避免換行問題
function Welcome(props) {
? return (
? ? // 此處注釋的寫法?
? ? <div className="shopping-list">
? ? ? {/* 此處 注釋的寫法 必須要{}包裹 */}
? ? ? <h1>Shopping List for {props.name}</h1>
? ? ? <ul>
? ? ? ? <li>Instagram</li>
? ? ? ? <li>WhatsApp</li>
? ? ? </ul>
? ? </div>
? )
}ReactDOM.render(
? <Welcome name="jack" />,
? document.getElementById('app')
)

?// class創建的組件中 必須有rander方法 且顯示return一個react對象或者null
?class ShoppingList extends React.Component {
? constructor(props) {?
? ? super(props)
? }
? // class創建的組件中 必須有rander方法 且顯示return一個react對象或者null
? render() {
? ? return (
? ? ? <div className="shopping-list">
? ? ? ? <h1>Shopping List for {this.props.name}</h1>
? ? ? ? <ul>
? ? ? ? ? <li>Instagram</li>
? ? ? ? ? <li>WhatsApp</li>
? ? ? ? </ul>
? ? ? </div>
? ? )
? }
}

props是只讀的，無法給props添加或修改屬性
class Welcome extends React.Component {
? constructor(props) {
? ? super(props)
? }

? render() {
? ? return <h1>Hello, {this.props.name}</h1>
? }
}