react14到15版本主要變更

主要變更

● ?加入了document.createElement炮车,取消了data-reactid

? ? ? ?關(guān)于與DOM的交互方式纯路,發(fā)生了重大改動(dòng)质欲。最顯著的改動(dòng)在于:不再為每個(gè)DOM節(jié)點(diǎn)設(shè)置data-reactid屬性浸剩,使react更加輕量級(jí)零渐。此外在變更后擦盾,在最初的渲染中也能使用document.createElement了嘲驾。隨著瀏覽器的優(yōu)化,使用createElement之后迹卢,React速度更快辽故。使用id將事件映射回React組件,代表著盡管存在著大量的緩存數(shù)據(jù)腐碱,每個(gè)事件仍要完成一堆的工作誊垢。我們都有這樣的經(jīng)歷:緩存,尤其是無效緩存很容易導(dǎo)致出錯(cuò)症见,結(jié)果就是這些年來出現(xiàn)了一大堆難以復(fù)現(xiàn)的問題∥棺撸現(xiàn)在,由于對(duì)節(jié)點(diǎn)有了控制權(quán)谋作,在渲染時(shí)我們可以構(gòu)建出直接映射芋肠。

注意:在服務(wù)器渲染內(nèi)容中,還會(huì)存在data-reactid瓷们,不過會(huì)比以前少得多业栅,自動(dòng)遞增的序號(hào)也會(huì)更簡單。

● ?取消額外的<span>

在DOM交互中還有一項(xiàng)大變化谬晕,就是我們渲染文本模塊的方式碘裕。之前react在渲染是會(huì)加入很多額外的span,現(xiàn)在渲染后純文本節(jié)點(diǎn)與用于界定的注釋交錯(cuò)排列攒钳。在DOM交互中還有一項(xiàng)大變化帮孔,就是我們渲染文本模塊的方式。由于依賴所生成標(biāo)記的用戶很少不撑,此項(xiàng)修改的影響面也會(huì)很小文兢。不過,如果你在CSS中使用了這些作為對(duì)象的話焕檬,可能需要做出相應(yīng)的調(diào)整姆坚。不過在組件中,你隨時(shí)可以執(zhí)行渲染实愚。

●? 渲染返回null目前改成了注釋節(jié)點(diǎn)

我們也利用注釋節(jié)點(diǎn)修改了null兼呵,這個(gè)功能是在React 0.11中加入的兔辅,通過渲染<noscript>元素實(shí)現(xiàn)。在改用注釋節(jié)點(diǎn)渲染后击喂,有些CSS可能會(huì)指向錯(cuò)誤的對(duì)象维苔,特別在使用了:nth-child時(shí)。在React中懂昂,<noscript>標(biāo)記的運(yùn)用一直被看作是React指向DOM方式的實(shí)現(xiàn)細(xì)節(jié)介时。由于這些細(xì)節(jié)并沒有相關(guān)依賴,我們認(rèn)為可以在這一版中直接作出修改凌彬,而無需先發(fā)一個(gè)版本讓大家體驗(yàn)其中細(xì)微的差異沸柔。此外在很多主要應(yīng)用中,我們已經(jīng)看到了這些變化對(duì)React的性能帶來的提高饿序。

● ?函數(shù)組件也可返回null

在React 0.14中勉失,增加了我們?cè)黾恿藢?duì)定義無狀態(tài)組件為函數(shù)的支持羹蚣。然而原探,在React 0.14中我們?nèi)钥梢栽诓恍钄U(kuò)展React.Component或使用React.createClass()的情況下,對(duì)類組件進(jìn)行定義顽素,因此我們無法確定這個(gè)組件是類組件還是函數(shù)組件咽弦;并且在0.14版本中,類組件是不會(huì)返回null的胁出。這個(gè)問題在React 15中得到了解決型型,現(xiàn)在可以從任何組件——無論是類組件或者函數(shù)組件返回null了。

● ?改進(jìn)對(duì)svg的支持

現(xiàn)在React將完全支持所有的SVG標(biāo)簽(不常見的SVG標(biāo)簽不會(huì)出現(xiàn)在React.DOM元素助手中全蝶,不過JSX和React.createElement適用于所有的標(biāo)簽名)闹蒜,并支持瀏覽器實(shí)現(xiàn)的所有SVG屬性。

關(guān)鍵性變動(dòng)

● ?React.cloneElement()現(xiàn)在包括defaultProps

修復(fù)了React.cloneElement()中的bug抑淫,如果cloneElement()接收到的某些props是undefined绷落,常返回帶有未定義值的元素。在React 15中始苇,我們將其修改為與createElement()保持一致∑鏊福現(xiàn)在任何發(fā)送給cloneElement()的未定義props都有相應(yīng)的組件defaultProps了。

● ?ReactPerf.getLastMeasurements()晦澀不明?

刪除的內(nèi)容

○ ?在9個(gè)月前的v0.14版本中催式,這些內(nèi)容已經(jīng)被標(biāo)記為將要移除的內(nèi)容:

從React頂層輸出中移除的API包括:findDOMNode函喉、render、renderToString荣月、renderToStaticMarkup以及unmountComponentAtNode管呵。在此提醒,這些API現(xiàn)在在ReactDOM和ReactDOMServer中可用哺窄。

○? 移除的插件包括:batchedUpdates以及cloneWithProps捐下。

○? 移除的組件實(shí)例方法包括:setProps顿天、replaceProps以及getDOMNode。

○ ?CommonJSreact/addons入口點(diǎn)也不再使用蔑担,在此提醒:可以使用單獨(dú)的react-addons-*軟件包來替代牌废,不過只適用于使用CommonJS軟件包時(shí)。

○? 將children發(fā)送給類似<input>之類的空元素的做法被取消了啤握,現(xiàn)在改成拋出異常鸟缕。

○? 在DOMrefs(例如this.refs.div.props)中使用React-specific屬性的做法也被刪除了。

新的警告提醒

● ?如果你使用精簡后的開發(fā)版排抬,React DOM會(huì)提示你使用速度更快的生產(chǎn)版懂从。

● ?React DOM:在指定沒有單位的CSS值為字符串時(shí),以后的版本將不會(huì)自動(dòng)添加px字樣蹲蒲。當(dāng)前的版本在此類情況下(比如編寫style={{width: '300'}})會(huì)發(fā)出警告番甩。類似width: 300這樣的無單位數(shù)據(jù)值不會(huì)被修改。

● ?目前在設(shè)置及訪問未作適當(dāng)清除的屬性時(shí)届搁,合成事件(Synthetic Events)會(huì)發(fā)出警告缘薛,并在事件返回到池中后,在訪問時(shí)發(fā)出提醒卡睦。 ?

● ?在嘗試從props讀取ref和key時(shí)宴胧,元素現(xiàn)在會(huì)發(fā)出提示。

● ?在構(gòu)造函數(shù)中表锻,若將不同的props對(duì)象發(fā)送給super()恕齐,React會(huì)發(fā)出提示。

● ?如果在getChildContext()中調(diào)用setState()瞬逊,則React會(huì)發(fā)出提示显歧。

● ?React DOM現(xiàn)在會(huì)提示DOM元素事件句柄鍵入錯(cuò)誤,比如onclick應(yīng)該是onClink确镊。

● ?React DOM現(xiàn)在會(huì)在style中提示NaN值士骤。

● ?如果在輸入內(nèi)容中指定了value和defaultValue,則React DOM現(xiàn)在會(huì)發(fā)出提示骚腥。

● ?如果輸入在受約束與不受約束之間切換敦间,則React DOM現(xiàn)在會(huì)發(fā)出提示。

● ?如果指定了onFocusIn或onFocusOut handler束铭,則React DOM現(xiàn)在會(huì)發(fā)出提示廓块,因?yàn)樵赗eact中這兩者沒有必要出現(xiàn)。

● ?如果將無效回調(diào)作為ReactDOM render()契沫、this.setState()或this.forceUpdate()的最后一個(gè)參數(shù)發(fā)送過去带猴,則React會(huì)輸出描述性的錯(cuò)誤信息。

● ?插件:如果嘗試在淺渲染中使用TestUtils.Simulate()懈万,則會(huì)輸出幫助性的消息拴清。

● ?PropTypes:arrayOf()與objectOf()會(huì)為無效參數(shù)提供更詳盡的錯(cuò)誤信息靶病。

其他優(yōu)化

● ?React現(xiàn)在使用loose-envify來代替envify,所以安裝的過度依賴較之前更少口予。

● ?淺渲染器暴露getMountedInstance()娄周。

● ?淺渲染器從render()返回渲染輸出結(jié)果。

● ?在以前的環(huán)境中沪停,React對(duì)于Object.create及Object.freeze是依賴ES5 shams的煤辨,現(xiàn)在仍是如此荐吉,但在相關(guān)環(huán)境中需要提供ES5 shams雅镊。

● ?React DOM支持名稱以數(shù)字開頭的react- 屬性。

● ?React DOM為類似Draft.js之類用React管理contentEditable子集的組件添加了新的suppressContentEditableWarning耕挨。

● ?React改進(jìn)了createClass()在復(fù)雜參數(shù)中的性能表現(xiàn)舷礼。


更詳細(xì)的原文鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鹃彻,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子妻献,更是在濱河造成了極大的恐慌蛛株,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,561評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件旋奢,死亡現(xiàn)場(chǎng)離奇詭異泳挥,居然都是意外死亡然痊,警方通過查閱死者的電腦和手機(jī)至朗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來剧浸,“玉大人锹引,你說我怎么就攤上這事∷粝悖” “怎么了嫌变?”我有些...
    開封第一講書人閱讀 157,162評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長躬它。 經(jīng)常有香客問我腾啥,道長,這世上最難降的妖魔是什么冯吓? 我笑而不...
    開封第一講書人閱讀 56,470評(píng)論 1 283
  • 正文 為了忘掉前任倘待,我火速辦了婚禮,結(jié)果婚禮上组贺,老公的妹妹穿的比我還像新娘凸舵。我一直安慰自己,他們只是感情好失尖,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,550評(píng)論 6 385
  • 文/花漫 我一把揭開白布啊奄。 她就那樣靜靜地躺著渐苏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪菇夸。 梳的紋絲不亂的頭發(fā)上琼富,一...
    開封第一講書人閱讀 49,806評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音庄新,去河邊找鬼公黑。 笑死,一個(gè)胖子當(dāng)著我的面吹牛摄咆,可吹牛的內(nèi)容都是我干的凡蚜。 我是一名探鬼主播,決...
    沈念sama閱讀 38,951評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼吭从,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼朝蜘!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起涩金,我...
    開封第一講書人閱讀 37,712評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤谱醇,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后步做,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體副渴,經(jīng)...
    沈念sama閱讀 44,166評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,510評(píng)論 2 327
  • 正文 我和宋清朗相戀三年全度,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了煮剧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,643評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡将鸵,死狀恐怖勉盅,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情顶掉,我是刑警寧澤草娜,帶...
    沈念sama閱讀 34,306評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站痒筒,受9級(jí)特大地震影響宰闰,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜簿透,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,930評(píng)論 3 313
  • 文/蒙蒙 一移袍、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧萎战,春花似錦咐容、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽路狮。三九已至,卻和暖如春蔚约,著一層夾襖步出監(jiān)牢的瞬間奄妨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評(píng)論 1 266
  • 我被黑心中介騙來泰國打工苹祟, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留砸抛,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,351評(píng)論 2 360
  • 正文 我出身青樓树枫,卻偏偏與公主長得像直焙,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子砂轻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,509評(píng)論 2 348

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

  • 本筆記基于React官方文檔奔誓,當(dāng)前React版本號(hào)為15.4.0。 1. 安裝 1.1 嘗試 開始之前可以先去co...
    Awey閱讀 7,659評(píng)論 14 128
  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南搔涝,這只是我在學(xué)習(xí)過程中的一些閱讀筆記厨喂,個(gè)人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,813評(píng)論 1 18
  • 深入JSX date:20170412筆記原文其實(shí)JSX是React.createElement(componen...
    gaoer1938閱讀 8,050評(píng)論 2 35
  • 最近看了一本關(guān)于學(xué)習(xí)方法論的書庄呈,強(qiáng)調(diào)了記筆記和堅(jiān)持的重要性蜕煌。這幾天也剛好在學(xué)習(xí)React,所以我打算每天堅(jiān)持一篇R...
    gaoer1938閱讀 1,672評(píng)論 0 5
  • 最近關(guān)于接私活的文章不少诬留,有贊成私活的斜纪,也有反對(duì)私活的,無論怎樣故响,接私活成了最近最火的話題傀广。我來給大家分享一個(gè)新鮮...
    imGeek閱讀 820評(píng)論 2 2