tag react

標籤
貢獻253
431
05:50 PM · Oct 25 ,2025
tuzixiansen_63d4d65909d62 頭像 sysu_xuejia 頭像 refanbanzhang 頭像 data_ai 頭像 changlina 頭像 ruochuan12 頭像 zzd41 頭像 tosmile 頭像 jackysummer 頭像 icecreamlj 頭像 yayu 頭像 assassin 頭像

@react / 博客 RSS 訂閱

juanerma 頭像

卷兒麻 - 如何採用React Context & Hooks 去做全局狀態管理？

在業務或者UI交互稍微複雜一些的項目裏，都離不開狀態管理的問題。不管是從後台API請求的數據還是頁面的UI狀態，都需要有一個"Store"幫我們去做狀態管理。通常在項目中，我們會引入 Redux 去負責這樣的職責。但是 Redux 要維護大量的模板代碼，加上 Redux 通過 connect 這種高階組件的方式注入 state 和 dispatch 的方式並不直觀，增加了理解的複雜度。React從

react , 狀態管理 , react-hooks , redux , frontend

收藏 評論

tosmile 頭像

浪遏飛舟 - single-spa-react搭建微前端單實例應用

單實例微前端設計思想 拿到子應用構建後的資源清單，一般項目中都會生成一個asset-manifest.json文件，用來記錄各個子應用的入口資源url信息，以便在切換不同子應用時使用模塊加載器去遠程加載。因為每次子應用更新後入口資源的hash通常會變化，所以需要服務端定時去更新該配置表，以便框架能及時加載子應用最新的資源； 同樣，子應用之間的一些公共依賴通過配置文件記錄； 主應用監聽路由

react , micro , single-page-application , 微前端 , spa

收藏 評論

fantasticlbp 頭像

杭城小劉 - 一個 Hybrid SDK 設計與實現

隨着移動浪潮的興起，各種 App 層出不窮，極速發展的業務拓展提升了團隊對開發效率的要求，這個時候純粹使用 Native 開發技術成本難免會更高一點。而 H5 的低成本、高效率、跨平台等特性馬上被利用起來了，形成一種新的開發模式： Hybrid App 作為一種混合開發的模式，Hybrid App 底層依賴於 Native 提供的容器（Webview），上層使用各種前端技術完成業務開發（現在三足鼎

react , hybrid-app , webview , 多端開發 , 前端設計

收藏 評論

invalidnull 頭像

註銷 - 使用瀏覽器的 Local Storage 真的安全嗎？

LocalStorage 是一個 HTML5 網絡存儲對象，用於將數據存儲在客户端——即本地，在用户的計算機上。 本地存儲的數據沒有到期日期，並且會一直存在，直到被刪除。 （相比之下，會話存儲是另一個 HTML5 網絡存儲 API，它會在瀏覽器關閉時刪除存儲的數據。） 本地存儲是純 JavaScript。 同樣，雖然它仍然在用户的設備上生成純文本文檔，但本地存儲也允許存儲多達 5MB 的數據（與

react , vue.js , localstorage , 前端 , Javascript

收藏 評論

viewweiwu 頭像

viewweiwu - Ant Design 二次封裝 Amiya 發佈啦～🎉🎉🎉

什麼是 amiya amiya 是一個組件庫，是對Ant Design的二次封裝，提供頁面級別的組件。 文檔地址 它有什麼特點？ 表單只讀模式 默認的 antd 只對少數組件支持 readonly 模式，而 disabled 模式會把 placeholder 顯示出來，且有可能展示不完整。 所以 amiya 為每一種表單類型，提供 readonly 模式，去除默認的圖標符號，變更背景顏色於文字顏色

react , ant-design , component , 前端

收藏 評論

viewweiwu 頭像

viewweiwu - 100 左右實現查詢表格？真的假的？一起來體驗一下 Amiya 的魅力。

“老哥，聽説你寫的頁面挺多的，我這兒有一個頁面，你覺得你需要多少代碼？” “我看看，也還行吧，不就是個查詢表格嘛，現在大家都用 ProComponent 了，用那個寫一下很快的。我想想，差不多 200 行左右就可以了吧。” “那個呀，我知道，官方的二次封裝組件庫，200 行就可以了嗎？嗯，可以。等等，你説的代碼是否包含了操作按鈕？” “操作按鈕？是指你圖上的 【新增】【詳情】這些按鈕嗎？” “是

react , 二次開發 , ant-design , component , 前端

收藏 評論

lewyon 頭像

程序猿布歐 - 前端（react）上傳到阿里雲OSS存儲 實例

需求背景 由於現有的後台管理系統，上傳的視頻越來越大，加上上傳視頻較慢，後端小哥提出直接從前端上傳視頻或者其他文件到阿里雲OSS存儲。 阿里雲OSS 阿里雲OSS文檔介紹，這裏不做過多贅述 安裝 原本在最開始的時候，是使用node版本的SDK，最開始使用的[nodejs版本] 代碼如下 async function put() { try { let result

react , 阿里雲oss , ecmascript , 前端 , Javascript

收藏 評論

fisher_feng 頭像

馮諾依曼的馮 - TypeScript基本類型有哪些

ts編譯成js的工具 npm install -g typescript 使用命令： tsc example.ts 只執行ts代碼，但不編譯的工具 1、nodemon , 只要保存代碼就會執行,比較推薦 安裝：``` npm intall -g nodemon ``` 使用： ``` nodemon example.ts ``` 2、ts-node ,每次需要執行ts-node命令 安裝

angularjs , react , vue.js , typescript , 前端

收藏 評論

xiangjiaochihuanggua 頭像

香蕉吃黃瓜 - 理解為什麼要給useEffect聲明依賴

在使用useEffect、useCallback這些hooks，為什麼還要寫依賴數組呢，不寫這些依賴，React還給你警告。 下面我就來分享一下自己的理解 聲明依賴的目的：防止函數的閉包特性產生意外的錯誤 前言 在b站看到一個up用JS實現紅綠燈，我就試着自己也寫一個。 目的是想要它每個1秒跳轉到下一個燈。 紅 = 綠 = 黃 = 紅 = 綠 = 黃 這樣的順序 代碼 但是

react , 閉包 , 前端

收藏 評論

jiangchuan_5ecf6be720834 頭像

蔣川 - 7 款最棒的 React 移動端 UI 組件庫 - 特別針對國內使用場景推薦

本文完整版：《7 款最棒的 React 移動端 UI 組件庫 - 特別針對國內使用場景推薦》 優秀的 React UI 移動端組件庫和模版框架，幫我們節省開發時間，提高開發效率，統一設計語言。更棒的是內置的功能複雜，我們自己很難處理的常用組件，比如表格、表單、富文本編輯器、時間日期選擇器、實時拖拽組件等，再進一步，還有幫我們把組件的輪子裝好的 React admin 後台管理系統。本文推薦 7 款

react , 前端框架 , 組件庫 , 移動端web , 前端

收藏 評論

justbecoder 頭像

胡哥有話説 - react-router-middleware-plus開源啦 | 基於react-router v6的零成本式路由權限解決方案

一、你的苦惱~~ 你還在為react-router的路由權限控制而煩惱嗎？ 你還在翻遍了社區react路由權限相關文章發現都是V4、V5版本的而煩惱嗎？ 你還在為自行適配react-router v6版本的權限步驟繁雜，多重鑑權邏輯嵌套而煩惱嗎？ 他來了！他來了！他帶着禮物走來了！react-router-middleware-plus專為解決你的煩惱而生！ 二、react-router-midd

react , 權限 , react-router , typescript , react-router-dom

收藏 評論

jsoncode 頭像

jsoncode - 在react中基於ant-design，封裝一箇中文輸入框,提高onchange性能

1 antd中，input組件在觸發onChange時，如果是中文輸入模式，會頻繁被觸發，導致頁面性能降低。尤其是在onChange時需要實時搜索的情況。 2 在mac設備下，如果在onChange中使用value.replace(/\s/g,''/), 會出現無法輸入中文的問題。優化之後，可以正常輸入。 默認情況下的Input組件： 優化之後的ChineseInput 調用方式：

input , react , antd , component

收藏 評論

crow_5c1708a9c847d 頭像

龍騎士尹道長 - 一個關於React數據不可變的無聊問題

對於一個React的開發者來説不知道你有沒有想過為什麼React追求數據不可變這個範式； 一個月前我想過一個問題如果我在使用useState這個hooks的時候傳入的是一個改變後的引用類型對象會發生什麼？ 例如： import {useState} from "react" function App() { const [list,setList] = useState([0,1,2])

react , 源碼學習 , 源碼分析 , Javascript

收藏 評論

liushuigs 頭像

jinling - 用Node.js, React和Socket.io創建一個看板應用

本文為譯文，原文地址為： Building a Kanban board with Node.js, React and Websockets 關於 在這篇文章中，你可以學習如何構建一個看板應用，類似在JIRA, MonDay或者Trello等應用中看到那樣。這個應用，將包含一個漂亮的drag-and-drop功能，使用的技術是React, Socket.io和DND（拖拽）技術。用户可以登錄、創

socket.io , express , react , node.js

收藏 評論

kk_470661 頭像

lakb248 - ReactQuery系列文章- 1. React Query 實踐

當2018年GraphQL特別是Apolllo Client開始流行之後，很多人開始認為它將替代Redux，關於Redux是否已經落伍的問題經常被問到。 我很清晰地記得我當時對這些觀點的不理解。為什麼一些數據請求的庫會替代全局狀態管理庫呢？這兩者有什麼關聯呢？ 曾經我認為像Apollo這樣的Graphql客户端只能用來請求數據，就像axios一樣，你仍然需要一些方式來讓請求的數據可以被

react , frontend

收藏 評論

fsjohnhuang 頭像

肥仔John - React魔法堂：size-sensor源碼略讀

前言 echarts-for-react在對echarts進行輕量級封裝的基礎上，額外提供圖表尺寸自適應容器尺寸的這小而實用的功能，而這功能的背後就是本文想介紹的size-sensor了。 源碼介紹 size-sensor源碼十分精簡，主要是對原生APIResizeObserver方案和object元素方案進行檢測和API統一化而已。 代碼首先會檢測當前運行時是否支持原生APIResizeObse

react , 源碼學習 , echarts , Javascript

收藏 評論

zhipanyun 頭像

小盼田 - React 如何區分 Class 和 Function？

當我們要渲染一個組件時，通常並不需要關心它是如何定義（是Class還是Function）： function Greeting() { return pHello/p; } class Greeting extends React.Component { render() { return pHello/p; } 使用 // 是類還是函數 —— 無所謂 Greeting /

react , prototype , component , class

收藏 評論

kasong 頭像

卡頌 - 對於“前端狀態”相關問題，如何思考比較全面

大家好，我卡頌。 最近看到個寫得很不錯的知乎回答Hooks是否過譽了？前端應該跟着React走還是跟着JS、TS走？- beeplin的回答。 在這個回答的基礎上，我想引申出一個問題 —— 對於前端狀態相關問題，如何思考比較全面？ 今天，我們試着從多個抽象層級的角度回答這個問題。 歡迎加入人類高質量前端框架羣，帶飛 問題的起源 有相當比例的前端從業者入行是從學習前端框架的使用開始的。換言之，在他們

react , vue.js , mobx , redux , 前端

收藏 評論

zzd41 頭像

superZidan - 使用 Socket.io 和 React 開發一個聊天應用

這篇文章是關於什麼的 相信大家對於 web 版的線上聊天室都不陌生，這篇文章主要講的就是如何使用 Socket.io 和 React 開發一下簡單的線上聊天應用。 所謂線上聊天應用，就是你給一個人或者一個羣發送一條消息，他們可以看到這條消息並且可以回覆。既簡單又複雜。 開發一個聊天室應用，你需要在新信息來到的時候及時的感知到。 通常來説，為了獲得服務端的信息，我們需要發送一個 HTTP 請求。但是

socket.io , react , node.js , Css , Javascript

收藏 評論

magnesium_5a22722d4b625 頭像

進二開物 - 淺談 Javascript 閉包

微信公眾號搜索並關注：進二開物， 更多技術週刊，React 技術棧、JavaScript/TypeScript/Rust 等等編程語言慢慢等你發現... 什麼是閉包？ 閉包的概念是有很多版本，不同的地方對閉包的説法不一 維基百科：在計算機科學中，閉包（英語：Closure），又稱詞法閉包（Lexical Closure）或函數閉包（function closures），是在支持頭等函數的

react , 閉包 , react-hooks , Javascript

收藏 評論

zhedan_sam_wan9 頭像

折丹 - React狀態管理庫現狀

狀態管理的產生 為什麼需要狀態管理 狀態管理伴隨着現代前端框架的崛起而誕生，在經典的單頁應用中，組件內部狀態隨着組件的掛載而產生，銷燬而銷燬，全局狀態則隨着應用掛載而一直存在，這時候，全局狀態的共享，傳遞，變更就被抽離出來成了一個通用的解決方案。 Vue與React都有較為簡單的全局狀態管理策略（Store模式，Context），但是當應用足夠複雜，全局狀態較多的時候，還是需要第

react , mobx , redux

收藏 評論

qifengliao_5e7f5b20ee3bd 頭像

起風了 - React.PureComponent深入瞭解機制及其原理

起因 用React.PureComponent時，更新state裏面的count用的方式是++this.state.count，但是意外的導致組件沒有重新render（本人用Hook組件較多，所以感到很疑惑） import React from 'react'; import { Button } from 'antd-mobile'; class DemoChildClass extends

react , setstate , component

收藏 評論

qifengliao_5e7f5b20ee3bd 頭像

起風了 - React setState、useState同步？異步？

React setState、useState到底是同步的，還是異步的？ setState語法 用法1： this.setState({ // 數據更新 }) 用法2： this.setState((state, props) = { // 當前組件的state // 父級的state }, () = { // 數據更新之後 }) useState語法 用法1： const [n

react , 同步 , 異步 , 前端

收藏 評論

wubomu 頭像

烏柏木 - 再見了 Redux、Recoil、MobX、Zustand、Jotai 還有 Valtio，狀態管理還可以這樣做？

堅持在一線寫前端代碼大概有七八年了，寫過一些項目，有過一些反思，越來越確信平日裏一直用得心安理得某些的東西也許存在着問題，比如：在 狀態管理 上一直比較流行的實踐 🙏，所以試着分享出來探討一下。 為什麼要告別 Redux、Recoil、MobX、Zustand、Jotai 還有 Valtio 今天流行的狀態管理庫有很多，尤其在 React 中。為了把問題説得清晰一些，我想以 React 中的幾個

react , 狀態管理 , redux , 前端 , Javascript

收藏 評論