React 是一個免費的開放原始碼前端 JavaScript 工具庫， 用於基於 UI 元件構建使用者介面。 它由 Meta 和一個由個人開發者和公司組成的社群維護。 React 可用作開發具有 Next.js 等框架的單頁、手機或伺服器渲染應用程式的基礎。
知識理念
2022年3月29號，React18正式版釋出。從v16開始，React團隊就在普及併發的概念。在v18的迭代過程中（alpha、Beta、RC），也一直在科普併發特性，所以正式版釋出時，已經沒有什麼新鮮特性。
本文主要講解v18釋出日誌中透露的一些未來發展趨勢。
沒事翻了翻 React Router 的文件，發現已推到了 v6.2.2 版本，這個版本做了很大的改動，讓我們一起看看吧。
《React 原始碼解析系列 - React 的 render 異常處理機制》
異常是如何產生的；
如何捕獲 render 異常；
React 原始碼中具體是如何捕獲 render 異常的；
處理異常。
我們知道，Hooks使用時存在所謂的閉包陷阱， 加大了Hooks的上手門檻，也讓開發者更容易寫出有bug的程式碼。
現在，React官方團隊要出手解決這個問題。
《一些關於 react 的 keep-alive 功能相關知識在這裡(上)》
這是在2022年開發中PM提的一個需求, 某個table被使用者輸入了一些搜搜條件並且瀏覽到了第3頁, 那如果我跳轉到其他路由後返回當前頁面, 希望搜尋條件還在, 並且仍處於第三頁, 這不就是vue裡面的keep-alive標籤嗎, 但我當前的專案是用react編寫的。
此次講述了我經歷了 "使用外部外掛"-> "放棄外部外掛"-> "學習並自研外掛"-> "理解了相關外掛的困境" -> "期待react18的Offscreen", 所以結論是推薦耐心等待react18的自支援, 但是學習當前類似外掛的原理對自己還是很有啟發的。
[《一些關於 react 的 keep-alive 功能相關知識在這裡(下)》
](https://segmentfault.com/a/11...)
本篇承接上篇《一些關於 react 的 keep-alive 功能相關知識在這裡(上)》, 從第九點開始。
比如頁面上的table裡有100條資料, 我們想看第100條資料, 那就要滾動不少距離, 不少場景這種滾動距離也是有必要保留的。
這裡使用的方法其實比較傳統啦, 首先在KeepAliveProvider 下發一個處理滾動的方法:
React 是一個檢視層框架，其核心思想是 UI = f(state)，即「UI 是 state 的投影」，state 自上而下流動，整個 React 元件樹由 state 驅動。當一個 React 應用程式足夠複雜，元件巢狀足夠深時，元件樹中的狀態流動會變得難以控制（例如你如何跟蹤父節點的 state 流動到葉子節點時產生的變化）。這時我們就需要對 state 進行管理，在進行狀態管理的同時，還需要分清 React 應用中有哪些狀態型別，方便制定出最適合的狀態管理方案。
應用與實踐
作為前端，想必你對防抖（debounce）、節流（throttle）這兩個概念不陌生。在React18中，基於新的併發特性，React原生實現了防抖的功能。
今天我們來聊聊這是如何實現的。
《如何在 React 中優雅的使用 Interval（輪詢）》
在前端開發中，經常會使用輪詢（setInterval），比如後端非同步資料處理，需要定時查詢最新狀態。但是在用React Hook進行輪詢操作時，可能會發現setInterval沒有那麼輕鬆駕馭，今天筆者就來談談在專案開發中是如何解決setInterval呼叫問題的，以及如何更加優雅的使用setInterval。
在 React Native 開發中，如果要實現彈窗效果，通常的方案是使用官方的 Modal 元件。不過，官方的 Modal 元件會有一些缺陷，比如在 Android 端無法全屏顯示，而在iOS端中，當開啟一個新的ViewController 時會被Modal 元件給覆蓋掉等。因此，在 React Native 應用開發中，為了遮蔽這些相容性問題，我們可以使用 react-native-root-siblings 外掛提供的 RootSiblings 元件來實現。
在前端開發中，通過監聽 onInput 事件來觸發輸入框內容的更新，是沒有問題的，但如果輸入的內容有中文的時候，會出現類似 zhong'wen'nei'rong這樣的備選內容。
這種內容的影響普遍不會很大，但是當需要對輸入的內容進行一些耗時的操作的時候，這個影響就不得不考慮一下了，比如說內容需要進行復雜的渲染、通過網路實時傳送等等場景。
對這種問題的解決方案，需要藉助瀏覽器提供的組合輸入事件 。
想必大家都知道React有一套基於Fiber架構的排程系統。
這套排程系統的基本功能包括：· 更新有不同優先順序
· 一次更新可能涉及多個元件的render，這些render可能分配到多個巨集任務中執行（即時間切片）
· 高優先順序更新會打斷進行中的低優先順序更新本文會用100行程式碼實現這套排程系統，讓你快速瞭解React的排程原理。
凡是依賴虛擬DOM的框架，都需要比較前後節點變化的Diff演算法。
網上有大量講解Diff演算法邏輯的文章。然而，即使作者語言再精練，再圖文並茂，相信大部分同學看完用不了多久就忘了。今天，我們換一種一勞永逸的學習方法 —— 實現React的核心Diff演算法。
不難，只有40行程式碼。不信？往下看。
為了將之前業務開發的元件進行統一維護以及便於後續在其他專案複用，以此為目的而搭建元件庫。由於之前開發的專案是基於 React 實現，經過調研，決定選用較為普遍使用的 Dumi 作為元件庫文件工具，Father 作為元件庫打包工具。
自從 React Hooks 推行後，Redux 作為狀態管理方案就顯得格格不入了。Dan Abramov 很早就提到過 “You might not need Redux”，開發者必須要寫很多“模式程式碼”，繁瑣以及重複是開發者不願意容忍的。除了 actions/reducers/store 等概念對新手不夠友好之外，最大的缺點就是它對 typescript 型別支援太爛，在大型專案中這是不可接受的。
通過對 Redux 的優缺點總結來看，我們可以自己寫一個狀態管理庫，本次需要達到的目的：
- typescript 型別要完善
- 足夠簡單，概念要少
- 與 React Hooks 要搭配
對於函式元件是否需要再次渲染，可以根據 React.memo 與 React.useMemo 來優化。
在典型的 React 資料流中，props是父子元件互動的唯一方式。要修改一個子元件，需要使用新的 props 重新渲染它。但是，在某些情況下，需要在典型資料流之外主動檢視或強制修改子元件，這時候就需要使用 Refs，將 DOM Refs 暴露給父元件。
《direflow落地分享-以React方式寫WebComponents》
React大家都很熟悉，WebComponents估計也有所耳聞。那麼React+WebComponents會碰撞出怎樣的火花呢？
其實有這樣一個開源框架，支援React方式寫元件，最終打包後的產物為WebComponents。它就是direflow，這個框架支援React方式寫WebComponents。
熱門問答
- react的ts最佳實踐問題
- react useEffect中繫結的事件函式怎樣才能取到最新的state？
- 求問怎麼解決react hooks順序問題導致子元件十分臃腫的問題
- react條件渲染下state是否重置的問題
- react建構函式中這句怎麼理解
- React使用concurrent模式，渲染階段超出時間片，高優先順序任務插隊，上一個任務上fiber上的lanes會怎麼解決
- react route命名最佳實踐
- React啟動專案內容渲染出頁面，控制檯報錯
課程推薦
課程收穫：
學習React原始碼，不僅能掌握業界最頂尖前端框架的執行原理，探索前端邊界。也能讓自己成為業務線React大拿。
從v15～v16重構的Fiber架構，再到v16～v17新增的併發模式，React已經逐漸從UI庫變為小型的作業系統。
對於想學習React原始碼的同學來說，這同時是機遇與挑戰。
挑戰是：React內部執行流程真的很複雜。
機遇是：學完之後，除了擁有框架開發能力外，你的收穫將不限於：
- 程式設計正規化：函數語言程式設計的代數效應思想
- 作業系統：如何從零實現協程（fiber架構）
- 資料結構：連結串列、樹、小頂堆
- 演算法：O(n)的Diff演算法、掩碼
- 深入瀏覽器渲染原理
PS：大家想看哪些方面的技術內容，可以在評論區留言喔 ~
如有問題可以新增小姐姐微信~
