9 月 26 日致稀,用于構(gòu)建 UI 的 JavaScript 庫 React 16 的最新版本上線太防。
Facebook 最終在現(xiàn)有的兩種 React 版本中選擇了出現(xiàn) bug 概率最少的一款。這次版本更新的最大看點(diǎn)是 React 重寫了核心酸员。
并如之前承諾的蜒车,將 React 16 JavaScript 庫以及 GraphQL 查詢語言的許可證從原來的 BSD + 專利條款改為更受歡迎的 MIT 許可證。
之前專門做了一個(gè)關(guān)于React.js例子的網(wǎng)站幔嗦。推薦訪問閱讀:Reactjs Examples酿愧。
作為最廣泛使用的用于構(gòu)建 Web 用戶界面的基礎(chǔ)框架,React 的這一許可證的修改得到了社區(qū)的強(qiáng)烈反響邀泉,雖然有些不同意見嬉挡,但是大部分人還是表示喜聞樂見——一方面代表了社區(qū)的勝利,另外一方面也可以避免大量的采用 React 的項(xiàng)目重寫汇恤。
Facebook 前端工程師 Andrew Clark 在博客上正式發(fā)布了 React 16庞钢,并展示了一些新特性,這些特性包括:
1.render 函數(shù)可返回?cái)?shù)組和字符串因谎。不必增加嵌套了基括,數(shù)組需帶有 key 屬性。
2.更好的錯(cuò)誤處理〔撇恚現(xiàn)在你可以在組件內(nèi)部出錯(cuò)時(shí)使用一個(gè)替代的 UI风皿。
3.Portal 函數(shù)〗宠担可以在 DOM 任意位置插入內(nèi)容【窘祝現(xiàn)在想彈個(gè)對(duì)話框或 tooltip 更方便了。
4.超快的 SSR患朱。React 16 改進(jìn)了服務(wù)端渲染,據(jù)測(cè)試炊苫,相比 React 15.6.1裁厅,在不同版本的 Node 環(huán)境下可達(dá)到 5-10 倍的性能提升。
5.支持自定義的 DOM 屬性∏劝現(xiàn)在不用使用屬性 whitelist 了执虹,React 會(huì)將未知屬性直接傳到 DOM 中。
6.減小了庫文件大小∵肜妫現(xiàn)在的 React 核心庫大小僅 5.3kb(gzip 后 2.2kb)袋励,相比原來縮減了 30%。
7.更改為 MIT 開源協(xié)議。上周 Facebook 發(fā)表博客表示慫了茬故,從 React 16 開始更改為更寬松的 MIT 協(xié)議盖灸。對(duì)于某些不方便升級(jí)的 React 用戶,還發(fā)布了 15.6.2 版本磺芭,也改用了 MIT 協(xié)議赁炎。
除了上面這些之外,React 16 變化最大的是因?yàn)槭褂昧诵乱?React Fiber钾腺。
React Fiber 是對(duì) React 核心架構(gòu)的徹底重寫徙垫,F(xiàn)iber 是一種輕量的執(zhí)行線程,依靠更高級(jí)的任務(wù)調(diào)度放棒,實(shí)現(xiàn)協(xié)作式的多任務(wù)處理姻报。
上面的大多數(shù)特性都是由 React Fiber 帶來,并且它還讓 異步渲染 成為了可能间螟,采用了異步渲染以后 React 應(yīng)用響應(yīng)會(huì)更加靈活吴旋,主線程將不會(huì)被阻塞。
Facebook 的工程經(jīng)理 Sophie Alpert 在一篇講述架構(gòu)變更的文章中寫道寒亥,“這好比給一輛行進(jìn)中的汽車更換引擎”:
我們?cè)诒3滞獠?API 不變的同時(shí)徹底重寫了 React……數(shù)百個(gè)公司(包括 Facebook 在內(nèi))每天都在使用 React邮府,我們希望在重寫 React 時(shí)不會(huì)影響到他們。
Facebook 使用了功能開關(guān)(feature flag)溉奕,這樣 Fiber 和 Non-Fiber 版本就可以放在一起褂傀。他們運(yùn)行單元測(cè)試,在 facebook.com 和 messenger.com 上運(yùn)行新代碼加勤,以此來發(fā)現(xiàn)和減少軟件缺陷仙辟,并驅(qū)動(dòng)新渲染器的功能演進(jìn)。
當(dāng)然鳄梅,重寫是不完美的叠国,可能會(huì)帶來一些重大的變更。Clarks 說戴尸,這些變更”只會(huì)影響到一些不太常見的情況粟焊,我們不希望它們給大多數(shù)應(yīng)用造成影響“。