天天看點

蒲公英 · JELLY技術周刊 Vol.18 關于 React 那些設計

蒲公英 · JELLY技術周刊 Vol.18 關于 React 那些設計

蒲公英 · JELLY技術周刊 Vol.18

自 2011 年,Facebook 第一次在 News Feed 上采用了 React 架構,十年來 React 生态中很多好用的功能和工具在諸多設計思想和哲學的引導下被開發完成,印象最深的的設計是哪些?Fiber、Hooks 還是 Suspense?或者是一些 React 生态中的工具,比如 React Europe 2020 上剛剛分享的 Recoil?從 Class 走向 Function,Algebraic Effects 又有多少了解呢?

登高遠眺

天高地迥,覺宇宙之無窮

基礎技術

深色模式适配指南

自從 iOS13 自帶支援深色模式(dark mode)以來,就一直為大家所關注,仿佛支援深色模式已經成為現代移動應用和網站的一個潮流,這不得不證明 iOS 的影響力之強大。本文就 Web、APP、Flutter 如何來實作深色模式适配,進行了深入地剖析。其中 Web 适配最終采用的是 CSS 變量+降級的方案,而 iOS、Android 原生以及 Flutter 都有各自系統提供的 API 能夠比較容易地實作深色模式适配。

前端架構

超簡單 Algebraic Effects 入門 -- React Team 出品

React team 的 Sebastian(曾提出 Hooks 與 Suspense 等特性) 常常談到 React 的某些特性其實是以 Algebraic Effects 作為心智模型,這讓他的同僚 Dan (Redux 作者)非常好奇。一番探索之後 Dan 發現這個從函數式程式設計領域而來的概念并沒有一些學術論文上寫的那麼複雜,是以透過本文向不了解 Algebraic Effects 的開發者進行科普,并講述了它與一些 React 特性之間的抽象聯系。

Recoil - 面向 React 設計的狀态管理庫

在 5 月的 React Europe 2020 上,Dave McCabe 為我們分享了 FaceBook 推出的狀态管理工具 Recoil。在狀态管理工具琳琅滿目的今日,為什麼 React 官方要躬身入局?Recoil 的誕生是為了解決什麼問題?Recoil 又是如何相容 React 最新的特性呢?詳情請看視訊回顧。

深入解析 React Fiber 架構及源碼

在React架構中,總是有一個用于保持狀态的内部執行個體樹(internal instances)(元件,DOM節點等),與之相對的是跟具體平台有關的public instance,也被稱為Host instance 。從React 16開始,React推出了該内部執行個體樹的新實作以及負責操作樹的算法,被稱為Fiber,它能夠将任務分片,劃分優先級,同時能夠實作類似于作業系統中對線程的搶占式排程,功能非常強大。有興趣的小夥伴可以通過這篇文章進行深入的了解~

設計哲學

除了 Todo App 之外,我們如何才能獲得實踐技術的新點子?

學習新技術的時候,你會拿什麼項目來練手呢?大部分人都會選擇寫一個 Todo App(提醒事項程式) 吧。作為過來人,GaneshMani 認為,Todo App、聊天室等簡單的小項目固然可以讓初學者熟悉語言、架構的運作,但對于職業生涯,甚至是激烈的面試競争來說,都是遠遠不夠的。如何想到一個更合适、更有實踐意義的項目?這篇文章手把手進行了教學。

工具推介

Postwoman - 一個開源、免費、快速、漂亮的女郵差?

Postman(郵差)你肯定聽說過,那 Postwoman(女郵差) 呢?不滿足于 Postman 的收費,又受不了 cURL 等工具的繁瑣用法,Liyas Thomas 決定用 node + Vue 自己造一個輪子,這便是 Postwoman 的由來。Postwoman 是一款開源的請求構造器,支援調試 Restful 接口,WebSocket、GraphQL 等也不在話下,用法與 Postman 沒有太大差別,最重要的是免費,永久的免費。

滄海拾遺

滄海拾遺,積跬步以至千裡

使用 react-docgen 自動生成元件文檔

寫文檔是不可能的,但是開發卻也離不開文檔,那麼一個自動化文檔就是必不可少的!如果你也用 React 完成開發工作,相信 react-docgen 會給日常的開發工作帶來極大的便利,統一文檔格式,節省時間做更多有意義的事情~~

手寫 webpack 打包一個 react 單頁面應用

打包是前端工程化中不變的問題,如何高效高品質的完成它,在開發和釋出過程中,都可以節省很多成本。但是你真的了解打包的原理麼?這次我們就從一個簡單的 react 單頁面應用着手,來詳細講講 webpack 到底幹了啥。

「蒲公英」期刊,每周更新,我們專注于挖掘「基礎技術、工程化、跨端架構技術、圖形程式設計、服務端開發、桌面開發、人工智能、設計哲學、前端架構」等多個大方向的業界熱點,并加以專業的解讀;不僅如此,我們還會推介精選凹凸技術文章,向大家呈現團隊内的研究技術方向。

擡頭仰望,蒲公英的種子會生根發芽,如夏花絢爛;格物緻知,我們登高遠眺、滄海拾遺,以求積矽步而至千裡。

蒲公英 · JELLY技術周刊貢獻指南

蒲公英 · JELLY技術周刊 Vol.18 關于 React 那些設計

歡迎關注凹凸實驗室部落格:aotu.io

或者關注凹凸實驗室公衆号(AOTULabs),不定時推送文章:

蒲公英 · JELLY技術周刊 Vol.18 關于 React 那些設計