react14到15版本主要變更

主要變更

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

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

注意:在服務(wù)器渲染內(nèi)容中,還會存在data-reactid,不過會比以前少得多,自動遞增的序號也會更簡單。

● ?取消額外的<span>

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

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

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

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

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

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

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

關(guān)鍵性變動

● ?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個月前的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軟件包時。

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

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

新的警告提醒

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

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

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

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

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

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

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

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

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

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

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

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

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

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

其他優(yōu)化

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

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

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

● ?在以前的環(huán)境中,React對于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)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容