tag react

標籤
貢獻253
429
05:50 PM · Oct 25 ,2025

@react / 博客 RSS 訂閱

陳學家_6174 - 精益 React 學習指南 (Lean React)- 2.4 webpack + gulp 構建完整前端工作流

書籍完整目錄 2.4 webpack + gulp 構建完整前端工作流 在前面的兩個小節中已經完整的講了 webpack 和 gulp 相關的內容,本小節中將會結合二者構建一個完整的前端工作流,內容目錄為: 前端工程結構和目標 前端工程目錄結構 gulp clean gulp copy gulp less gulp au

react , 前端工程化 , 前端架構 , leanreact

收藏 評論

ohoherror - react 常用的hook

react最常用的hooks有,useState,useEffect,useMemo,useCallback 首先我們來先聊useState,設置和改變state,代替原來的state和setState import { useState } from "react"; import './index.css' export default () = { const [ count,

react , hooks , 前端

收藏 評論

熱飯班長 - 當useEffect遇到函數依賴

下面的代碼實現了一個簡易的登錄功能(為了減少代碼量,去掉了密碼)。 import React, { useState } from 'react'; const api = { login(username) { console.log('username', username); }, }; function Login() { const [username, setU

react , react-hooks

收藏 評論

Nash Vail - React Native Tutorial – Building Your First iOS App With JavaScript (Part 1)

The idea of building mobile apps with JavaScript is not new. We’ve seen frameworks like Ionic and PhoneGap take on the challenge, and to some extent succeed in gaining a fair amount of developer and

react , swift , mobile , Apps , ios , Javascript

收藏 評論

兔子先森 - 項目啓動報錯node:events:485 的解決方法以及報錯問題排查思路

錯誤分析 1、報錯結果 Error: spawn E:\xxx\xxx\node_modules\.pnpm\esbuild@0.11.3\node_modules\esbuild\esbuild.exe ENOENT 路徑中明確顯示了 esbuild@0.11.3,這告訴我們系統試圖訪問的是這個特定版本。 2、spawnargs 參數中的版本信息 spawnargs: [ '--service

react , vue.js , vite , 前端 , html5

收藏 評論

YOLO_Y - IE11刷新後字體圖標消失?fontawesome iconfont

IE可真是個神奇的瀏覽器,總會出現各種奇奇怪怪的問題。 問題如下:由於項目需要,使用了多種字體文件 fontawesome、lato 、olympos-font,收到個測試報的bug,IE11刷新後 字體圖標不顯示了。 剛開始以為是字體文件加載失敗了。但直覺告訴我,第一次正常顯示刷新後消失估計跟緩存有關。 有兩種解決方案 方案一 stackoverflow裏的一個解決方案 鏈接戳這裏

react , ie11 , awesome , HTTPS , ie-debug

收藏 評論

sanget - React 中 Virtual DOM 與 Diffing 算法的關係

前言 這篇文章是基於 React 官方文檔對於 Virtual DOM 的理念和 Diffing 算法的策略的整合。 Virtual DOM 是一種編程理念 Virtual DOM 是一種編程理念。UI 信息被特定語言描述並保存到內存中,再通過特定的庫,例如 ReactDOM 與真實的 DOM 同步信息。這一過程成為 協調 (Reconciliation)。 與之對應的數據結構 Virtual D

react , virtual-dom , diff

收藏 評論

晚安啦 - 五個好用的Hooks

React.js 目前是前端開發人員十分流行的 JavaScript 庫。它由 Facebook 發明,但作為開源項目提供給世界各地的開發人員和企業使用。 React 真正改變了我們構建單頁面應用程序的方式,其中最大的特點之一是函數組件的應用。Hooks 是19年推出的,使我們能夠在處理狀態時使用函數組件而不是基於類的組件。除了內置的 hooks 外,React 還提供了實現自定義 hooks 的

react , hooks , 前端

收藏 評論

小葉子 - Webpack3+React16代碼分割

項目背景 最近項目裏有個webpack版本較老的項目,由於升級和換框架暫時不被leader層接受o(╥﹏╥)o,只能在現有條件進行優化。 webpack3 + react16 webpack v3配置檢查 很明顯項目的配置是從v1繼承過來的,v1-v3的升級較為簡單,參考官網https://webpack.js.org/migrat... 即可。 loaders變為rules 不再支持鏈式寫法的

性能優化 , react , webpack3 , 打包 , 前端

收藏 評論

YanceyKang - react項目中使用mocha結合chai斷言庫進行單元測試

react項目中使用mocha結合chai斷言庫進行單元測試 git地址:https://github.com/yancekang/... 如果對你有所幫助,感謝start 項目搭建 create-react-app react-mocha-test 創建一個名稱為 react-mocha-test 的react項目 進入 react-mocha-test 安裝 Mocha 為了操作的方便,請在全

react , mocha , chai , testing

收藏 評論

二維工坊客服 - react使用在線mock服務,模擬真實請求示例,不用安裝mockjs庫

通常我們mock數據都會安裝mockjs:yarn add mockjs 但是需要配置很多東西,還要攔截請求等等,對新手不友好,即使是老手也覺得麻煩。 推薦大家使用useMock 在線Mock助手,項目API數據模擬,聲稱比內部環境更貼心 支持團隊協作 靈活解耦 不局域 可反覆調試 自動生成文檔 官網:https://www.usemock.com/ React請求示例:

react , mock.js , mock , mockjs

收藏 評論

Ashin - 將create-react-app單頁面SPA改造成多頁面MPA

將create-react-app單頁面SPA改造成多頁面MPA React推薦的腳手架 create-react-app (以下簡稱CRA) 默認創建的是單頁面(SPA)應用,如果項目需要使用多頁面(MPA),則需要對腳手架進行更改 Tips: 以下配置基於 create-react-app@3.4.0 版本 舉個栗子,比如我要將原來的index.html擴充出來一個iframe.html頁面打

react , 單頁面應用 , 多頁面應用 , create-react-app

收藏 評論

點墨 - antd的選擇框如何增加tab選中

antd的選擇框默認是不允許tab選中的,如果有這種需求,那麼需要修改源碼。 經過分析,antd的選擇框使用的是rc-select,將node_modules裏的rc-select/lib/OptionList.js和rc-select/es/OptionList.js裏增加Tab即可。(注意:每次npm install,rc-select都會變動,需要重新覆蓋,如果更新了antd版本,需要

react , select

收藏 評論

心葉 - vue&react源碼思考之:雙向綁定

作者:心葉 時間:2019-07-18 10:34 本文章構思的實現方法在github上有對應的項目已經實現,項目依舊在不斷改進中:watcher.js 核心方法説明 Object.defineProperty(obj,key,{ get(){ // todo1 }, set(newValue){ // todo2 } });

react , vue.js , 雙向綁定

收藏 評論

楊龍飛 - RN中webview的一些思考

遇到的坑:webview和h5通信時,會有一些延遲導致不能立即生效 具體描述:在使用react-native時,需要加載外部網頁,加載後,RN提供一個按鈕可以關閉網頁,但如果打開的是內部網頁就需要隱藏這個按鈕,h5代碼使用react寫的,在componentDidMount時,發送postmessage給客户端(RN),此時發現收不到,查閲react-native官方文檔後得已解決。

react , react-native , postmessage , html5 , Javascript

收藏 評論

karuru - React服務端渲染之路06——優化

所有源代碼、文檔和圖片都在 github 的倉庫裏,點擊進入倉庫 相關閲讀 React服務端渲染之路01——項目基礎架構搭建 React服務端渲染之路02——最簡單的服務端渲染 React服務端渲染之路03——路由 React服務端渲染之路04——redux-01 React服務端渲染之路05——redux-02 React服務端渲染之路06——優化 React服務端渲染之路07—

react , react-router4 , redux , Javascript

收藏 評論

karuru - React服務端渲染之路07——添加CSS樣式

所有源代碼、文檔和圖片都在 github 的倉庫裏,點擊進入倉庫 相關閲讀 React服務端渲染之路01——項目基礎架構搭建 React服務端渲染之路02——最簡單的服務端渲染 React服務端渲染之路03——路由 React服務端渲染之路04——redux-01 React服務端渲染之路05——redux-02 React服務端渲染之路06——優化 React服務端渲染之路07—

react-dom , react , react-router4 , webpack , Css

收藏 評論

karuru - React服務端渲染之路09——SEO優化

所有源代碼、文檔和圖片都在 github 的倉庫裏,點擊進入倉庫 相關閲讀 React服務端渲染之路01——項目基礎架構搭建 React服務端渲染之路02——最簡單的服務端渲染 React服務端渲染之路03——路由 React服務端渲染之路04——redux-01 React服務端渲染之路05——redux-02 React服務端渲染之路06——優化 React服務端渲染之路07—

react , react-router4 , react-router-redux , Javascript

收藏 評論

火狼 - ES5和ES6函數你不知道的區別【面試篇】

前言 JS 中函數是高等公民,但是function 和 class 的區別你真的清楚嘛? 本文從PolyFill 實現,再到性能分析,再複習哈基礎篇的使用; 另外深圳前端求坑,有坑的大佬麻煩內推一下。 1. PolyFill 1.利用原生 js 擼一個簡單的 class; 2.根據上面的用法知道 class 必須通過 new 調用,不能直接調用; // 阻止直接()調用,

react , vue.js , ecmascript-6 , es5 , Javascript

收藏 評論

浪遏飛舟 - react-router-dom源碼分析

react-router-dom源碼分析 參考: https://juejin.im/post/5ac8c1...

react , react-router4

收藏 評論

浪遏飛舟 - react-router-config集中式路由配置

react-router-config主要用來幫助我們進行集中式路由的配置,在不使用react-router-config之前,我們的路由使用react-router-dom庫來進行配置,類似如下代碼: import React from 'react'; import { BrowserRouter as Router, Switch, Route, } from "react-ro

react , react-router4 , 路由

收藏 評論

哦哈哈 - react-Router的使用及原理講解和實現react-Router

react-router簡介 react-router包含3個庫,react-router、react-router-dom和react-router-native。 react-router提供最基本的路路由功能,實際使⽤的時候我們不會直接安裝react-router,⽽是根據應⽤運行的環境選擇安裝 react-router-dom(在瀏覽器器中使⽤)或react-router-nativ

react , react-router4 , 原理 , Javascript

收藏 評論

MangoGoing - react 動態加載路由

前言 react-router4 不再推薦將所有路由規則放在同一個地方集中式路由,子路由應該由父組件動態配置,組件在哪裏匹配就在哪裏渲染,更加靈活 引入必要的依賴 import React from 'react' import { Router, Route, IndexRoute, hashHistory } from 'react-router' 接下來創建一個component函數 目的就

react , react-router4

收藏 評論

彈鐵蛋同學 - [譯] 如何使用 useRef 修復 React 性能問題

原文地址:How to useRef to Fix React Performance Issues 原文作者:Sidney Alcantara 譯文出自:掘金翻譯計劃 本文永久鏈接:https://github.com/xitu/gold-miner/blob/master/article/2020/how-to-useref-to-fix-react-performanc

react , react-hooks , 前端優化 , 前端 , Javascript

收藏 評論