# 蒲公英 · JELLY技術週刊 Vol.18 > 自 2011 年，Facebook 第一次在 News Feed 上採用了 React 框架，十年來 React 生態中很多好用的功能和工具在諸多設計思想和哲學的引導下被開發完成，印象最深的的設計是哪些？Fiber、Hooks 還是 Suspense？或者是一些 React 生態中的工具，比如 React Europe 2020 上剛剛分享的 Recoil？從 Class 走向 Function，Algebraic Effects 又有多少了解呢？ ## 登高遠眺 > 天高地迥，覺宇宙之無窮 ### 基礎技術 #### [深色模式適配指南](http://3.cn/100mIn-WV) 自從 iOS13 自帶支援深色模式（dark mode）以來，就一直為大家所關注，彷彿支援深色模式已經成為現代移動應用和網站的一個潮流，這不得不證明 iOS 的影響力之強大。本文就 Web、APP、Flutter 如何來實現深色模式適配，進行了深入地剖析。其中 Web 適配最終採用的是 CSS 變數+降級的方案，而 iOS、Android 原生以及 Flutter 都有各自系統提供的 API 能夠比較容易地實現深色模式適配。 ### 前端框架 #### [超簡單 Algebraic Effects 入門 -- React Team 出品](http://3.cn/148b-Zgr) React team 的 Sebastian（曾提出 Hooks 與 Suspense 等特性） 常常談到 React 的某些特性其實是以 Algebraic Effects 作為心智模型，這讓他的同事 Dan （Redux 作者）非常好奇。一番探索之後 Dan 發現這個從函數語言程式設計領域而來的概念並沒有一些學術論文上寫的那麼複雜，因此透過本文向不瞭解 Algebraic Effects 的開發者進行科普，並講述了它與一些 React 特性之間的抽象聯絡。 #### [Recoil - 面向 React 設計的狀態管理庫](http://3.cn/100mI-nsN) 在 5 月的 React Europe 2020 上，Dave McCabe 為我們分享了 FaceBook 推出的狀態管理工具 Recoil。在狀態管理工具琳琅滿目的今日，為什麼 React 官方要躬身入局？Recoil 的誕生是為了解決什麼問題？Recoil 又是如何相容 React 最新的特性呢？詳情請看視訊回顧。 #### [深入解析 React Fiber 架構及原始碼](http://3.cn/100mIn-2P) 在React框架中，總是有一個用於保持狀態的內部例項樹(internal instances)（元件，DOM節點等），與之相對的是跟具體平臺有關的public instance，也被稱為Host instance 。從React 16開始，React推出了該內部例項樹的新實現以及負責操作樹的演算法，被稱為Fiber，它能夠將任務分片，劃分優先順序，同時能夠實現類似於作業系統中對執行緒的搶佔式排程，功能非常強大。有興趣的小夥伴可以通過這篇文章進行深入的瞭解~ ### 設計哲學 #### [除了 Todo App 之外，我們如何才能獲得實踐技術的新點子？](http://3.cn/100mI-och) 學習新技術的時候，你會拿什麼專案來練手呢？大部分人都會選擇寫一個 Todo App（提醒事項程式） 吧。作為過來人，GaneshMani 認為，Todo App、聊天室等簡單的小專案固然可以讓初學者熟悉語言、框架的運作，但對於職業生涯，甚至是激烈的面試競爭來說，都是遠遠不夠的。如何想到一個更合適、更有實踐意義的專案？這篇文章手把手進行了教學。 ### 工具推介 #### [Postwoman - 一個開源、免費、快速、漂亮的女郵差？](http://3.cn/100mI-mkU) Postman（郵差）你肯定聽說過，那 Postwoman（女郵差） 呢？不滿足於 Postman 的收費，又受不了 cURL 等工具的繁瑣用法，Liyas Thomas 決定用 node + Vue 自己造一個輪子，這便是 Postwoman 的由來。Postwoman 是一款開源的請求構造器，支援除錯 Restful 介面，WebSocket、GraphQL 等也不在話下，用法與 Postman 沒有太大區別，最重要的是免費，永久的免費。 ## 滄海拾遺 > 滄海拾遺，積跬步以至千里 #### [使用 react-docgen 自動生成元件文件](http://3.cn/100mI-mO2) 寫文件是不可能的，但是開發卻也離不開文件，那麼一個自動化文件就是必不可少的！如果你也用 React 完成開發工作，相信 react-docgen 會給日常的開發工作帶來極大的便利，統一文件格式，節省時間做更多有意義的事情～～ #### [手寫 webpack 打包一個 react 單頁面應用](http://3.cn/-100mIni7) 打包是前端工程化中不變的問題，如何高效高質量的完成它，在開發和釋出過程中，都可以節省很多成本。但是你真的瞭解打包的原理麼？這次我們就從一個簡單的 react 單頁面應用著手，來詳細講講 webpack 到底幹了啥。 > 「蒲公英」期刊，每週更新，我們專注於挖掘「**基礎技術**、**工程化**、**跨端框架技術**、**圖形程式設計**、**服務端開發**、**桌面開發**、**人工智慧**、**設計哲學**、**前端框架**」等多個大方向的業界熱點，並加以專業的解讀；不僅如此，我們還會推介精選凹凸技術文章，向大家呈現團隊內的研究技術方向。 > > 抬頭仰望，蒲公英的種子會生根發芽，如夏花絢爛；格物致知，我們登高遠眺、滄海拾遺，以求積矽步而至千里。 > > [蒲公英 · JELLY技術週刊貢獻指南](http://3.cn/12dbZQ-x)  ------- 歡迎關注凹凸實驗室部落格：[aotu.io](https://aotu.io/) 或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章： ![歡迎關注凹凸實驗室公眾號](https://img2020.cnblogs.com/other/1992869/202008/1992869-20200819095216500-59103