1.angular react vue區別

　　1.angular 1.x mvc 2.x mvvm

　　　　　　都給你限制了 $http -> ajax

　　2. vue2 mvvm框架 不限制
　　　　　　推薦
　　　　　　　　vue-resource
　　　　　　　　axios
　　　　　　　　xmlhttp

　　3.react 更專注於view層

　　　　react
　　　　　　優勢：
　　　　　　　　1.虛擬dom
　　　　　　　　2.效能性很高
　　　　　　　　3.解決一些終端的問題（pc、移動端問題）

　　　　　　劣勢：
　　　　　　　　1.學習成本很高、學習曲線很陡

　　4.react - vue、ng不同的一點： react不限制你的使用方式

2.理解作者思想 --》接受它的世界觀---》接受它的中二設定--》自定義語法 - jsx

3.書寫格式

　　1.多個標籤的書寫格式 - 外面必須包一層根元素，可以自由縮排

　　2.單標籤規則 - 必須閉合

　　3.class - className引用樣式

　　4.jsx裡面使用js程式碼必須加{}

　　5.jsx - 支援style - 裡面使用json {{'background':'red'}}---》第一層是使用告訴jsx我要用js了---》第二層的是json的

　　6.事件：使用駝峰命名法 ---》第一個單詞之後的首字母大寫---》onclick -> onClick----》onmouseover -> onMouseOver

4.面向物件

　　1.es6之前那種 函式 -new 函式 = 類

　　　　類 - constructor
　　　　原型 - prototype （所謂的方法）
　　　　原型鏈 - __proto__

　　2.es6=class

　　　　constructor - 預設執行的函式
　　　　不支援變數提升

　　　　class 函式名稱---》函式呼叫時 預設執行 constructor 函式----》constructor - 裡面寫一些初始的內容

　　3.繼承 extends 可以繼承原型和私有屬性　　　　

　　　　如果子類想使用 this---》子類constructor 放入super ---》引數如果想使用，子類引數放入 constructor 和 super 中

5.獲取元素起碼有三種方法

　　1.<input ref='aaa'/> 獲取：this.refs.aaa

　　2.獲取本身事件源 e.target

　　3.原生js的獲取方法

6.react生命週期

　　　　 componentWillMount() {
            console.log('元件掛載之前---但是可以拿到state和props屬性中的值--但是找不到元件還沒掛掛載呢')
        }
        componentDidMount() {
            console.log('元件掛載之後---可以找到元件元素了')
        }
        componentWillUpdate() {
            console.log('元件更新前--資料更新前')
        }
        componentDidUpdate() {
            console.log('元件更新後---資料更新後')
        }
        componentWillUnmount() {
            console.log('元件解除安裝之前')
        }

7.react阻止事件冒泡　　

　　　　//return false;
　　　　//e.stopPropagation();
　　　　//e.cancelBubble = true;
　　　　//e.nativeEvent.cancelBubble = true;
　　　　都不好使　　　　

　　　　e <-react封裝過的nativeEvent 原生的事件物件　　　　

　　　　e.nativeEvent.stopImmediatePropagation()停止立即的傳播

8.react表單---(前面加default屬性)

　　　　input --->受控表單/非受控表單受控

　　　　value='' checkbox defaultValue='' defaultChecked=''

9.react互動

　　　　並不限制你如何的去互動

　　　　angular - $http

　　　　vue - re....

　　　　react - jquery/zepto/axios/fetch/ajax

10.react --for迴圈和顯示隱藏　　

   class Yxk extends React.Component{
        constructor(){
            super()
            this.state={
               msg:'hello React!',
               arr:[1,2,3,4]
            }
        }
        render(){
            let arrLi=[]
            this.state.arr.forEach((val,index)=>{
                arrLi.push(<li key={index}>{val}</li>)
            })
            return (<div>
                    <p style={{display:this.state.arr.length>0?'none':'block'}}>{this.state.msg}</p>
                    <ul>
                        {arrLi}
                    </ul>
                </div>) 
        }
       
    }
    ReactDOM.render(
        <Yxk />,
        app
    )

　　虛擬dom 每一個內容都應該有自己的唯一標識key

11.react元件通訊傳值

　　1.父給子元件傳值

　　　　<Child msg={父元件的資料}/>

　　　　this.props.msg

　　　　預設情況下 父元件從新渲染 會統一同步 ---》不想同步 就把父元件的值存成子元件的一個state

　　2.子元件拿父元件值

　　　　<Child fn={父元件的一個函式.bind(this)}; ---重置this為父元件不然無法渲染值

　　　　子元件裡面執行函式----》this.props.fn(傳入子元件的資料)