初識(shí)React

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è)面的生命周期:

生命周期1
生命周期2

6、State屬性(頁(yè)面組件自身的屬性)

State

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)題查看官方文檔灭必!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末狞谱,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子禁漓,更是在濱河造成了極大的恐慌跟衅,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,884評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件播歼,死亡現(xiàn)場(chǎng)離奇詭異伶跷,居然都是意外死亡掰读,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門叭莫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蹈集,“玉大人,你說(shuō)我怎么就攤上這事雇初÷K粒” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 157,435評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵靖诗,是天一觀的道長(zhǎng)郭怪。 經(jīng)常有香客問(wèn)我,道長(zhǎng)刊橘,這世上最難降的妖魔是什么鄙才? 我笑而不...
    開(kāi)封第一講書人閱讀 56,509評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮促绵,結(jié)果婚禮上攒庵,老公的妹妹穿的比我還像新娘。我一直安慰自己绞愚,他們只是感情好叙甸,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,611評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著位衩,像睡著了一般裆蒸。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上糖驴,一...
    開(kāi)封第一講書人閱讀 49,837評(píng)論 1 290
  • 那天僚祷,我揣著相機(jī)與錄音,去河邊找鬼贮缕。 笑死辙谜,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的感昼。 我是一名探鬼主播装哆,決...
    沈念sama閱讀 38,987評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼定嗓!你這毒婦竟也來(lái)了蜕琴?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 37,730評(píng)論 0 267
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤宵溅,失蹤者是張志新(化名)和其女友劉穎凌简,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體恃逻,經(jīng)...
    沈念sama閱讀 44,194評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡雏搂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,525評(píng)論 2 327
  • 正文 我和宋清朗相戀三年藕施,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片凸郑。...
    茶點(diǎn)故事閱讀 38,664評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡裳食,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出芙沥,到底是詐尸還是另有隱情胞谈,我是刑警寧澤,帶...
    沈念sama閱讀 34,334評(píng)論 4 330
  • 正文 年R本政府宣布憨愉,位于F島的核電站,受9級(jí)特大地震影響卿捎,放射性物質(zhì)發(fā)生泄漏配紫。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,944評(píng)論 3 313
  • 文/蒙蒙 一午阵、第九天 我趴在偏房一處隱蔽的房頂上張望躺孝。 院中可真熱鬧,春花似錦底桂、人聲如沸植袍。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,764評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)于个。三九已至,卻和暖如春暮顺,著一層夾襖步出監(jiān)牢的瞬間厅篓,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,997評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工捶码, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留羽氮,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,389評(píng)論 2 360
  • 正文 我出身青樓惫恼,卻偏偏與公主長(zhǎng)得像档押,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子祈纯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,554評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • react官網(wǎng):https://facebook.github.io/react/內(nèi)容來(lái)源:http://www....
    Lusia_閱讀 509評(píng)論 0 0
  • ? fengyu學(xué)習(xí) 今年9月令宿,為了重構(gòu)的項(xiàng)目,在一個(gè)星期內(nèi)盆繁,我囫圇吞棗似地學(xué)習(xí)了React掀淘。 即便是4個(gè)月后的今...
    封小胖閱讀 673評(píng)論 9 16
  • It's a common pattern in React to wrap a component in an ...
    jplyue閱讀 3,260評(píng)論 0 2
  • 自己最近的項(xiàng)目是基于react的,于是讀了一遍react的文檔油昂,做了一些記錄(除了REFERENCE部分還沒(méi)開(kāi)始讀...
    潘逸飛閱讀 3,358評(píng)論 1 10
  • 陳云是一位財(cái)務(wù)主管匆浙,薪水待遇在公司里屬于高收入人群。但陳云一天到晚都喊窮厕妖,到處找兼職來(lái)做首尼。 不過(guò),他也確實(shí)是窮言秸,幾...
    知恩媽媽V閱讀 2,833評(píng)論 0 1