tag react-hooks

標籤
貢獻14
74
01:02 PM · Nov 04 ,2025
refanbanzhang 頭像 nideyanjinghaomingliang 頭像 yinzhixiaxue 頭像 hellotech 頭像 joyerli 頭像 manshenjiroudexiangjiao_bogavh 頭像 jdcdevloper 頭像 zhengcaiyunqianduantuandui 頭像 ailvyoudetiebanshao 頭像 zaoying 頭像 congjunhua 頭像 dantiedan 頭像

@react-hooks / 博客 RSS 訂閱

ailvyoudetiebanshao 頭像

溪抱魚 - React-native實戰系列

React-native實戰系列 本文是關於 React-native 實戰的系列內容，包括表單組件的封裝（如 input、select、Toggling、DateTimePicker 等）和懶加載列表的實現。懶加載列表通過定義數據源、繪製組件圖，運用相關 API 實現功能，並處理了搜索排序等邏輯。最後提到若有問題可通過[沸點]聯繫作者。 關聯問題: 如何優化懶加載效果 表單樣式能自定義嗎 安卓日

react-hooks , 前端

收藏 評論

magnesium_5a22722d4b625 頭像

進二開物 - 淺談 Javascript 閉包

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

react , 閉包 , react-hooks , Javascript

收藏 評論

juanerma 頭像

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

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

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

收藏 評論

dantiedan 頭像

彈鐵蛋同學 - [譯] 如何使用 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

收藏 評論

refanbanzhang 頭像

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

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

react , react-hooks

收藏 評論

refanbanzhang 頭像

熱飯班長 - 什麼時候不應該使用useEffect？

當你的數據是同步的 差的： 數據來源是同步的，沒有必要使用。 function App() { const [todos, setTodos] = useState([]); useEffect(() = { const str = localStorage.getItem('todos'); const items = JSON.parse(str) ||

react , react-hooks , 前端

收藏 評論

nideyanjinghaomingliang 頭像

你的眼睛好明亮 - useLayoutEffect

何時使用useEffect: 副作用與DOM無關：例如，數據獲取、設置訂閲、手動更改瀏覽器的URL等。 不需要立即同步讀取或更改DOM：如果你不關心可能的微小布局跳動或閃爍，那麼useEffect就足夠了。 性能考慮：useEffect通常對性能影響較小，因為它不會阻塞瀏覽器渲染。 何時使用useLayoutEffect: 需要同步讀取或更改DOM：例如，你需要讀取元素的大小或位置並

react-hooks

收藏 評論

yinzhixiaxue 頭像

銀之夏雪 - 深入剖析為什麼順序調用對 React Hooks 很重要？

在享受 React Hooks 帶來的便捷性的同時，我們必須嚴格遵循順序調用的規則，這一規則的重要性遠超我們的想象。本文將深入探討順序調用對 React Hooks 的重要性，並結合常見的缺陷，通過具體的代碼案例進行詳細闡述，揭示其背後深層次的原理。 一、React Hooks 工作原理 理解 React Hooks 的工作原理是掌握順序調用重要性的關鍵。React 內部維護着一個 Hooks 鏈

react , react-hooks , 前端 , Javascript

收藏 評論

congjunhua 頭像

從君華 - React中removeEventListener()注意事項

眾所周知，事件監聽器這種東西，除非是{once: true}這種一次性監聽器，否則凡註冊的，必移除。 但是在React的Hook組件中，移除事件監聽時卻要留點神，否則可能代碼寫得自認為OK，實際一點效果都沒有。 先來看個例子： 一個計數器，初始值為1，每點擊一次按鈕，數字+1，噹噹前數字為偶數時，註冊監聽器，為奇數時，移除監聽器。 寫法一 import { useEffect, useState

react , 事件監聽 , react-hooks

收藏 評論

zaoying 頭像

zaoying - useIoC：僅一百多行代碼實現前端的依賴注入

前言 對於一個從事7年Java的開發者來説，Spring依賴注入已經變成日常開發工作的一部分，尤其是最近三年切換Go技術棧更是懷念，儘管有些老員工總是忽悠我Go不是面向對象的語言，所以不需要依賴注入。 示例 為什麼説他們在忽悠？以下面代碼 demo_controller.go 為例： func NewDemoController(demoService DemoService) *DemoCont

依賴注入 , react-hooks

收藏 評論

hellotech 頭像

哈囉技術 - React hooks原理淺談

react的工作流程 fiber是react的基本工作單元，所有的操作都要基於它實現。其實fiber就類似一個個element元素，react的工作流程其實就是遍歷fiber tree。 performUnitOfWork函數會執行當前的fiber節點，然後把這個fiber的子節點賦值給workInProgress，當子節點不存在時，就把兄弟節點賦值給workInProgress。 上層的wo

react-hooks , 前端

收藏 評論

refanbanzhang 頭像

熱飯班長 - 當useEffect遇到了對象依賴

提出問題 根據座標對象，查詢對應的地址詳情，代碼實現如下： const useAddress = (coordinate) = { const [address, setAddress] = useState(null); console.log('coming'); useEffect(() = { const fetchData = async () = {

react , react-hooks , 前端 , Javascript

收藏 評論

yinzhixiaxue 頭像

銀之夏雪 - 從底層到實踐：深度解析 Vue Composition API 與 React Hooks 的異同

一、設計哲學與底層原理差異 1.1 響應式系統的基因差異 Vue3 的 Composition API 建立在 Proxy-based 響應式系統之上，通過劫持對象的 getter/setter 實現依賴收集。當訪問響應式對象時，Vue 會自動建立組件與數據的依賴關係。 // Vue 響應式原理簡版實現 function reactive(obj) { return new Proxy(obj

react , vue.js , react-hooks , vue3 , 前端

收藏 評論

refanbanzhang 頭像

熱飯班長 - 在react hooks中，當useEffect依賴自身來更新自己時，遭遇死循環如何解決？

提出問題 觀察如下代碼，我們需要依賴words來更新自身，所以需要將words加入useEffect的依賴中。更新words觸發useEffect，useEffect再次更新words，然後就產生了死循環。 function App() { const [value, setValue] = useState(''); const [words, setWords] = useState(

react , react-hooks , typescript , 前端 , Javascript

收藏 評論

zhengcaiyunqianduantuandui 頭像

政採雲前端團隊 - ZooTeam 前端週刊｜第 90 期

政採雲前端小報第90期 瀏覽更多往期小報，請訪問： https://weekly.zoo.team Aborting a signal: How to cancel an asynchronous task in JavaScript Performing asynchronous tasks can be hard, especially when a particular prog

渲染 , 單頁面應用 , react-hooks , 前端 , Web

收藏 評論

jdcdevloper 頭像

京東雲開發者 - React Hooks源碼深度解析

作者：京東零售 鄭炳懿 前言 React Hooks是React16.8 引入的一個新特性，它允許函數組件中使用state和其他 React 特性，而不必使用類組件。Hooks是一個非常重要的概念，因為它們提供了更簡單、更易於理解的React開發體驗。 React Hooks的核心源碼主要包括兩個部分：React內部的Hook管理器和一系列預置的Hook函數。 首先，讓我們看一下React內部的H

數據結構 , react-hooks , 源碼 , 架構 , hook

收藏 評論

manshenjiroudexiangjiao_bogavh 頭像

滿身肌肉的香蕉_bOGaVh - ReactHooks自動配置源碼深度探秘

　　前言 　　 　　ReactHooks是React16.8引入的一個新特性，它允許函數組件中使用state和其他React特性，而不必使用類組件。Hooks是一個非常重要的概念，因為它們提供了更簡單、更易於理解的React開發體驗。 　　 　　ReactHooks的核心源碼主要包括兩個部分：React內部的Hook管理器和一系列預置的Hook函數。 　　 　　

react-hooks

收藏 評論

nideyanjinghaomingliang 頭像

你的眼睛好明亮 - react hook 中state使用總結

基本用法 const [age, setAge] = useState(22); const [age, setAge] = useState(generateAge); //傳入函數生成初始值，此函數只會在首次渲染執行一次 //更新狀態 setAge(val) setAge((preState)={ return preState +1}); //state有快照概念，一次渲染週期中只能獲取到

react-hooks

收藏 評論

joyerli 頭像

joyerli - react跨組件狀態流：用事件流實現一個極其輕量高效的狀態流工具

如果你也喜歡使用react的函數組件，並喜歡使用react原生的hook進行狀態管理，但為了跨組件狀態流而不得不引入redux,MboX這種具有自己獨立的狀態管理的重量級/對象級的狀態流框架的話，本文會給你提供一種新的極其輕量的解決跨組件狀態流方案。 Context的問題 首先探討如果不採用redux,mobx，使用原生的react的跨組件共享狀態方案Context，會具備那些問題？ react原

react , react-hooks , react-state-management , react-state

收藏 評論