一、上HTML模板（官網(wǎng)例子模板）
<!DOCTYPE html>
<html>
<head>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="./browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
ReactDOM.render();
</script>
</body>
</html>
大家看上面代碼一共用到了三個js庫： react.js喘先、react-dom.js 和Browser.js 钳吟，它們必須首先加載。
react.js 是 React 的核心庫窘拯，react-dom.js 是提供與 DOM 相關(guān)的功能
這里大家注意一個問題就是<script>標(biāo)簽里面的type屬性為"text/babel"
這是React獨有的JSX語法
Browser.js 的作用就是將 JSX 語法轉(zhuǎn)為 JavaScript 語法红且，這一步很消耗時間坝茎，實際上線的時候，應(yīng)該將它放到服務(wù)器完成暇番。
什么是JSX語法
簡單粗暴的說就是把HTML 語言寫在 <script>標(biāo)簽中景东，不加任何引號，它允許 HTML 與 JavaScript 的混寫奔誓；比如上面代碼<h1>斤吐。
react用法
一、子父組件之間的傳值
1厨喂、父組件傳值給子組件：通過屬性的方式傳遞給子組件和措，子組件通過this.props.XX（屬性名）獲取父組件傳過來的值
2、子組件傳值給父組件：通過調(diào)用父組件傳遞給子組件的方法蜕煌，實現(xiàn)傳值或者修改值
二派阱、子組件校驗父組件傳遞過來的參數(shù)類型
可用 PropTypes
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
三、props斜纪，state與render函數(shù)的關(guān)系
當(dāng)組件的state或者props發(fā)生改變的時候贫母，render函數(shù)就會重新執(zhí)行
四、虛擬DOM
1盒刚、state數(shù)據(jù)
2腺劣、JSX模版
3、數(shù)據(jù)+模版 生成虛擬DOM (虛擬DOM就是一個JS對象,用它來描述真實DOM)
（ps：創(chuàng)建了js對象因块，消耗性能橘原，相對于創(chuàng)建DOM，js創(chuàng)建對象耗性能比較形猩稀）
['div' {id: 'abc'}, ['span',{}, 'Hello world'],]
4趾断、用虛擬DOM的結(jié)構(gòu)生成真實的DOM,來顯示
<div id='abc'><span>hetlo world</span></div>
5、state發(fā)生變化
6吩愧、數(shù)據(jù)+模版生成新的虛擬DOM
['div' {id: 'abc'}, ['span',{}, 'bye bye]',]
7芋酌、比較原始虛擬DOM和新的虛擬DOM的區(qū)別,找到span區(qū)別；（極大提升性能）
8雁佳、直接操作DOM,改變span的DOM
JSX —> React.createElement —> js對象 —> 真實的DOM
return <div><span>Hello</span></div>
等同于
return React.createElement('div',{},React.createElement('span',{},'Hello'))
react底層會將JSX通過調(diào)用createElement將其進(jìn)行轉(zhuǎn)換
五脐帝、ref的使用
return <div ref={(div) => {this.div= div}}><span>Hello</span></div>
ref={(div) => {this.div= div}}
this.div可以隨便起 前提是等于(div)，這樣this的指向就是標(biāo)簽<div>
補充一個知識
this.setState(() => ({
inputValue: value
}))
console.log(this.div.querySelectorAll().length)
由于this.setState是異步的甘穿，如果想等DOM元素渲染后再獲取其元素或其他信息腮恩；
可以在this.setState的回調(diào)函數(shù)中獲取中獲取温兼；
例如：
this.setState(() => ({
inputValue: value
}),()=>{
console.log(this.div.querySelectorAll().length)
})
六秸滴、React生命周期函數(shù)
生命周期函數(shù)：是指在某一個時刻組件會自動執(zhí)行的函數(shù)
初始化
1、getDefaultProps()
設(shè)置默認(rèn)的props募判，也可以用dufaultProps設(shè)置組件的默認(rèn)屬性.
2荡含、getInitialState()
在使用es6的class語法時是沒有這個鉤子函數(shù)的咒唆，可以直接在constructor中定義this.state。此時可以訪問this.props
3释液、componentWillMount()
組件即將被掛載到頁面的時刻自動執(zhí)行全释，以后組件更新不調(diào)用，整個生命周期只調(diào)用一次误债，此時可以修改state浸船。
4、 render()
react最重要的步驟寝蹈，創(chuàng)建虛擬dom李命，進(jìn)行diff算法，更新dom樹都在此進(jìn)行箫老。此時就不能更改state了封字。
5、componentDidMount()
組件渲染之后調(diào)用耍鬓，只調(diào)用一次阔籽。
更新
6、componentWillReceiveProps(nextProps)
組件初始化時不調(diào)用牲蜀，組件接受新的props時調(diào)用笆制。
執(zhí)行該函數(shù)要具備的條件：
1、組件要從父組件接收參數(shù)（props）各薇。
2项贺、如果這個組件第一次存在于父組件中，不會執(zhí)行峭判。
3、如果這個組件之前存在于父組件中棕叫，才會執(zhí)行林螃。
7、shouldComponentUpdate(nextProps, nextState)
組件被更新之前自動執(zhí)行
react性能優(yōu)化非常重要的一環(huán)俺泣。組件接受新的state或者props時調(diào)用疗认，我們可以設(shè)置在此對比前后兩個props和state是否相同，如果相同則返回false阻止更新伏钠，因為相同的屬性狀態(tài)一定會生成相同的dom樹横漏，這樣就不需要創(chuàng)造新的dom樹和舊的dom樹進(jìn)行diff算法對比，節(jié)省大量性能熟掂，尤其是在dom結(jié)構(gòu)復(fù)雜的時候
8缎浇、componentWillUpdata(nextProps, nextState)
組件被更新之前，它會自動執(zhí)行赴肚，但是他是在shouldComponentUpdate之后被執(zhí)行素跺。
如果shouldComponentUpdate返回true二蓝，它才執(zhí)行。也就是只有在組件將要更新時才調(diào)用指厌。
如果返回false刊愚，這個函數(shù)就不執(zhí)行了。
此時可以修改state
9踩验、render()
組件渲染
10鸥诽、componentDidUpdate()
組件初始化時不調(diào)用，組件更新完成后調(diào)用箕憾，此時可以獲取dom節(jié)點牡借。
卸載
11、componentWillUnmount()
組件將要卸載時調(diào)用厕九，一些事件監(jiān)聽和定時器需要在此時清除蓖捶。
