iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

react.js相關文章

共有 164 則文章

5 人追蹤

追蹤

0 Like 0 留言 314 瀏覽

鐵人賽 Modern Web DAY 14

30天React練功坊-攻克常見實務/面試問題系列第 14 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day14: Optimization with React.memo the wrong way

tags: ItIron2023 react 前言我們昨天看了一個不必要re-render造成的效能問題並利用React.memo來解決，到這邊一切相安無事，...

windate3411 ‧ 2023-09-29

0 Like 1 留言 201 瀏覽

鐵人賽自我挑戰組 DAY 14

React 個人讀書會系列第 14 篇

技術 Day 14 - 屬性的深層傳遞：Prop Drilling

什麼是 Prop Drilling？當一個父元件包含多個嵌套子元件，並且子元件需要最外層父元件的資料時，我們需要將資料從最頂層傳遞到最底層，讓子元件能夠訪問...

秘密基地 ‧ 2023-09-29

0 Like 0 留言 274 瀏覽

鐵人賽 Modern Web DAY 13

30天React練功坊-攻克常見實務/面試問題系列第 13 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day13: ExpensiveComponent re-render causing performance issue

tags: ItIron2023 react 前言我們昨天用了一個簡單的例子告訴你useRef在哪些情況能派上用場，那並不會是我們唯一一次與useRef打交道...

windate3411 ‧ 2023-09-28

0 Like 0 留言 202 瀏覽

鐵人賽自我挑戰組 DAY 13

React 個人讀書會系列第 13 篇

技術 Day 13 - 打造靈活的元件：Children Prop

什麼是 Children Prop？在 React 中，Children Prop 是每個 React 元件會自動接收的一個特殊屬性。 // 每個元件都會有...

秘密基地 ‧ 2023-09-28

0 Like 1 留言 279 瀏覽

鐵人賽 Modern Web DAY 12

30天React練功坊-攻克常見實務/面試問題系列第 12 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day12: Sometimes useState just not good enough

tags: ItIron2023 react 前言昨天我們看了一個常見的race-condition問題並給出了三種主流的解決方案，今天我們放輕鬆一點，看一個...

windate3411 ‧ 2023-09-27

0 Like 0 留言 184 瀏覽

鐵人賽自我挑戰組 DAY 12

React 個人讀書會系列第 12 篇

技術 Day 12 - 根據狀態計算：派生狀態

什麼是派生狀態（Derived State）？在 React 中，派生狀態是指從現有的某個狀態或屬性計算出來的狀態，這篇文章將探討派生狀態的概念，以及如何運...

秘密基地 ‧ 2023-09-27

0 Like 0 留言 365 瀏覽

鐵人賽 Modern Web DAY 11

30天React練功坊-攻克常見實務/面試問題系列第 11 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day11: Race condition with useEffect

tags: ItIron2023 react 前言我們昨天看了一個看似useEffect在搞事的問題，雖然說不能與它完全無關，但實際上他確實挺無辜的，真要怪的...

windate3411 ‧ 2023-09-26

0 Like 0 留言 138 瀏覽

鐵人賽自我挑戰組 DAY 11

React 個人讀書會系列第 11 篇

技術 Day 11 - useState：基於當前狀態更新值

多次調用 set 函式這裡有一個簡單的情境，有一個初始值為 20 的 age 變數，我們想要在按下按鈕時將 age 增加 1。 function App()...

秘密基地 ‧ 2023-09-26

0 Like 0 留言 285 瀏覽

鐵人賽 Modern Web DAY 10

30天React練功坊-攻克常見實務/面試問題系列第 10 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day10: useEffect got called twice with empty dependency array

tags: ItIron2023 react 前言我們昨天看了一個useEffect在沒有處理好dependency array時發生的問題，今天讓我們再看一...

windate3411 ‧ 2023-09-25

0 Like 0 留言 167 瀏覽

鐵人賽自我挑戰組 DAY 10

React 個人讀書會系列第 10 篇

技術 Day 10 - 元件的狀態：useState

什麼是 useState？ useState 是 React 中的一個 Hook，用於在函式元件中添加狀態，透過 useState，我們可以在函式元件中定義和...

秘密基地 ‧ 2023-09-25

0 Like 0 留言 130 瀏覽

鐵人賽自我挑戰組 DAY 9

React 個人讀書會系列第 9 篇

技術 Day 09 - 畫面呈現：條件渲染

React 中的條件渲染元件通常需要根據不同的條件顯示不同的內容，在 React 中，我們可以使用 JavaScript 語法（例如if 語句、&&...

秘密基地 ‧ 2023-09-24

0 Like 1 留言 144 瀏覽

鐵人賽自我挑戰組 DAY 8

React 個人讀書會系列第 8 篇

技術 Day 08 - 畫面呈現：列表渲染

React 中的列表渲染在 React 中，列表渲染是一種常見的操作，用於將資料列表渲染為頁面上的元素，這在頁面中是十分常見的一種形式。使用 map 方...

秘密基地 ‧ 2023-09-23

0 Like 0 留言 265 瀏覽

鐵人賽 Modern Web DAY 17

從Vue學React！不只要會用，還要真的懂～系列第 17 篇

技術【Day 17】想要避免多餘的渲染就用它？了解useCallback的最終目的

今天接著延續昨天的主題，來看另一個跟useMemo這個hook一樣都在進行緩存動作的hook，也就是useCallback。今天一樣會把焦點放在我們男主角Rea...

文科少女 ‧ 2023-09-23 ‧團隊曼陀號計畫V

0 Like 1 留言 242 瀏覽

鐵人賽自我挑戰組 DAY 7

React 個人讀書會系列第 7 篇

技術 Day 07 - 元件的溝通橋樑：Props

元件的 Props 在 React 中，props（屬性）是實現元件之間資料傳遞的主要機制，特別是在父元件和子元件之間。你可以將 props 想像成...

秘密基地 ‧ 2023-09-22

0 Like 0 留言 195 瀏覽

鐵人賽 Modern Web DAY 16

從Vue學React！不只要會用，還要真的懂～系列第 16 篇

技術【Day 16】不要再重新計算啦！把計算複雜的值緩存起來 - computed & useMemo

需要一個經歷複雜計算所產出的值時，大家通常都會怎麼做呢？是用函式把這個計算過程包裝起來，並回傳出這個計算後的值？還是透過其他的方式達成呢？其實在Vue和Reac...

文科少女 ‧ 2023-09-22 ‧團隊曼陀號計畫V

0 Like 1 留言 161 瀏覽

鐵人賽自我挑戰組 DAY 6

React 個人讀書會系列第 6 篇

技術 Day 06 - 元件的外觀：JSX

什麼是 JSX？ JSX（JavaScript XML）是一個 JavaScript 語法擴充，用於描述使用者介面的外觀和工作方式，通常會於 React 元件...

秘密基地 ‧ 2023-09-21

0 Like 0 留言 163 瀏覽

鐵人賽自我挑戰組 DAY 5

React 個人讀書會系列第 5 篇

技術 Day 05 - React 的基本概念：元件

元件（Component）元件是 React 中最基本的概念，基本上，整個 React 應用程式都是由元件所組成，因此，可以說元件是 React 中使用者介...

秘密基地 ‧ 2023-09-20

0 Like 0 留言 212 瀏覽

鐵人賽自我挑戰組 DAY 4

React 個人讀書會系列第 4 篇

技術 Day 04 - 建立 React 開發環境：Create React App

準備 React 開發環境首先，我們需要到 Node.js 的官網安裝 Node.js 環境，選擇左邊的穩定版本 v18.18.0，若是有使用 nvm...

秘密基地 ‧ 2023-09-19

0 Like 1 留言 175 瀏覽

鐵人賽自我挑戰組 DAY 2

React 個人讀書會系列第 2 篇

技術 Day 02 - 為什麼前端框架會存在？

單頁式應用程式（SPA）的興起在過去，網頁主要在 Server 端生成，這些網頁包含的 JavaScript 最初只是為了向頁面添加一些簡單的動態效果，開發...

秘密基地 ‧ 2023-09-17

0 Like 1 留言 231 瀏覽

鐵人賽自我挑戰組 DAY 1

React 個人讀書會系列第 1 篇

技術 Day 01 - 學習 React 的契機

為何選擇學習 React？雖然目前在開發中主要使用 Vue3（Composition API），但這一次的鐵人賽，我決定將焦點放在 React 上。通常，...

秘密基地 ‧ 2023-09-16

1 Like 1 留言 1286 瀏覽

鐵人賽 Modern Web DAY 1

深入淺出，完整認識 Next.js 13 ！系列第 1 篇

技術 Day 01 - 參賽動機 & 前言

大家好，我是 S.C，八月初偶然在 Youtube 上看到一段影片，提到學習分成三層次 - 自己會、能教會他人、能設計教材，看完蠻有感觸的，因為自踏入程式開發的...

S.C ‧ 2023-09-01

5 Like 8 留言 3826 瀏覽

鐵人賽 Modern Web DAY 30

一次打破 React 常見的學習門檻與觀念誤解系列第 30 篇

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

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

Zet ‧ 2022-10-15

2 Like 0 留言 1822 瀏覽

鐵人賽 Modern Web DAY 29

一次打破 React 常見的學習門檻與觀念誤解系列第 29 篇

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

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

Zet ‧ 2022-10-14

0 Like 0 留言 3063 瀏覽

鐵人賽 Modern Web DAY 28

一次打破 React 常見的學習門檻與觀念誤解系列第 28 篇

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

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

Zet ‧ 2022-10-13

1 Like 2 留言 2608 瀏覽

鐵人賽 Modern Web DAY 27

一次打破 React 常見的學習門檻與觀念誤解系列第 27 篇

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

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

Zet ‧ 2022-10-12

1 Like 1 留言 1976 瀏覽

鐵人賽 Modern Web DAY 26

一次打破 React 常見的學習門檻與觀念誤解系列第 26 篇

技術 [Day 26] Effects & cleanups 常見情境的設計技巧

在前面章節中我們解析了將 effect 設計成即使多次執行也能保持正確的重要性。如果你還對這個觀念不是很熟悉的話，非常建議你先閱讀系列文前面的篇幅中關於 use...

Zet ‧ 2022-10-11

1 Like 0 留言 2626 瀏覽

鐵人賽 Modern Web DAY 25

一次打破 React 常見的學習門檻與觀念誤解系列第 25 篇

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

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

Zet ‧ 2022-10-10

0 Like 0 留言 333 瀏覽

鐵人賽 Modern Web DAY 25

為期 N 天的 react 小冒險系列第 25 篇

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

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

dc88 ‧ 2022-10-09

3 Like 1 留言 2236 瀏覽

鐵人賽 Modern Web DAY 24

一次打破 React 常見的學習門檻與觀念誤解系列第 24 篇

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

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

Zet ‧ 2022-10-09

2 Like 0 留言 4148 瀏覽

鐵人賽 Modern Web DAY 24

自己做一個價值幾十萬的動態網站，學會Mern開發、前台UI設計各式觀念與各式Lib、typescript你該學會的前端技術系列第 24 篇

技術「全端挑戰」useLocation.pathname應用，optionsContext資料同步更新、空房情況UI設計與串接room顯示資料

鐵人賽 Day24自己做一個價值幾十萬的動態網站第二十四課：resveration 將optionsContext條件行為計算後，同步更新到各個需要的comp...

K.o ‧ 2022-10-09

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙