iT邦幫忙

react-hooks相關文章
共有 125 則文章
30 天克服前端面試 系列 第 28

技術 Day 28 - React 中 useContext 跟 React-MobX 的差異

useContext useContext 是 react 提供的一個 hook,可以讓我們透過讀取和訂閱元件中 context 共享元件之間的資料,主要是用來...

30 天克服前端面試 系列 第 26

技術 Day 26 - useRef 的使用情境

useRef 是什麼? useRef 是 React 提供的 hook,用來創建一個 可變(mutable)的引用對象,可以用來存取 DOM 元素或保存跨越多次...

30 天克服前端面試 系列 第 25

技術 Day 25 - useCallback 和 useMemo 的用途和使用時機

useCallback的用途和使用時機 useCallback hook 最主要的作用在於幫助其他 React 效能優化的手段維持正常,例如:React.mem...

30 天克服前端面試 系列 第 24

技術 Day 24 - useEffect dependencies 機制設計的目的? dependencies 的不同情境運作?

useEffect hook 最主要的作用在於處理與畫面無關的 side effect,並非是 functional component 的生命週期API,因為...

30 天克服前端面試 系列 第 23

技術 Day 23 - React 的 useEffect 是什麼?如何使用?

React 在 component function 中提供了一個 useEffect hook 來 隔絕和管理副作用 。React 在每次 render 之後...

30 天克服前端面試 系列 第 22

技術 Day 22 - React componet 的生命週期

Component 的三大生命週期 生命週期就是指一個 React Component 在被創建到被銷毀的過程中,會經歷的一系列階段。 一. Mount Mou...

鐵人賽 Modern Web DAY 13

技術 Day 13 - React Query 原理解析

stale-while-revalidate stale-while-revalidate 是 HTTP Headers 的 Cache-Control 設定。...

鐵人賽 Modern Web DAY 7
React 學得動嗎 系列 第 7

技術 [Day 7] React自定義Hooks:解鎖組件邏輯的重用之門

歡迎來到我們React學習之旅的第七天!今天,我們來認識React的一個強大特性:自定義Hooks。這個工具能夠幫助我們提取組件邏輯到可重用的函數中,大大提高了...

鐵人賽 Modern Web DAY 5
React 學得動嗎 系列 第 5

技術 [Day 5] 聊聊React Hooks

歡迎來到我們React學習之旅的第五天!今天,我們來聊聊React的一個核心特性: Hooks。 什麼是useEffect? useEffect是React提供...

鐵人賽 JavaScript DAY 12

技術 Day 12: 打造 React 導航欄元件

在上一篇文章中,我們介紹了如何使用 React Router 實現頁面導航,並展示了模組化頁面如何提升程式碼的結構性與可維護性。今天,我們將進一步學習如何從零開...

鐵人賽 JavaScript DAY 7

技術 Day 7:進階模組化設計之 ThemeProvider 應用

在上一篇文章中,我們介紹了如何使用模組化設計來簡化應用中的主題切換和語言切換功能。通過將按鈕元件(ThemeButton 和 LangButton )分離,我們...

鐵人賽 自我挑戰組 DAY 26

技術 【Day26】ChatGPT請教教我:React進階(四)- useReducer、useContext vs. Redux ?

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...

鐵人賽 自我挑戰組 DAY 20

技術 【Day20】ChatGPT請教教我:React入門(六)- ref?useRef!forwardRef!useImperativeHandle!

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...

鐵人賽 自我挑戰組 DAY 19

技術 【Day19】ChatGPT請教教我:React入門(五)- 更多Hook!useMemo!useCallback!自定義Hook!

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...

鐵人賽 Modern Web DAY 9
react 學習記錄 系列 第 9

技術 [Day9]我的 react 學習記錄 - react event 綁定 & useState

這篇文章的主要內容 簡單說明 react 裡面的事件綁定跟透過 useState hook 來管理狀態。 JavaScript 的事件綁定 JavaScrip...

鐵人賽 Mobile Development DAY 5

技術 Day 5 - 使用 context 和 useReducer 來管理與傳遞資料狀態

在日益複雜的前端開發環境中,如何有效地組織和管理程式碼,已成為前端工程師不可迴避的課題。今天,我們將深入探討模組化開發的重要性,以及如何運用 React 的 c...

技術 React 六角學院-學習筆記(React Hooks)

React Hook(useState, useEffect...等) 在React中 函式內一般變數若更新 畫面上不會跟著更動 所以要用useState等方法...

鐵人賽 Modern Web DAY 12
React 走出新手村 系列 第 12

技術 React 走出新手村-自製高效 Context Provider

前導 還沒看過上一篇文章的朋友請先回顧喔!接續上一篇的問題,大家有找到合適的解法了嗎?如果沒有讓我們一起來思考除了useState以外還有什麼可以讓我們有效管理...

鐵人賽 Modern Web DAY 11
React 走出新手村 系列 第 11

技術 React 走出新手村-深入 Context Provider

講古 在早期還沒有Context Provider的時候你每一層都需要靠 props 來傳遞資料,才能達到資料共享。 然後... 於是 Context / P...

鐵人賽 Modern Web DAY 9
React 走出新手村 系列 第 9

技術 React 走出新手村-Memo處方簽

Memo解方 今天我們接續前面的問題,大家是否有找到解答了呢? 如果沒有的話,我會在下面提供兩種做法: 第一種,在 memo 裡面用 callback 告訴...

鐵人賽 Modern Web DAY 8
React 走出新手村 系列 第 8

技術 React 走出新手村-深入Memo

這次來聊聊進階一點的話題 memo 的應用,在談論這個話題之前我們先來了解 memo 是什麼? 了解 React.memo React memo 是 React...

鐵人賽 Modern Web DAY 7
React 走出新手村 系列 第 7

技術 React 走出新手村-深入useRef

ref講古 今天來聊聊 useRef 這個比較容易理解的 hook function,這期的內容,多半是我自己使用經驗的總結,也許不是那麼精確,但也多多少少能提...

鐵人賽 Modern Web DAY 6
React 走出新手村 系列 第 6

技術 React 走出新手村-深入useEffect

複習useEffect 今天要來聊聊新手時期最痛恨的hook function — useEffect。 useEffect的誕生 首先,讓我們先來了解一下 u...

鐵人賽 Modern Web DAY 5
React 走出新手村 系列 第 5

技術 React 走出新手村-深入useState

複習useState 接著前面所講的,我們將幾個常用的hook都再複習一遍,來解構基礎以外你可能沒發現的細節,那麼我們先從最基礎的 useState 來講起。...

技術 [筆記 + 使用心得]React 18 的更新

React 18 在今年稍早推出了穩定版,聽說解決了很多長久以來的問題,所以花了點時間,體驗看看這些新功能,並且統整一下,寫成今天的文章 5 new Hooks...

鐵人賽 Modern Web DAY 30

技術 [Day 30] 一次打破 React 常見的的學習門檻與觀念誤解:系列文總結以及完賽感言

2024/2 更新 - 實體書平裝版本上市 在經過快要一年的努力後,本系列文的實體書版本推出了~其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節,並以全彩印刷拉...

鐵人賽 Modern Web DAY 29

技術 [Day 29] 一次弄懂 React hooks 的運作原理與設計思維(下)

Hooks 的誕生是為了解決什麼問題 在深入 hooks 的設計脈絡之前,我們得先來談談 hooks 的誕生究竟是為了解決什麼問題。首先,hooks 是綁定配合...

鐵人賽 Software Development DAY 29
React框架白話文運動 系列 第 29

技術 React白話文運動29-React Router 03

前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...

鐵人賽 Modern Web DAY 28

技術 [Day28]用 React 讓網站動起來:自定義 hook

這三十天我們介紹了許多的 hooks,在開發上常常會需要使用這些 hook 做組合技,也會常常使用到重覆的功能,這時候就可以將這些 hook 抽出來,做成 cu...

鐵人賽 Modern Web DAY 28

技術 [Day 28] 一次弄懂 React hooks 的運作原理與設計思維(上)

React hooks 從 2019 年初推出以來也經過了幾年的時間,它以非常快的速度就發展成為 React 開發方式的絕對主流選擇。搭配 function c...