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

xi4oh4o 發布于2019-08-21 16:47 / 2277人閱讀

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

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

原文地址：React v16.0

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

新的render()返回類型

你現在可以在一個組件的 render 方法中中返回一個元素數組。就像其它數組一樣，你需要為每一個數組元素添加一個 key 來避免 key warning 。

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

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

同時，我們也使 render 可以返回一個字符串：

render() {
  return "Hello React 16!";
}

更好的錯誤處理機制

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

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

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

Portals

Portals 提供了一種一流的方法，將子節點渲染到父節點之外的 DOM 節點中。

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

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

更好的服務端渲染

React 16 包含了一個完全重寫的服務端渲染器（randerer）。它真的很快，因為它支持流（streaming），所以可以向客戶端更快地發送字節。

支持自定義DOM屬性

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

削減文件大小

盡管增加了這些新特性，但是 React 16 實際上比 15.6.1 更小！

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 協議

React 16 的協議已經是 MIT 協議了，當然，也把已經發布的15.6.2頁改成MIT協議了。

云服務器 GPU云服務器 React Hooks 文檔重大更新！更新文檔吧開發文檔更新 php發布更新

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88719.html

你不知道的parseInt

摘要：前言原由偶然看到一個略微奇妙的代碼初看之時，瞬間得出答案雖然心底有些許疑問的聲音因此追溯根源，沒想到答案讓我驚呼這里黑人問號，手動滑稽查詢了等文檔，因此得出下文結論，由于英語渣渣，所以有不恰當的地方希望各位幫忙斧正函數是核心的一個全局函數前言原由：偶然看到一個略微奇妙的代碼[1, 2, 3].map(parseInt)初看之時，瞬間得出答案[1, 2, 3]（雖然心底有些許疑問的聲...

DesGemini 2019-08-20 18:33 評論0 收藏0
我所理解的簡單的項目結構

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

_DangJin 2019-08-22 16:17 評論0 收藏0
用Gatsby和Strapi創建一個靜態博客(翻譯和自己探索過程中的經驗總結)

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

lijy91 2019-06-26 17:32 評論0 收藏0
【babel+小程序】記“編寫babel插件”與“通過語法解析替換小程序路由表”的經歷

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

李昌杰 2019-08-26 11:36 評論0 收藏0