React Status 中文周刊 #8 - 100 行代碼實現 Facebook 的 Recoil React 庫

2021-03-02 印記中文

補上上周的周刊,由於小編原因未及時發出,還請諒解,遲來的周刊。

🔥 本周熱門

100 行代碼實現 Facebook 的 Recoil React 庫 — 這個想法很大膽。作者並非為了 100% 複製 Recoil 的功能,而是為了挑戰自己的編程技術。來看看他怎麼做的吧。

Bennett Hardwick

React Hook 不好的一面 — 討論 hook 的文章數不勝數,但大多都是從積極的一面出發。而本文則提出了相反的觀點。儘管,從評論中可以看出並非所有人都同意作者的主張。詳戳。

Nir Yosef

用 Storybook 構建 React 應用 — 我們在往期周刊中收錄了多篇關於 Storybook 的文章,但本篇描繪了完整的開發周期。

Abdulazeez Adeshina

Requisite React — Dodd 推出的系列課程都很幽默風趣,尤其是他通過具體的示例來描述一些抽象概念令人印象深刻。

Kent C. Dodds

Recoil 0.0.11 版本發布:一種實驗性的狀態管理方式 — 這個版本新增了 React 併發模式支持。

Facebook Experimental

📘 教程和趣事

React 代碼分割入門指南 — 代碼分割 是一種高級定製技術,用於把代碼劃分成按需加載的分包。

Gustavo A. López

使用 i18next 進行 React 應用本地化的終極指南 — 無論用戶使用哪種語言,你的應用都能為他們提供服務,這可能是實現用戶增長最快和最有用的方式。i18next 這款強大的國際化框架,助你應用輕鬆實現國際化。

Mohammad Ashour

如何在 React Native 中使用 Expo — 兩篇系列文章,第一篇文章作者提供一個簡單易懂的入門教程,介紹了如何安裝和配置 Expo。

Robin Wieruch

使用 `React.useImperativeHandle` 的具體示例 — 這個 hook 不常被使用,但在本文列舉的場景下作者聲稱使用 useImperativeHandle 是最合適的。深入理解後,也許你也可以在合適的場景使用它。

Yoav Niran

🔧 代碼和工具

react-range: 支持可訪問性的滑動輸入條 — 支持可訪問性和定製化案例

Vojtech Miksu

react-async-hook: 在組件中處理異步操作 — 我們被簡介種草:「這個庫只做一件小事,並且把它做得很好。」

Sébastien Lorber

Chronograf: 集成監控和報警 — 和 Telegraf 師出同門。靈活,智能,支持對收集的指標數據進行可視化,同時支持自動報警功能。

InfluxData

react-filepond:  文件上傳組件 — Filepond 可能是 JS 文件上傳庫的最佳選擇了,但它上手難度有點兒大。為了你更容易上手,我們封裝了這個 靈活又有趣的庫。

Rik Schennink

react-xr: 創建 VR/AR 應用的工具庫 — 如果你相信 VR/AR 是 UI 設計和實現領域的下一個爆點,最好試試這個工具。可以在這裡預覽 CodeSandbox。

react-spring

SurveyJS: 問卷調查的現代化實現方式 — 儘管我們可能討厭填寫問卷調查,但有時我們確實希望通過使用它們來了解社區的想法。這個庫能幫你完成這類任務。案例

SurveyJS

一個用 React 構建的實時交易系統 — 這個案例是關於 F/X 交易的實時交易系統,它是使用 React/Redux, .NET 和 Node 的開源項目。

Adaptive Consulting

關注我們

我們將為你帶來最前沿的前端資訊。

你的讚賞是我寫作的動力

相關焦點

  • React Status 中文周刊 #18 - 三種 React 的反面模式
    近來,React 16.8 推出了 Hook,Vue 3.0 推出了 Composition API,但是對於你的項目來說真的需要嘛?電腦訪問,請閱讀原文!🔥 本周熱門Reactochart:由 Spotify 推出的 react 圖表庫 — 此圖表庫由 Spotify 推出,目前已在線上穩定運行了很長時間,同時擁有友好的文檔,每種類型的圖表(折線,條形圖,餅圖,直方圖,熱圖等)都有對應的 demo 參考。
  • React Status 中文周刊 #21 - 2020 年 React 大事記回顧
    原文連結:https://medium.com/swlh/the-ugly-side-of-hooks-584f0f8136b6Nir Yosef4.  5 步教你結構化 React 項目 — 實操如何針對大型 React 應用實現結構化
  • React Status 中文周刊 #7 - 使用 React 仿寫 TikTok
    本期周刊推薦了許多實用的庫和教程,比如使用 React 仿寫一個 TikTok,React 企業級應用案例,Draft.js 富文本編輯器等。而這篇文章將為你省去評估類庫所耗費的時間和精力,文中提供了一份主流庫的深度對比與分析。
  • React Status 中文周刊 #2 - 使用 React 編寫 CLI 工具
    譯者:Phobal校對者:QC-L、whatwewant🔥 本周熱門用 React 重構 facebook.comAnt Design 團隊TinaCMS:採用 React 實現的所見即所得內容編輯器
  • React Status 中文周刊 #26 - Aleph:基於 Deno 的 React 框架
    以及使用諸如 AWS CDK 之類的自動化工具,你可以在 React 應用中實現和部署兩種服務端渲染方案。本教程介紹了如何通過使用 HamoniSync 來實現。倉庫地址:https://github.com/sanity-io/sanitySanityHomebase React:三行代碼開啟狀態管理
  • React Status 中文周刊 #19 - React Hook發布兩周年回顧
    原文連結:https://react-spectrum.adobe.com/react-aria/index.htmlAdobeTyler McGinnis🛠 代碼與工具你可以像使用其他庫一樣使用它,或者也可以當作是深入理解 Intersection Observer API 的工具。
  • React Status 中文周刊 #15 - 全新的 「Redux 核心基礎」 教程
    Redux Core TeamReact 庫選擇指南 — 每周,代碼與工具章節都會提供很多有價值的React 庫,但是關於如何選擇適當的庫是個頭疼的問題,而本文正好針對這個問題提供了選擇指南。Marlom Karim🛠 代碼與工具react-easy-crop 3.3:一個通過簡單交互來裁剪圖像的組件
  • Facebook 發布 React Native for Android
    React Native 讓開發者使用 JavaScript 和 React 編寫應用,利用相同的核心代碼就可以創建 Web,iOS 和 Android 平臺的原生應用。React Native 的宗旨是,學習一次,高效編寫跨平臺原生應用。
  • ReactNative學習資源大匯集
    react-native 官方api文檔 http://facebook.github.io/react-native/docs/getting-started.htmlreact-native中文文檔(極客學院) http://wiki.jikexueyuan.com/project/react-native/react-native中文文檔(react
  • create-react-app 2.1.3 發布,React App 命令行工具
    create-react-app 是 facebook 官方發布的React App 手腳架工具,通過一行命令即可創建出一個 React App 。讓開發者專注於代碼,而不是構建工具。
  • 【重學React】動手實現一個react-redux
    react-redux 是什麼react-redux 是 redux 官方 React 綁定庫。它幫助我們連接UI層和數據層。本文目的不是介紹 react-redux 的使用,而是要動手實現一個簡易的 react-redux,希望能夠對你有所幫助。
  • 30 分鐘精通 React 今年最勁爆的新特性 —— React Hooks
    如下面的代碼可以看到我們的DataProvider組件包含了所有跟狀態相關的代碼,而Cat組件則可以是一個單純的展示型組件,這樣一來DataProvider就可以單獨復用了。</p>  </div>);export default withUser(UserPage);以上這兩種模式看上去都挺不錯的,很多庫也運用了這種模式,比如我們常用的React Router。但我們仔細看這兩種模式,會發現它們會增加我們代碼的層級關係。
  • React 16.8發布:hooks終於來了!
    從 16.8.0 開始,React 包含了穩定版本的 React hooks 實現:React DOMReact DOM ServerReact Test RendererReact Shallow Renderer請注意,要使用 hooks,所有 React 包都需要升級到 16.8.0 或更高版本。
  • 修復 React 代碼中煩人的 Warning
    react的diff算法是把key當成唯一id然後比對組件的value來確定是否需要更新的,所以如果沒有key,react將不會知道該如何更新組件。你不傳 key 也能用是因為 react 檢測到子組件沒有 key 後,會默認將數組的索引作為 key。rea
  • 十一個優質React Hook庫, 收藏備用
    自最初發布以來已經有一段時間了,這意味著有很多支持庫。在搜索與React相關的內容時,很難不說「 hook」。如果你們還沒有使用它的話,應該儘快將它們加入代碼庫。它們將使您的編碼生活變得更加輕鬆和愉快。在React開發中,保持乾淨的代碼風格,可讀性,可維護性,更少的代碼行以及可重用性至關重要。本篇文章將向您介紹應立即開始使用的十一個React Hook庫。
  • 30 分鐘精通 React 新特性——React Hooks
    如下面的代碼可以看到我們的 DataProvider組件包含了所有跟狀態相關的代碼,而 Cat組件則可以是一個單純的展示型組件,這樣一來 DataProvider就可以單獨復用了。</p>  </div>);export default withUser(UserPage);以上這兩種模式看上去都挺不錯的,很多庫也運用了這種模式,比如我們常用的React Router。但我們仔細看這兩種模式,會發現它們會增加我們代碼的層級關係。
  • 5個很棒的 React.js 庫,值得你親手試試!
    隨之而來的是越來越多的庫的發布,給我們帶來了新的可能性,但最重要的是讓開發這工作變得越來越簡單。在本文中,介紹 5 個 React 庫,希望能給你帶來一些幫助。1. react-portal 我認為React中的 Portals(傳送門) 對大多數人來說都很熟悉,即使它們很少被使用。
  • React.js 2016最佳實踐
    更簡單自然的方式,就是使用Immutable.js(https://facebook.github.io/immutable-js/)。如果你在瀏覽器中使用React.js,你將會接觸到這個點,並為其選擇一個庫。  我們選擇的是出自優秀rackt社區的react-router,這個社區總是能為React.js愛好者們帶來高質量的資源。  要使用react-router需要查看它的文檔,但更重要的是:如果你使用Flux/Redux,我們推薦你將路由state與store或全局state保持同步。
  • 十大最受歡迎的 React Native 應用開發編輯器
    Nuclide官網:https://nuclide.io/Github 項目地址:facebook / nuclide(https://github.com/facebook/nuclide)文檔:設置:https://nuclide.io/docs/editor/setup/Nuclide with React Native:https
  • 函數式編程看React Hooks(一)簡單React Hooks實現
    以下 三點是 react 官網所提到的 hooks 的動機 https://zh-hans.reactjs.org/docs/hooks-intro.html#motivation代碼重用:在hooks出來之前,常見的代碼重用方式是 HOC 和render props,這兩種方式帶來的問題是:你需要解構自己的組件,同時會帶來很深的組件嵌套複雜的組件邏輯:在class組件中