tag react

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

@react / 博客 RSS 訂閱

humi 頭像

heruns - React Hook 和 SCSS 結合的響應式佈局方案

背景 公司中有多個項目需要同時開發 PC 端和 H5 端，大部分地方邏輯和交互比較類似，主要是樣式上有些區別。為了更好地複用代碼、提高開發效率，經過一段時間的實踐後，我們總結出這套 React Hook 和 SCSS 結合、px 和 vw 共存的響應式佈局方案。 基礎代碼 創建項目 首先，我們來創建一個項目，這裏我用的是 Create React App，選擇了 typescript 模板，通過以

響應式佈局 , react , scss , Css , hook

收藏 評論

munergs 頭像

munergs - node作為後端的時候遇到的前端session無法保存的問題和解決辦法

2023-07-18 更新 前後端分離項目建議還是使用token，也就是後端使用jsonwebtoken即jwt進行token的生成和驗證，token不存在本地，存在客户端，隨請求頭一起帶來，安全性還是有保障 同時跨域問題建議還是後端進行解決，最好不要前端進行反向代理，容易出問題，由於我使用nodejs作為後端，解決跨域問題代碼如下: //安裝cors庫 npm i cors //app.js

express , react , node.js , mongodb , mongoose

收藏 評論

zzd41 頭像

superZidan - React 18 如何提升應用性能

hello 大家好，我是 superZidan，這篇文章想跟大家聊聊 React 18 如何提升應用性能 這個話題，如果大家遇到任何問題，歡迎 聯繫我 React 18 引入了併發功能，從根本上改變了 React 應用程序的渲染方式。 我們將探討這些最新功能如何影響和提高應用程序的性能 首先，讓我們退一步來了解長任務的基礎知識和相應的性能測量 主線程和長任務 當我們在瀏覽器運行 JavaScrip

性能優化 , react , chrome , dom , Javascript

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 為react項目添加開發/提交規範（eslint、prettier、husky、commitlint、stylelint）

因歷史遺留原因，接手的項目沒有代碼提醒/格式化，包括 eslint、pretttier，也沒有 commit 提交校驗，如 husky、commitlint、stylelint，與其期待自己或者同事的代碼寫得完美無缺，不如通過一些工具來進行規範和約束。 eslint eslint 是一個代碼校驗工具，用來規範項目代碼風格。 初始化 通過 npm install eslint 後使用 npx esl

husky , react , commitlint , 前端工程化 , prettier

收藏 評論

daishuyunshuzhanqianduan 頭像

袋鼠雲數棧UED - 一文了解 history 和 react-router 的實現原理

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霜序 前言 在前一篇文章中，我們詳細的説了 react-router@3.x 升級到 @6.x 需要注意的問題以及變更的使用方式。 react-router 版本更新非常快，但是它的底層實現原理確是萬變不離其中，在本文中會從前端路由出發到 react

react , react-router , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - React請求機制優化思路 | 京東雲技術團隊

説起數據加載的機制，有一個繞不開的話題就是前端性能，很多電商門户的首頁其實都會做一些垂直的定製優化，比如讓請求在頁面最早加載，或者在前一個頁面就進行預加載等等。隨着react18的發佈，請求機制這一塊也是被不斷談起，並且在後續其實也給出了明確的方向。 假如我們頁面中有三個組件C1、C2、C3依次嵌套，每個組件中有對應的請求F1、F2、F3，通常大多數人會使用useeffect和state變量來實現

性能優化 , react , 前端性能 , 前端 , Javascript

收藏 評論

zzd41 頭像

superZidan - 詳解 React 中的閉包問題

hello 大家好，我是 superZidan，這篇文章想跟大家聊聊 React 中的閉包 這個話題，如果大家遇到任何問題，歡迎 聯繫我 JavaScript 中的閉包一定是最可怕的特性之一。 即使是無所不知的 ChatGPT 也會告訴你這一點。 它也可能是最隱秘的語言概念之一。 每次編寫任何 React 代碼時，我們都會用到它，大多數時候我們甚至沒有意識到。 但最終還是無法擺脱它們：如果我們想編

react , hooks , 閉包 , Javascript

收藏 評論

qingzhan 頭像

青湛 - 再聊 Reducer Context 和 Redux

原文鏈接 這是一次突發奇想的感悟，感覺還挺神奇的，遂記錄一下。 前言 作為一個React的開發者已經蠻久的了，大大小小的應用也開發了不少，除了一開始學習React時用過Redux以外，後來基本都不碰了，不管多麼複雜的應用，我也簡單的覺得使用Context就能夠解決我所有的問題。説來慚愧，我基本沒有思考過Redux存在的原因，可能是React真的做的太好了，又或者是我們現在的設備性能已經嚴重

react , redux , context , 前端

收藏 評論

kanshouji 頭像

路邊縣 - 服務端渲染nextjs項目接入經驗總結

服務端渲染 nextjs@14 項目接入經驗總結，本文重點介紹基本知識點/常用的知識點/關鍵知識點 背景 為提高首屏渲染速度減少白屏時間提高用户體驗及豐富技術面，開始調研和接入nextjs框架 優勢 nextjs是一套成熟的同構框架（一套代碼能運行在服務端也能運行在瀏覽器）對比傳統的客户端渲染的核心優勢是首屏是帶數據的和減少跨域帶來的option請求。其它後續操作是一樣的。理論上能比客户端渲染看到

react , 同構 , node.js , next.js , ssr

收藏 評論

liulhf 頭像

劉lhf - React Router V6項目中的路由鑑權封裝實踐（Hooks）

React Router V6項目中的路由鑑權封裝實踐（Hooks） 1. 前言 1.1 路由封裝的好處 路由鑑權集中管理： 封裝路由組件允許你集中管理路由鑑權邏輯。這意味着在一個地方處理用户是否有權限訪問某個路由，而不是在每個頁面或組件中重複相同的鑑權邏輯。這有助於保持一致性，並簡化了對路由鑑權的維護和更新。 提高代碼複用性： 封裝路由組件可以促進代碼的複用。你可以將通用的路由配置、鑑權邏

react , 封裝 , react-router , typescript , 前端

收藏 評論

zhoumo_62382eba4b454 頭像

perkz - Redux

Redux類適用所有React生態項目 import { applyMiddleware, combineReducers, legacy_createStore as createStore, Store, compose, } from "redux"; import thunk from "redux-thunk"; import {connect,

react , redux-thunk , redux , typescript

收藏 評論

tosmile 頭像

浪遏飛舟 - React組件如何適配到MVC項目

笑而不語是一種豁達，痛而不言是一種歷練。時間改變着一切，一切改變着我們，曾經看不慣，受不了的，如今不過淡然一笑。 成熟，不是看破，而是看淡，原先看不慣的如今習慣了，曾經想要的，現在不需要了，開始執着的，後來很曬脱了... 成長的路上，人總要沉澱下來，過一段寧靜而自醒的日子，來整理自己，沉澱再沉澱，然後成為一個温柔而強大的人！ 目前公司的業務線中存在許多未進行前後端分離的 Spri

構建工具 , react , shadow , 打包 , mvc

收藏 評論

chongdianqishi 頭像

機器馬 - ReactRouter6 的一些坑點

問題 這幾年忙着寫 Taro 相關業務，所以很久沒有再接觸 ReactRouter 了。從當年使用的 ReactRouter v3 VueRouter v2，功能和寫法都沒什麼差別，而到現在的 ReactRouter v6，就感覺變化十分大。這裏從使用者的角度聊聊，初次上手 v6 的感受和如何應對這些變化。 變化 範式 函數化和標準化，讓其源碼減少了一半 v6 全面擁抱 Hooks，API

react , react-router , 前端

收藏 評論

pengxiaohei 頭像

彭小黑 - NextJS14 app + Trpc + PayloadCMS + MongoDB 自定義服務器搭建

自定義服務器啓動 相關依賴 dotenv 讀取 env 文件數據 express node 框架 details summary基礎示例如下/summary // src/server/index.ts import 'dotenv/config'; import express from 'express'; import chalk from 'chalk'; const port

express , react , node.js , next.js , cms

收藏 評論

refanbanzhang 頭像

熱飯班長 - SPA應用的hash模式和history模式部署問題

hash模式和history模式的差異是什麼？ 拿這個地址為例： http://xxx.com#about http://xxx.com/about hash模式 由於http請求並不包含hash，所以不管hash值為多少，服務器端收到的請求始終都是/。 history模式 history模式下，後面的/about路徑會被服務器接收到，然後嘗試去處理這個/about。 為什

react , vue.js , Nginx , router , 前端

收藏 評論

invalidnull 頭像

註銷 - 關於 serve-static 的 index.d.ts 報錯的問題分析

理解這條日誌的含義，需要我們深入分析其組成部分和背後可能的原因。這條日誌信息顯然指向了一個 Node.js 項目中的一個具體錯誤，其指出了錯誤發生的文件路徑和具體位置。接下來，我將逐步解析這條日誌信息的各個方面，並解釋可能的原因和解決方法，同時遵守你的要求，使解析過程既詳細又不顯得機械。 日誌信息解析 2024-01-01 05:08:15,120 INFO d.h.c.h.PrintOutput

react , ecmascript-6 , angular , ssr , 前端

收藏 評論

assassin 頭像

assassin_cike - react 繼續踩坑

1. react-i18next resources key默認槓後大寫 新增了繁體中文模塊，如下導入，切換語言並不生效 import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import translation_en from './en'; import translation_zh fro

react-i18next , react , lexical , react-router , Markdown

收藏 評論

assassin 頭像

assassin_cike - @tanstack/react-query 實踐

@tanstack/react-query@5.35.5 1. isPending isLoading isFetching 傻傻分不清 const { data: knowledgeList, isFetching: loading } = useQuery({ queryKey: ['knowledgeList'], initialData: [], gcTime:

react , request , HTTP , fetch , react-query

收藏 評論

kevinzhw 頭像

天涯學館 - GraphQL在現代Web應用中的應用與優勢

GraphQL是一種現代的API查詢語言，它在現代Web應用中得到了廣泛的應用，因為它提供了一種高效、靈活且強大的方式來獲取數據 GraphQL基礎快速應用示例： 1. 後端設置（使用graphql-yoga） 首先，我們需要創建一個GraphQL服務器。安裝graphql-yoga並創建一個簡單的GraphQL schema： npm init -y npm install graphql yo

react , graphql , 前端 , Javascript

收藏 評論

refanbanzhang 頭像

熱飯班長 - svg的使用方式

使用img加載 import dir from '/assets/icons-plus/dir.svg' img :src="dir" / 優點：使用簡單 缺點: 不能動態修改svg的樣式

react , vue.js , svg

收藏 評論

lovehx_58bc3f5518bf4 頭像

阿芯愛編程 - redux教程2024

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

react , redux

收藏 評論

refanbanzhang 頭像

熱飯班長 - flex佈局常見問題

flex無法創建滾動條 flex的孫元素使用overflow: auto無法出現滾動條 原因： 子元素沒有設置寬度，這會導致子元素的寬度由孫元素決定，從而子元素被撐大，孫元素無法達到出現滾動條的條件。 解決方案： 給子元素設置寬度，比如width:100%; flex佈局和文字溢出省略遭遇的問題 https://segmentfault.com/a/1190000045

react , flex , Css , 前端 , Javascript

收藏 評論

kevinzhw 頭像

天涯學館 - Redux Toolkit：簡化Redux應用狀態管理

Redux Toolkit 是官方推薦用來簡化Redux開發的工具集。它包含了一些預設的最佳實踐，使得創建和管理Redux狀態變得更簡單。 1. 創建Store 使用configureStore函數來創建Redux store，它會自動配置中間件，如redux-thunk用於處理異步操作。 import { configureStore } from '@reduxjs/toolkit';

react , redux , 前端 , Javascript

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 從0到1：React項目中的Webpack配置實戰

公司項目一般都是使用集團封裝好的腳手架，腳手架內部實現咱看不到也摸不着，好不容易組內推行新的UI框架，需要自行定義 webpack 配置，這可是個絕佳的好機會，我對配置過程進行了梳理，把商業項目的成熟配置小跑着送上。 初始化 首先新建一個空文件夾，執行 npm init 初始化生成 package.json 文件。 創建 src 文件夾，項目的業務代碼都放在這裏，再創建 index.js，這是項目

react , webpack-dev-server , webpack , 前端 , Javascript

收藏 評論