React Status 中文周刊 #18 - 三種 React 的反面模式

2021-03-02 印記中文

本期周刊有個特別有意思的觀點，就是當一種事務成為一種趨勢時，不盲目崇拜，並進行逆向思考。近來，React 16.8 推出了 Hook，Vue 3.0 推出了 Composition API，但是對於你的項目來說真的需要嘛？

電腦訪問，請閱讀原文！

🔥 本周熱門

Reactochart：由 Spotify 推出的 react 圖表庫 — 此圖表庫由 Spotify 推出，目前已在線上穩定運行了很長時間，同時擁有友好的文檔，每種類型的圖表（折線，條形圖，餅圖，直方圖，熱圖等）都有對應的 demo 參考。

Spotify

神奇的 hover 動效 — Josh 面向中級 React 開發者編寫了一份如何創建交互友好的 UI 組件的教程。

Josh W Comeau

React 組件最佳實踐 7 條原則 — 本文列舉了 React 組件開發中遇到的 7 個注意點，並給出了相應的最佳實踐。

Anton Gunnarsson

如何合理的使用 React useRef — 合理的使用 useRef() 可以避免一些不必要的重複渲染。

Aleem Isiaka

如何在 useEffect 中請求數據 — Max 介紹了什麼是副作用、純函數以及如何在 useEffect 中請求數據。

Max Rozen

Gatsby 最新推出了基於文件系統的路由 API

Lennart Jörgens

📘 教程和趣事

如何精簡 Styled-Components — 雖然 styled-components 這種把 JavaScript 和 CSS 寫在一起的做法備受推崇，但是本文的作者認為這也會帶來很多重複代碼，且看她是如何處理的。

Allie Stehney

三種 React 的反面模式 — 當一種事務成為一種趨勢時，不盲目崇拜，並對它提出逆向思考，這是需要足夠的勇氣的。文章中，作者就 React 的 3 大熱點趨勢進行了討論，提出了雖然不是更簡化，但是更有效的解決方案。

Ian Ker-Seymer

如何使用 Gatsby 的夜間模式 — 你需要了解如何使用夜間模式，以此來更好的掌握 Gatsby。

Victor Zhou

如何在 Next.js 的應用中集成 Typescript — 作者除了介紹如何集成 Typescript 外，還介紹了如何構建一個權限管理系統。

Nickolas Fisher

用 useAuth 輕鬆實現用戶認證功能 — 先別造輪子了，來看看 Dan Wilson，TJ Vantoll 和 Swizec Teller 如何在 10 分鐘內實現用戶認證功能。

Dan Wilson

React Colorful：比 React Color 更小更快的拾色器 — 我們之前在 203 期 介紹過 React Colorful，這次我們來介紹下為什麼要使用它而不去使用功能更全的 react-color。

Nathan Sebhastian

Electron 結合 React 的終極指南 — 本文介紹了如何使用 Electron 進行跨平臺桌面應用開發，像 Slack，Skype，WhatsApp，GitHub，Microsoft Teams 和 Twitch 這樣的公司也都在使用這門技術。

Aditya Patnaik

如何使用 React Native 構建安全的移動應用 — 本文闡述了三個 React Native 相關的安全策略。

Sophia Martin

🛠 代碼和工具

Why Did You Render：幫助你避免不必要的重複渲染  — 你可以用這個庫去提升 React 應用的渲染性能，也可以僅用來檢測組件在什麼時候、出於什麼原因發生了重複渲染。該庫已經發布了一段時間，並且從本周發布的版本（v6.0.1）開始支持了 React 17。

Welldone Software Solutions Ltd.

Next + Netlify Starter：將 Next.js 應用實時部署至 Netlify — 如果你想體驗一把 PaaS，可以試試這個庫，它可以幫你將 Next.js 應用實時部署至 Netlify。

Cassidy Williams

useAudioPlayer：面向定製化開發瀏覽器音頻播放器的 Hook — 上周我們發表了一篇關於提供個性化播客服務的文章，本周我們就帶來了如何製作個性化的音頻播放器。該 Hook 也可用於定製 Howler.js 的音頻播放器。

Erich Kuerschner

react-instagram-embed：在你的應用中嵌入 Instagram 的照片 — 你可以使用這個組件將任何你想要的 Instagram 照片嵌入到你的應用中。

Shingo Sato

⚡️ 新聞速遞：

這些庫專注於完成特定的功能，你可以在後續的項目中看看能否用的上。

react-gl-transition-image：作者 Jakob Stasilowiczreact-collapse：作者 Nikita Butenkoreact-native-responsive-fontSize：作者 Yeongsu Hanuse-editable：作者 Phil Pluckthun🙋‍關注我們

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

你的讚賞是我寫作的動力

相關焦點

  • React Status 中文周刊 #7 - 使用 React 仿寫 TikTok
    本期周刊推薦了許多實用的庫和教程，比如使用 React 仿寫一個 TikTok，React 企業級應用案例，Draft.js 富文本編輯器等。ps: 近期我們打算在周刊中增添招聘模塊，有 React 招聘需求的小夥伴可以聯繫我們哦~🔥 本周熱門React 逐漸變為黑盒（2020 年更新）— 本文最初發表於 2019 年 10 月，作者近來進行了簡短的更新，新增了 Facebook React 工作組技術總監 Tom Occhino
  • React Status 中文周刊 #8 - 100 行代碼實現 Facebook 的 Recoil React 庫
    補上上周的周刊，由於小編原因未及時發出，還請諒解，遲來的周刊。
  • React Status 中文周刊 #19 - React Hook發布兩周年回顧
    原文連結：https://dev.to/ryansolid/the-react-hooks-announcement-in-retrospect-2-years-later-18lm原文連結：https://react-spectrum.adobe.com/react-aria/index.htmlAdobe
  • React Status 中文周刊 #26 - Aleph:基於 Deno 的 React 框架
    新年將近，提前預祝大家新年快樂~電腦閱讀，請訪問 https://docschina.org/weekly/react🔥 本周熱門基於 AWS Lambda 的 React 應用服務端渲染 — 通過使用 Lambda 或 Lambda@Edge
  • React Status 中文周刊 #21 - 2020 年 React 大事記回顧
    原文連結：https://www.robinwieruch.de/react-librariesRobin Wieruch原文連結：https://www.lorenzweiss.de/common_mistakes_react_hooks/Lorenz
  • React Status 中文周刊 #2 - 使用 React 編寫 CLI 工具
    SQLectronreact-error-boundary：簡單、可復用的 React 錯誤邊界組件Zeit UIreact-google-maps-api：在 React 組件中使用 Google Maps
  • React Status 中文周刊 #15 - 全新的 「Redux 核心基礎」 教程
    Max Rozenreact-simple-maps：基於 SVG 的聲明式 Map 庫Marlom Karim🛠 代碼與工具react-easy-crop 3.3：一個通過簡單交互來裁剪圖像的組件Tencent⚡️ 新聞速遞：三個很棒的問題解決者，庫名已經說明了一切：react-qr-svg
  • 30 分鐘精通 React 今年最勁爆的新特性 —— React Hooks
    但假如你在大型的工作項目中用react，你會發現你的項目中實際上很多react組件冗長且難以復用。尤其是那些寫成class的組件，它們本身包含了狀態（state），所以復用這類組件就變得很麻煩。那之前，官方推薦怎麼解決這個問題呢？答案是：渲染屬性（Render Props）1和高階組件（Higher-Order Components）2。我們可以稍微跑下題簡單看一下這兩種模式。
  • 30 分鐘精通 React 新特性——React Hooks
    但假如你在大型的工作項目中用react，你會發現你的項目中實際上很多react組件冗長且難以復用。尤其是那些寫成class的組件，它們本身包含了狀態（state），所以復用這類組件就變得很麻煩。那之前，官方推薦怎麼解決這個問題呢？答案是：渲染屬性（Render Props）和高階組件（Higher-Order Components）。我們可以稍微跑下題簡單看一下這兩種模式。
  • ReactNative學習資源大匯集
    /fangwei716/30-days-of-react-nativeReact-Native視頻教程(部分免費) https://egghead.io/technologies/reactReact Native 開發培訓視頻教程（中文|免費）https://www.gitbook.com/book/unbug/react-native-training/details
  • JavaScript教程:React Hook之useState和useEffect
    如果你已經使用React（16.8之前的版本）一段時間了，你將會發現React沒有提供將可重用行為「附加」到組件的方法，雖然渲染組件和高階組件解決了一些模式上的問題，但這些模式要求你在原有項目上進行重構組件，如果設計的不合理的話，很容易造成「包裝器」的冗餘，這時候就需要一個更好的共享狀態邏輯。
  • 修復 React 代碼中煩人的 Warning
    react的diff算法是把key當成唯一id然後比對組件的value來確定是否需要更新的，所以如果沒有key，react將不會知道該如何更新組件。你不傳 key 也能用是因為 react 檢測到子組件沒有 key 後，會默認將數組的索引作為 key。rea
  • React + Redux + React-router 全家桶
    web端開發需要搭配React-dom使用import React from 'react';import ReactDOM from 'react-dom';const App = () => (  <div>      <
  • react腳手架create-react-app入門
    記得關注，每天都在分享不同知識不管是哪個前端框架都支持快速開發，通過腳手架可以讓咱們更便捷的構建項目，無需考慮搭建環境問題，今天來聊聊create-react-app腳手架安裝腳手架>npm install -g create-react-app創建項目create-react-app myapp # myapp是項目的名稱，這樣就會在當前目錄生成一個myapp的項目
  • React 16.8 之 React Hook
    有了 react hook 就不用寫class(類）了，組件都可以用function來寫，不用再寫生命周期鉤子，最關鍵的，不用再面對this了！Hook 規則hook本質也是javaScript函數,但是他在使用的時候需要遵循兩條規則，並且react要求強制執行這兩條規則，不然就會出現奇怪的bug。
  • 如何在 react 中使用 if-elseif-else 多重條件判斷
    react中通常使用與運算符和三目運算進行條件判斷，但遇到更複雜的條件判斷時，就相對來說比較麻煩一些，這種情況應該怎麼處理呢？使用過 Vue 的同學們都知道，在 Vue 中有v-if, v-elseif和v-else的語法糖，方便我們進行流程控制。
  • 【重學React】動手實現一個react-redux
    react-redux 是什麼react-redux 是 redux 官方 React 綁定庫。它幫助我們連接UI層和數據層。本文目的不是介紹 react-redux 的使用，而是要動手實現一個簡易的 react-redux，希望能夠對你有所幫助。
  • 快速在你的vue/react應用中實現ssr(服務端渲染)
    使用rendertron實現SPA項目的服務端渲染以上是筆者之前實踐過的方案, 最後一種方案筆者將在下面一節詳細介紹, 因為next/nuxt是已有的服務端渲染解決方案,文檔寫的比較詳細,這裡筆者就不再做過多介紹了,這裡我們簡單介紹一下第二種和第三種方案.
  • 掌握react,這一篇就夠了
    react眾所周知的前端3大主流框架之一，由於出色的性能，完善的周邊設施風頭一時無兩。本文就帶大家一起掌握react。
  • React學習(二)-深入淺出JSX
    不過還是建議讀文章比較好)前言在Jq,原生javascript時期,在寫頁面時,往往強調的是內容結構,層疊樣式,行為動作要分離,三者之間分工明確,不要耦合在一起然而在React出現後,一切皆js,對於在JS裡面寫HTML代碼,剛開始是非常反感的,甚至有違背當初的原則但是,對於原先那種僅僅是把三種語言技術放在了三種不同文件位置裡進行分開管理了