iT邦幫忙

react-hooks相關文章
共有 114 則文章
鐵人賽 自我挑戰組 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 & 前端技能樹...

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

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

鐵人賽 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...

鐵人賽 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

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

技術 [Day 27] useCallback 與 useMemo 的正確使用時機

除了最核心的 useState 以及 useEffect 以外,在 React 中最常被我們使用到的內建 hooks 應該就屬 useCallback 以及 u...

鐵人賽 Modern Web DAY 27

技術 [Day27]用 React 讓網站動起來:useCallback

昨天我們介紹了 useMemo,這個 hook 可以幫助我們記憶依賴參數,當參數變化時才會重新執行函式,並且取得函式回傳的值。今天要來介紹的是 useCallb...

鐵人賽 Modern Web DAY 26

技術 [Day26]用 React 讓網站動起來:useMemo

昨天我們介紹了什麼是 memorized hook,介紹他們是如何提升 React 的效能。接著,我們來更詳細一點的介紹各個 hook 要怎麼使用。 useMe...

鐵人賽 Modern Web DAY 25

技術 [Day 25] Reusable state — React 18 的 useEffect 在 mount 時為何會執行兩次?

在前面的章節中我們已經詳細的解析了 useEffect 正確的概念以及用法,也再三強調了 useEffect 的用途是同步資料到 React elements...

鐵人賽 Modern Web DAY 25

技術 [Day25]用 React 讓網站動起來:認識 memorize hook

當 React 程式越來越龐大,就需要考慮效能的問題。memorize hook 是 React 提供的 api,可以避免重複 render 造成的效能問題。今...

鐵人賽 Modern Web DAY 25

技術 用 react hook 做一個城市天氣卡-part2-day25

接續把拿回來的資料做整理拿回來的資料像這樣一大串.. 插播一下,使用 chrome 可以安裝一下 Json Formatter 這個 extension功用是可...

鐵人賽 Modern Web DAY 24

技術 [Day 24] useEffect dependencies 的經典錯誤用法

這個章節讓我們更深入的探討一下 dependencies 常見的錯誤使用方式。我們在前幾篇 useEffect 的深入解析中一再強調過一個概念:useEffec...

鐵人賽 Modern Web DAY 24

技術 用 react hook 做一個城市天氣卡-part1(with axios fetch data)-day24

暫時揮別 react router 的部分,這次來實作一個小型的互動程式,用 react hook 及 axios 向 api 取得特定城市的氣溫資料 安裝 a...

鐵人賽 Modern Web DAY 23

技術 [Day 23] 保持資料流 — 不要欺騙 hooks 的 dependencies(下)

函式與 dependencies 一種常見的誤解是認為函式不應該填寫在 dependencies 中。我們來看一下這個範例: function SearchRe...

鐵人賽 Modern Web DAY 22

技術 [Day 22] 保持資料流 — 不要欺騙 hooks 的 dependencies(上)

在上一篇關於 useEffect 的深度解析中,我們已經了解到了 dependencies 是一種效能的最佳化手段,而不是用來控制生命週期或是商業邏輯。對於 u...

鐵人賽 Modern Web DAY 21

技術 [Day 21] useEffect 其實不是 function component 的生命週期 API

經過了前兩篇章的洗禮,相信你現在對於 function component 的 render 概念已經有一定程度的掌握。接著就讓我們進入這個階段的重頭戲:use...