成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React 16 發(fā)布啦。。渣渣看了一下更新文檔~

xi4oh4o / 2279人閱讀

摘要：又雙叒更新啦這次是，其實(shí)在前段時(shí)間就知道最近要發(fā)布了。協(xié)議更新了。。。這樣做是為了阻止損壞數(shù)據(jù)的顯示。協(xié)議的協(xié)議已經(jīng)是協(xié)議了，當(dāng)然，也把已經(jīng)發(fā)布的頁改成協(xié)議了。

React 又雙叒更新啦~ 這次是React v16.0，其實(shí)在前段時(shí)間就知道最近要發(fā)布了。協(xié)議更新了。。。來看看其他的變化吧。自己看著玩的。。期待官方中文文檔的更新。。

原文地址：React v16.0

我們很高興地宣布發(fā)布React v16.0了！ 其中的一些變化是一些長(zhǎng)期的功能請(qǐng)求，包括 fragments ，邊界錯(cuò)誤， portals ，支持自定義 DOM 屬性，更好的服務(wù)器端渲染以及減小了文件大小。

新的render()返回類型

你現(xiàn)在可以在一個(gè)組件的 render 方法中中返回一個(gè)元素?cái)?shù)組。就像其它數(shù)組一樣，你需要為每一個(gè)數(shù)組元素添加一個(gè) key 來避免 key warning 。

render() {
  // 不需要將列表項(xiàng)包含在一個(gè)額外的元素中了
  return [
    // 不要忘了添加key哦 :)
    
  • First item
    • ,
    
  • Second item
    • ,
    
  • Third item
    • ,
  ];
}

    未來我們可能會(huì)向JSX添加一種不需要帶有 key 屬性的特殊的 fragments 。

    同時(shí)，我們也使 render 可以返回一個(gè)字符串：

    render() {
  return "Hello React 16!";
}
    更好的錯(cuò)誤處理機(jī)制

    以前，渲染過程中的運(yùn)行錯(cuò)誤可能會(huì)使 React 處于崩潰狀態(tài)，還會(huì)產(chǎn)生隱藏的錯(cuò)誤消息，并需要頁面刷新才能恢復(fù)。為了解決這個(gè)問題， React 16 使用了一種更靈活的錯(cuò)誤處理機(jī)制。默認(rèn)情況下，假如組件的 render 或生命周期的其它方法中拋出了錯(cuò)誤，整個(gè)組件樹會(huì)從根卸載。這樣做是為了阻止損壞數(shù)據(jù)的顯示。然而，這可能還不是最理想的用戶體驗(yàn)。

    每次發(fā)生錯(cuò)誤時(shí)，不會(huì)卸載整個(gè)app，你可以看到錯(cuò)誤邊界（error boundaries）。錯(cuò)誤邊界是可以在子樹內(nèi)部捕獲錯(cuò)誤的一種特殊組件，并且顯示一個(gè)可顯示的回退版本UI。可以把錯(cuò)誤邊界看成是對(duì)于React的 try-catch 語句。

    如果想了解更多，可以看這：previous post on error handling in React 16

    Portals

    Portals 提供了一種一流的方法，將子節(jié)點(diǎn)渲染到父節(jié)點(diǎn)之外的 DOM 節(jié)點(diǎn)中。

    render() {
  // React 不會(huì)創(chuàng)建一個(gè)新的div。它會(huì)像`donNode`中渲染子組件。
  // `domNode` 是任何有效的DOM節(jié)點(diǎn)，無論它處于DOM中的哪個(gè)位置。
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

    查看更全面的例子：documentation for portals.

    更好的服務(wù)端渲染

    React 16 包含了一個(gè)完全重寫的服務(wù)端渲染器（randerer）。它真的很快，因?yàn)樗С至鳎╯treaming），所以可以向客戶端更快地發(fā)送字節(jié)。

    支持自定義DOM屬性

    之前我們忽略無法識(shí)別的 HTML 和 SVG 屬性，新版本中， React 可以將它們傳遞給 DOM 了。這樣還有額外的好處，去除了 React 屬性的白名單列表，從而減少了文件大小。

    削減文件大小

    盡管增加了這些新特性，但是 React 16 實(shí)際上比 15.6.1 更?。?/p>

    react 是5.3kb（gzip：2.2kb），之前是20.7kb（gzip：6.9kb）

    react-dom 是103.7kb（gzip：32.6kb），之前是141kb（gzip：42.9kb）

    react + react-dom 是109kb（gzip：34.8kb），之前是161.7kb（gzip：49.8kb）

    相比以前的版本，小了32%（gzip后小了30%）。

    MIT 協(xié)議

    React 16 的協(xié)議已經(jīng)是 MIT 協(xié)議了，當(dāng)然，也把已經(jīng)發(fā)布的15.6.2頁改成MIT協(xié)議了。

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88719.html

    相關(guān)文章

    • 你不知道的parseInt

      摘要：前言原由偶然看到一個(gè)略微奇妙的代碼初看之時(shí)，瞬間得出答案雖然心底有些許疑問的聲音因此追溯根源，沒想到答案讓我驚呼這里黑人問號(hào)，手動(dòng)滑稽查詢了等文檔，因此得出下文結(jié)論，由于英語渣渣，所以有不恰當(dāng)?shù)牡胤较Ｍ魑粠兔Ω瘮?shù)是核心的一個(gè)全局函數(shù) 前言 原由：偶然看到一個(gè)略微奇妙的代碼[1, 2, 3].map(parseInt)初看之時(shí)，瞬間得出答案[1, 2, 3]（雖然心底有些許疑問的聲...

      DesGemini 評(píng)論0 收藏0

    • 我所理解的簡(jiǎn)單的項(xiàng)目結(jié)構(gòu)

      摘要：將圖片都放入文件夾下指定公共的名字。匹配刪除的文件根目錄開啟在控制臺(tái)輸出信息啟用刪除文件插入開關(guān)說一些可能沒用的站在前端角度不懂的很多很多時(shí)候一個(gè)項(xiàng)目都是由一個(gè)小組完成的，小組成員可能包括產(chǎn)品，前端，后端，測(cè)試，運(yùn)營等等。 不急，先聽我嘮會(huì)嗑~ 隨著js發(fā)展的如此迅速，市場(chǎng)上越來越多的前端框架可以方便開發(fā)者使用。 本人大四渣渣一名，先后實(shí)習(xí)了兩個(gè)地方，第一家公司用vuejs，實(shí)話...

      _DangJin 評(píng)論0 收藏0

    • 用Gatsby和Strapi創(chuàng)建一個(gè)靜態(tài)博客(翻譯和自己探索過程中的經(jīng)驗(yàn)總結(jié))

      摘要：用和創(chuàng)建一個(gè)靜態(tài)博客翻譯和自己探索過程中的經(jīng)驗(yàn)總結(jié)原文參閱或本篇主要是對(duì)其精華內(nèi)容進(jìn)行翻譯以及實(shí)操過程中遇到的問題解決和探索一些具體的操作步驟和細(xì)節(jié)我將忽略結(jié)合原文一起閱讀效果更佳注本文操作環(huán)境是介紹這是一個(gè)包含很多靜態(tài)內(nèi)容頁面的站點(diǎn)從技術(shù) 用Gatsby和Strapi創(chuàng)建一個(gè)靜態(tài)博客(翻譯和自己探索過程中的經(jīng)驗(yàn)總結(jié)) 原文參閱: Building a static blog usin...

      lijy91 評(píng)論0 收藏0

    • 【babel+小程序】記“編寫babel插件”與“通過語法解析替換小程序路由表”的經(jīng)歷

      摘要：而掃描各個(gè)模塊并合并路由表的腳本非常簡(jiǎn)單，讀寫文件就了。編寫插件之前先要理解抽象語法樹這個(gè)概念。的解析器，的配置。編寫腳本識(shí)別字段思路首先獲取到源代碼是類單文件的語法。獲取內(nèi)的字段，并替換成已生成的路由表。 話不多說先上圖，簡(jiǎn)要說明一下干了些什么事。圖可能太模糊，可以點(diǎn)svg看看showImg(https://segmentfault.com/img/bV3fs4?w=771&h=63...

      李昌杰 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <