小編整理了思否社群關於 React 的優質技術文章,歡迎大家閱讀 ~
文章推薦
公司前端工程還處於 React+Mobx 與 Spring MVC(freemarker+jQuery)技術棧共存的階段,兩種技術棧頁面難免會存在一些相同的業務功能點,如果分別開發和維護,就需要雙倍的人力成本,因此,我們嘗試將 React 業務元件在 webpack、babel 等利器的幫助下應用於 Spring MVC 專案。
在 React 16 之前,VirtualDOM 的更新採用的是Stack架構實現的,也就是迴圈遞迴方式。不過,這種對比方式有明顯的缺陷,就是一旦任務開始進行就無法中斷,如果遇到應用中元件數量比較龐大,那麼VirtualDOM 的層級就會比較深,帶來的結果就是主執行緒被長期佔用,進而阻塞渲染、造成卡頓現象。
React 是一個用於構建使用者介面的 JavaScript 框架。它可用於透過動態操作頁面內容來建立 JavaScript 應用程式。瀏覽器已經提供了在頁面中建立元素的 API,即 DOM,所以新手可能想知道 React 帶來了什麼以及它與 DOM 的關係。
知識點
emotion語法
react語法
css語法
typescript型別語法
動手擼元件系列 —— 1. 使用 React 實現一個 Collapse 元件
寫元件的能力是衡量前端工程師水平的重要指標,不管是基礎元件還是業務元件。
筆者在空閒時間也喜歡寫元件,為了幫助初學者上手寫React元件,同時為了分享我在寫元件中的經驗和想法,決定開設一個系列,即:動手擼元件系列,和大家分享一些公共元件和業務元件的實現方式和實現技巧。
作為這個系列的第一篇文章,分享下如何從零到一實現一個摺疊皮膚(Collapse)元件
趁著對 React 內部執行流程還記得住,業餘時間嘗試復刻一個 React —— big-react。
即然是復刻一個 React,那肯定得跑通部分官方的測試用例。
在跑一個用例時遇到個很有意思的問題,以下是排查過程。
不知道大家在用React開發時,有沒有注意到react與react-dom這兩個包中有個很奇葩的屬性__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:
直譯過來就是內部神秘屬性,不要亂用!否則你會被炒魷魚。
為什麼會有個這麼唬人的屬性?今天我們來聊聊。
問答推薦
- 關於 React-redux 與後臺互動的問題?
- reactnative 檔案怎麼上傳?
- React 的 import 動態引入元件生命週期紊亂?
- 新手問個 mobx-react 問題?
- React.StrictMode 在開發環境下,useEffect 會自動執行 return?
- 怎麼理解 React 的 state 狀態不可變?
- 在 React 中 使用 useEffect 報錯,怎麼解決?
- React.Context 和 redux 快取的資料無法跨瀏覽器 Tab 共享,怎麼解決?
- React hook 多次 setstate 被合併怎麼處理?
課程推薦
課程特色:
- 基於最新原始碼,本課程基於最新 React17.0.0-alpha 設計,全網稀缺。React17 釋出的 Concurrent Mode 是React 前幾年的努力方向,也是未來幾年的發展方向。市面上目前還沒有 React17 原始碼級別的課程。
- 輔助資料完備,課程配備了配套電子書《React技術揭秘》、豐富的線上Demo、實戰練習。
- “自頂向下”的授課方式,符合人類認知的過程。如果說別的原始碼分析課程是“高階”難度,那麼本課程只有“中級”難度。原因在於課程使用“自頂向下”的授課方式,更符合人類認知的過程。
PS:大家想看哪些方面的技術內容,可以在評論區留言喔 ~
如有問題可以新增小姐姐微信~