【UMI】路由懶加載-編程思維

原生的路由加載是在打包的時候,将所有的組件都打包到一個文件中,然後在首次進入頁面的時候就會加載這個包,相當于全量包.接着在你點擊路由時去查找相關組件.網絡壓力全在首屏加載的時候. 路由懶加載:分包,分請求.先分不同的包,然後根據路由從後端請求.加載壓力分到每一次路由請求.   在umi中使用路由懶加載 1.動态路由 import { dynamic } from 'umi' const U

react 前端導出Excel-編程思維

1.首先下載 js-export-excel    npm install js-export-excel; 2.下載 xlsx    npm install xlsx; 3.引入    import * as XLSX from 'xlsx'    import ExportJsonExcel from 'js-export-excel'   4.定義方法        downloadFi

[Reac] React 18-編程思維

Replace Legacy Root API with New Root API ReactDOM.createRoot(document.getElementById("root")).render(<App />);   Use React 18's New Root API Alongside the Legacy Root API Behavior of each ty

React頁面跳轉傳參-編程思維

來自 https://www.jianshu.com/p/02c1cf54a5df 侵删 this.props.location.query: 1)路由注冊 <Route path=' /target ' component={TargetPage}></Route> 2)發起跳轉頁面 html方式: <Link to={{ path : ' /target

虛拟DOM-編程思維

對于虛拟DOM我覺得要按以下順序去理解:    1.原生js對DOM元素更新的機制    2.原生js更新DOM元素有什麼缺陷    3.怎麼去優化更新DOM的方式    4.什麼是虛拟DOM    5.虛拟DOM是怎麼實現DOM更新的     原生js對DOM元素的更新機制 假如我需要改多個dom元素的内容,寫下如下js代碼 <body> <div id='a' &

hooks中,useEffect無限調用問題産生的原因-編程思維

前言:我在我的另一篇博客中有說道useEffect監聽對象或者數組時會導緻useEffect無限執行,并給予了解決方案-useEffect無限調用問題 .後來我想從其産生根源去理解并解決這個問題.   原因: 錯誤代碼 const [test, setTest] = useState({ name: '小明', age: '18' }); const init = () => {

React 中的不可變數據 — Immer-編程思維

Immer 是什麼? Immer 是一個不可變數據的 Javascript 庫,讓你更方便的處理不可變數據。 什麼是不可變數據? 不可變數據概念來源于函數式編程。函數式編程中,對已初始化的“變量”是不可以更改的,每次更改都要創建一個新的“變量”。 Javascript 在語言層沒有實現不可變數據,需要借助第三方庫來實現。Immer 就是其中一種實現(類似的還有 immutable.js)。 為什

React + MobX 狀态管理入門及實例(一)-編程思維

第二章 React + MobX 狀态管理入門及實例(二) 前言 現在最熱門的前端框架,毫無疑問是React。 React是一個狀态機,由開始的初始狀态,通過與用戶的互動,導緻狀态變化,從而重新渲染UI。 對于小型應用,引入狀态管理庫是"奢侈的"。 但對于複雜的中大型應用,引入狀态管理庫是"必要的"。 現在熱門的狀态管理解決方案Redux,MobX相繼進入開發者的視野。 Redux、MobX

antd 組件 RangePicker 擴展,支持預選範圍回填選中-編程思維

最近在做和時間段範圍相關的,預設常用的日期範圍可以提高用戶體驗。可以說 antd 的組件是很不錯的,但是美中不足的是,不支持預設範圍回填選中,怎麼辦? 在此基礎上封裝一下好了。 先來看下效果圖: 未選中: 選中回填: 看了下渲染出來的 html 内容,用的是 Tag 實現的。那我也這麼實現好了。 主要是利用 RangePicker 的 renderExtraFooter 進行處理。如果回填值

react: react-router-dom-編程思維

【相關文檔】:印記中文-react-router-dom文檔 1. 簡介 react-router-dom是react的一個的路由插件庫, 專門用來實現一個SPA應用(Simple Page Application),即單頁面應用,在單頁面應用中,點擊導航組件跳轉時浏覽器的頁面不會刷新(地址欄左邊的刷新按鈕不會刷新) 該插件一共有三個版本 web: 專門用于web應用的的路由管理 native:

react18 來了,我 get 到...-編程思維

大家好! 本文主要是關于即将發布的 react 18 的新特性。那麼 react18 帶來了什麼呢? 詳情可以關注 github React 18 工作組倉庫 1. automatic batching:自動批處理。 batching 批處理,說的是,可以将回調函數中多個 setState 事件合并為一次渲染,因此是異步的。 解決的問題是多次同值、不同值 setState, 期望最後顯示的是

React 現代化測試-編程思維

測試的動機 測試用例的書寫是一個風險驅動的行為, 每當收到 Bug 報告時, 先寫一個單元測試來暴露這個 Bug, 在日後的代碼提交中, 若該測試用例是通過的, 開發者就能更為自信地确保程序不會再次出現此 bug。 測試的動機是有效地提高開發者的自信心。 前端現代化測試模型 前端測試中有兩種模型, 金字塔模型與獎杯模型。 金字塔模型摘自 Martin Fowler's blog, 模型示意

組件設計 —— 重新認識受控與非受控組件-編程思維

重新定義受控與非受控組件的邊界 React 官網中對非受控組件與受控組件作了如圖中下劃線的邊界定義。一經推敲, 該定義是缺乏了些完整性和嚴謹性的, 比如針對非表單組件(彈框、輪播圖)如何劃分受控與非受控的邊界? 又比如非受控組件是否真的如文案上所說的數據的展示與變更都由 dom 自身接管呢? 在非受控組件中, 通常業務調用方隻需傳入一個初始默認值便可使用該組件。以 Input 組件為例:

SEO 在 SPA 站點中的實踐-編程思維

背景 觀察基于 create-react-doc 搭建的文檔站點, 發現網頁代碼光秃秃的一片(見下圖)。這顯然是單頁應用 (SPA) 站點的通病 —— 不利于文檔被搜索引擎搜索 (SEO)。 難道 SPA 站點就無法進行 SEO 了麼, 那麼 Gatsby、nuxt 等框架又為何能作為不少博主搭建博客的首選方案呢, 此類框架賦能 SEO 的技術原理是什麼呢? 在好奇心的驅動下, 筆者嘗試對

使用React全家桶搭建一個後台管理系統-編程思維

引子 學生時代為了掌握某個知識點會不斷地做習題,做總結,步入崗位之後何嘗不是一樣呢?做業務就如同做習題,如果‘課後’適當地進行總結,必然更快地提升自己的水平。 由于公司采用的react+node的技術棧,于是就完成了一個reactSPA小項目,計劃日後把平時工作中遇到的業務以及學習中遇到有趣的東西給抽象成demo展示出來。目前該項目隻是把雛形搭好,效果如下。在此文的基礎上,寫了篇新文章使用Rea