堅持在一線寫前端代碼大概有七八年了，寫過一些項目，有過一些反思，越來越確信平日裏一直用得心安理得某些的東西也許存在着問題，比如：在 狀態管理 上一直比較流行的實踐 🙏，所以試着分享出來探討一下。 為什麼要告別 Redux、Recoil、MobX、Zustand、Jotai 還有 Valtio 今天流行的狀態管理庫有很多，尤其在 React 中。為了把問題説得清晰一些，我想以 React 中的幾個
昵稱 烏柏木
zustand-pub 只要從事前端開發，不論是小程序還是web，都繞不開狀態管理。\ 眾所周知， zustand 是一套輕量、便捷、可拓展的狀態管理方案，不論國內 or 國外，都備受喜愛，star 數已接近 3W。 而 zustand-pub 則基於zustand為Iframe、微前端、Module Fedetation、模塊化、組件化等業務場景，提供跨應用、跨框架的狀態管理及狀態共享能力
昵稱 daivon
原文鏈接 這是一次突發奇想的感悟，感覺還挺神奇的，遂記錄一下。 前言 作為一個React的開發者已經蠻久的了，大大小小的應用也開發了不少，除了一開始學習React時用過Redux以外，後來基本都不碰了，不管多麼複雜的應用，我也簡單的覺得使用Context就能夠解決我所有的問題。説來慚愧，我基本沒有思考過Redux存在的原因，可能是React真的做的太好了，又或者是我們現在的設備性能已經嚴重
昵稱 青湛
Redux類適用所有React生態項目 import { applyMiddleware, combineReducers, legacy_createStore as createStore, Store, compose, } from "redux"; import thunk from "redux-thunk"; import {connect,
昵稱 perkz
嗨，大家好！歡迎來到C-Shopping，這是一場揭開科技面紗的電商之旅。我是C-Shopping開源作者“繼小鵬”，今天將為你介紹一款基於最新技術的開源電商平台。讓我們一同探索吧！ 在線體驗：http://shop.huanghanlian.com/ 項目傳送門：https://github.com/huanghanzhilian/c-shopping 如果你覺得有幫助，請給我一個Star，這
昵稱 繼小鵬
RxJS 在現在的前端用比較少，但是 RxJS 作為響應式和函數式編程的集大成者，似乎被前端開發者遺忘，可能是學習難度大，可能是有更加方便的解決方案。 不是因為 Redux 更具有性價比，而是 RxJS 可以打開更大的 JS 生態空間 下面我們先回顧一下 Redux 是如何運作開始。 一、Redux 創建一個 Store 做了哪些事情？ 以上是一個簡單的 Redux 的工作流。從 redu
昵稱 進二開物
前言 自從next.js14發佈之後，app router變成了官網主推的架構區別於pages router的傳統架構，app router更適合最新的react，於是自己動手把next-auth、redux-toolkit、ant-design、tailwindcss也一同集成進來，分享給大家，如果有錯誤之處歡迎大家指正。 操作 1、創建項目 使用下面命令創建項目，並且選擇tailwind cs
昵稱 Awbeci
redux教程2024 1.安裝redux yarn add redux /npm i redux 2.創建目錄 action/reducer/store 3.編寫action const sendAction=()={ return { type:'send_type', value:'i am action' } } module.exports
昵稱 阿芯愛編程
Redux Toolkit 是官方推薦用來簡化Redux開發的工具集。它包含了一些預設的最佳實踐，使得創建和管理Redux狀態變得更簡單。 1. 創建Store 使用configureStore函數來創建Redux store，它會自動配置中間件，如redux-thunk用於處理異步操作。 import { configureStore } from '@reduxjs/toolkit';
昵稱 天涯學館
引入和定義 首先，你需要創建Store實例並暴露出來： // stores/login.store.js const loginInstance = (preState, action) = { switch (action.type) { // 修改狀態 case "changeLoginState": preState.isLo
昵稱 zxl20070701
全局狀態 全局狀態是一個很實用的功能，例如管理用户信息，組件間狀態共享等功能都需要用到全局狀態，react有很多成熟的全局狀態管理工具，但是很多寫起來太過麻煩，duxapp提供了幾種應對不同場景的全局狀態的方案，當然如果你需要其他全局狀態，可以自行集成 局部全局狀態 這種全局狀態方案的使用場景，在於父子組件之間的狀態共享 import { contextState } from '@/duxapp
昵稱 ShaoGongBra
引言 在主流的前端開發框架中，無論是React、Vue還是Svelte，核心都是圍繞着更高效地進行UI渲染展開的。 為了實現高性能，基於DOM總是比較慢這個假設前提，其最核心的要解決的問題有兩個： 響應式更新 細粒度更新 為了將響應式更新、細粒度更新優化到極致，各種框架是八仙過海，各顯神通。以最流行的React和Vue為例， 首先兩者均引入了Virtual DOM的概念。 Vue的靜
昵稱 zhangfisher
我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霜序 前言 為何講這個內容？以為後續大家會使用 redux-toolkit，資產上週做了 redux-toolkit 的升級順便了解了相關內容，產出了這篇文章。 另外補齊一下在 React 數據流這個知識板塊的完整性。 React 中的數據流管理
昵稱 袋鼠雲數棧UED
一、什麼是Canvas 想必學習前端的同學們對Canvas 都不陌生，它是 HTML5 新增的“畫布”元素，可以使用JavaScript來繪製圖形。 Canvas元素是在HTML5中新增的標籤用於在網頁實時生成圖像，並且可以操作圖像內容，基本上它是一個可以用JavaScript操作的位圖（bitmap）。Canvas 由一個可繪製區域HTML代碼中的屬性定義決定高度和寬度。JavaScript代碼
昵稱 葡萄城技術團隊
前言 我們的圖像標註系統中，標註的時候，每人需要一個容器（docker），需要把數據推到去LabelStudio裏面去標註，利用webhook回推標註好的數據。 Canvas的使用，當選中某個矩形框的時候，會變成藍色。 畫布大小 設置的是，圖片有多大，畫布就有多大,然後以畫布的中心點對齊。默認是左上角對齊 this.ctx.drawImage(this.image, -this.image
昵稱 zZ_jie
背景 之前瀏覽過草料二維碼的網站，他的二維碼美化功能很強大，可以分別自定義碼眼和碼點的形狀和顏色，功能十分強大 💪！ 碰巧之前寫過一個 npm 插件 qrcode-with-logos, 用於前端生成帶 logo 的二維碼。 而且在 github 的 issues 裏有外國友人 👨🦱 問我能否實現不同樣式的二維碼，剛好以此作為新需求，模仿草料二維碼的樣式和功能，開發了 qrcode-wit
昵稱 suporka
餅圖直接用echarts，但下面的只能自己實現了。 !DOCTYPE html html lang="zh-cn" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titlecanvasLine/title /head style
昵稱 smallStone
海報分享功能在許多應用中應該是很常見的，因為它作為一種常用的應用推廣和拉新的方式。 接下來看個實際的案例，如下： 把任務拆解下： 如何繪製海報 如何把繪製後的海報保存到相冊 繪製海報 用 canvas 來繪製海報。 這裏需要了解基本的 canvas api，不熟悉可以先去了解下相關 Canvas API 定義 canvas 元素 template view class="
@renzhongdaoyuan_59170ca258c53
昵稱 零一行者
本代碼片段使用插件《qs-canvas》，支持 Node、web、uni-app 的canvas繪圖工具。 效果圖 安裝npm包 npm install qs-canvas -S 代碼片段 // index.vue template view canvas :id="poster.canvasId" :canvas-id="poster.canvasId
昵稱 Max迪丶先生
最新技術資源（建議收藏） https://www.grapecity.com.cn/resources/ 前言 相信大家在職場中經常會用到流程圖，在互聯網行業，繪製流程圖不論在產品的設計階段，還是後期優化業務流程的階段，都有着巨大的價值。事實上，不僅是互聯網行業，流程圖其實廣泛應用於各行各業。 比如説，銀行在辦理開户業務時，會有一套較為複雜的流程，中間不僅有固定的步驟，如審核材料、打印
昵稱 葡萄城技術團隊
效果 首先了解一下flickable flickable在確定高度寬度後，使用contentWidth,contentHeight綁定內容大小，當內容大小大於flickable大小時，flickable會自動提供滾動條以便鼠標拖動查看。 所以打開一個圖片後要先調整適合flickable，前提是保持比例，不然根據圖片的比例縮放. 假設flickable是一個正方形，如果圖片長寬比為1:2等，
昵稱 SKcakor
什麼是live2D技術？可以用來做什麼？ 請點擊看效果：http://ashuai.work:8890/#/16 簡而言之： 可以用來創建虛擬角色、數字人的技術 達到類似於動漫、插畫、遊戲中的人物效果 可動作交互、語音發聲 可以用到的平台很多，比如Web、Native、Unity、遊戲引擎、JAVA等平台 就前端而言，3D項目使用threejs，2D項目使用pixijs 所以，pix
昵稱 水冗水孚
鴻蒙元服務實戰-笑笑五子棋（2） 章節導讀 本章節主要講解如何創建元服務和使用 canvas 描繪圖形 目標 上一章最後講到了 笑笑五子棋 主要的技術棧如下： ArkTS API 12 Canvas 元服務獨有的 AtomicServiceTabs 卡片開發 元服務的創建 元服務的上架 那麼本章節就開始實現這個案例。 AGC 平台上創建元服務 需要先在AGC平台上項目，然後再新建
昵稱 萬少
鴻蒙元服務實戰-笑笑五子棋（3） 接上篇。上一篇主要講解了元服務的創建和 canvas 的一些基本使用，直線、矩形、弧形、文本、圖像等。canvas 本身還有很多其他 的功能。這裏繼續圍繞 canvas 進行講解。 createPattern createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern |
昵稱 萬少