1搔啊、虛擬DOM:降低了算法復(fù)雜度憔杨,提升速度匆赃,主要是diff computation
2、組件(快速?gòu)?fù)用)
3今缚、學(xué)會(huì)了新建組件export和引用組件import
注意:組件的return函數(shù)里面返回的HTML節(jié)點(diǎn)只能是一個(gè)算柳!
4、JSX內(nèi)置表達(dá)式
三元表達(dá)式
動(dòng)態(tài)值放在{}中
關(guān)于正確解析html顯示在頁(yè)面中:
方法一:使用unicode轉(zhuǎn)碼
方法二:使用dangerouslySetInnerHTML = {{__html:傳入的變量}} 不推薦姓言,可能存在XSS攻擊
5瞬项、頁(yè)面的生命周期:
6、State屬性(頁(yè)面組件自身的屬性)
State變化時(shí)只會(huì)局部刷新
State只會(huì)體現(xiàn)在當(dāng)前的class中何荚,不會(huì)污染到其他的class中囱淋。
7、Props屬性(對(duì)于組件來(lái)說(shuō)屬于外來(lái)屬性)
8餐塘、數(shù)據(jù)與事件的雙向綁定
父頁(yè)面---->子頁(yè)面:通過(guò)props屬性
子頁(yè)面---->父頁(yè)面:通過(guò)對(duì)子頁(yè)面的props屬性綁定事件
父頁(yè)面---->子頁(yè)面---->子頁(yè)面:{...this.props}
9妥衣、可復(fù)用組件
組件的propTypes:設(shè)置props屬性值的類型(可參考官方文檔)
isRequired:必須的參數(shù)
組件的defaultProps:默認(rèn)的props屬性值
10、組件的Refs(操作DOM)
方法一:
原生形式獲得節(jié)點(diǎn)后戒傻,操作節(jié)點(diǎn)的方法:ReactDOM.findDOMNode(節(jié)點(diǎn)變量)
方法二:
設(shè)置ref屬性
使用this.refs.節(jié)點(diǎn)變量
注意:不要在render里或者之前調(diào)用refs
11税手、Mixins(組件之間公用方法)
ES6暫不支持,需要安裝react-mixin@2的包
12需纳、react樣式:(用js來(lái)寫css樣式)
(1)內(nèi)聯(lián)樣式:
*將css樣式寫入一個(gè)變量中芦倒,在標(biāo)簽里的style中引入該變量(只對(duì)內(nèi)聯(lián)起作用)
**外部css文件,通過(guò)className調(diào)用對(duì)應(yīng)的類(全局污染)
缺點(diǎn):不能使用動(dòng)畫不翩、hover等偽類
內(nèi)聯(lián)樣式中的內(nèi)置表達(dá)式:(計(jì)算改變樣式)
三元表達(dá)式寫在內(nèi)聯(lián)css里面(利用state的變化)
(2)CSS模塊化
這里附加一個(gè)tip:刪除node_modules文件夾兵扬,快速初始化package.json里面包含的包:直接在對(duì)應(yīng)文件夾下面使用npm install 命令
這里需要兩個(gè)新的包:
cnpm install --save style-loader css-loader
安裝好了以后在webpack.config.js中增加配置:
{ test: /.css$/, loader: 'style-loader!css-loader' }
有需要的話可以安裝:babel-plugin-react-html-attrs(用于解決class和className的命名沖突等),安裝好了以后在webpack.config.js中增加配置plugins: ['react-html-attrs']
使用:在組件中require進(jìn)來(lái)css文件
優(yōu)點(diǎn):默認(rèn)local口蝠,避免全局污染和命名沖突
可以修改為global器钟,這樣全局都可以用
(3)CSS---->JSX(因?yàn)楹笃趯W(xué)習(xí)react native不能用css)
有一個(gè)在線轉(zhuǎn)換工具http://staxmanade.com/CssToReact/
13、Ant Design樣式框架:(阿里出的)
14亚皂、React Router插件:React頁(yè)面跳轉(zhuǎn)問(wèn)題
沒(méi)有進(jìn)行頁(yè)面刷新俱箱,通過(guò)hashHistory前進(jìn)后退。
參數(shù)傳遞:this.props.params.參數(shù)名
最后:有問(wèn)題查看官方文檔灭必!