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

0 Like 0 留言 1491 瀏覽

技術梳理useEffect和useLayoutEffect的原理與區別

點擊進入React源碼調試倉庫。 React在構建用戶界面整體遵循函數式的編程理念，即固定的輸入有固定的輸出，尤其是在推出函數式組件之後，更加強化了組件純函數的...

nero ‧ 2021-02-16

0 Like 0 留言 1750 瀏覽

技術 React hooks 的基礎概念：hooks鏈表

當函數組件進入render階段時，會被renderWithHooks函數處理。函數組件作為壹個函數，它的渲染其實就是函數調用，而函數組件又會調用React提供的...

nero ‧ 2021-02-14

0 Like 0 留言 1137 瀏覽

技術 React和DOM的那些事-節點更新

點擊進入React源碼調試倉庫。 React的更新最終要落實到頁面上，所以本文主要講解DOM節點（HostComponent）和文本節點(HostText)的更...

nero ‧ 2021-02-13

0 Like 0 留言 1813 瀏覽

技術深入理解React Diff算法

點擊進入React源碼調試倉庫。上壹篇React狀態計算解密之後，我們來分析壹下Diff的過程。 fiber上的updateQueue經過React的壹番計...

nero ‧ 2021-02-09

0 Like 0 留言 1331 瀏覽

技術 React狀態計算解密

點擊進入React源碼調試倉庫。概述壹旦用戶的交互產生了更新，那麽就會產生壹個update對象去承載新的狀態。多個update會連接成壹個環裝鏈表：upda...

nero ‧ 2021-01-24

0 Like 0 留言 1278 瀏覽

技術 ReactFiber節點的更新入口：beginWork

React的更新任務主要是調用壹個叫做workLoop的工作循環去構建workInProgress樹，構建過程分為兩個階段：向下遍歷和向上回溯，向下和向上的過程...

nero ‧ 2021-01-23

2 Like 0 留言 1283 瀏覽

技術 React中的優先級

點擊進入React源碼調試倉庫。 UI產生交互的根本原因是各種事件，這也就意味著事件與更新有著直接關系。不同事件產生的更新，它們的優先級是有差異的，所以更新優先...

nero ‧ 2021-01-12

0 Like 0 留言 766 瀏覽

鐵人賽 Modern Web DAY 30

為期 30 天的 react 大冒險系列第 30 篇

技術 react 大冒險-一些實用的 package-day 30

今天似乎是第 30 天，輕鬆一下～來介紹一些好用的 package (偽)結賽感言總之晃的一下就 30 天了，怎麼感覺好像才剛開賽沒多久XDD沒想到今年竟然成...

dc88 ‧ 2020-10-14

0 Like 0 留言 1988 瀏覽

鐵人賽 Modern Web DAY 29

為期 30 天的 react 大冒險系列第 29 篇

技術 react 大冒險-setTimeout setInterval in react -day 24

今天來說明如何在 react 內執行 setTimeout 跟 setInterval 複習概念，在 react 的生命週期中提到，`componentDidM...

dc88 ‧ 2020-10-13

0 Like 0 留言 806 瀏覽

鐵人賽 Modern Web DAY 28

為期 30 天的 react 大冒險系列第 28 篇

技術 react 大冒險-render props-day 23

繼 higher-order-component 後，今天來說明 react 中另個概念 render-props所謂的 render-props 就是在 co...

dc88 ‧ 2020-10-12

0 Like 0 留言 601 瀏覽

鐵人賽 Modern Web DAY 27

為期 30 天的 react 大冒險系列第 27 篇

技術 react 大冒險-conditional rendering-day 22

寫著寫這竟然忘記了 conditional rendering 這回事XD把這部分補回來什麼是 conditional rendering condition...

dc88 ‧ 2020-10-11

0 Like 0 留言 2565 瀏覽

鐵人賽 Modern Web DAY 27

前端工程師一起來種一棵後端技能樹吧！系列第 27 篇

技術 [Day 27] 高效工作術：番茄工作法

這篇文章不同於過往的技術分享或是關於工程師職涯的心得，要來介紹的是一個自己嘗試過後覺得十分有效的「工作術」，不管讀者的職業是什麼，我認為都有運用這個工作術的空間...

莫力全 Kyle Mo ‧ 2020-10-10 ‧團隊不要搶我隊友

0 Like 0 留言 790 瀏覽

鐵人賽 Modern Web DAY 26

為期 30 天的 react 大冒險系列第 26 篇

技術 react 大冒險-react router-day 21-2

今天繼續對 react router 做說明除了上篇的 Link 外，react-router 還有一個叫 NavLink 的東西.. NavLink com...

dc88 ‧ 2020-10-10

0 Like 0 留言 1833 瀏覽

鐵人賽 Modern Web DAY 26

前端工程師一起來種一棵後端技能樹吧！系列第 26 篇

技術 [Day 26] 菜鳥工程師的初次 Open Source Contribution - (2)

今天接續昨天繼續分享第一次貢獻開源專案的心得。第二步：閱讀 CONTRIBUTING.md & 開發通常一個完整的開源專案，都會提供一個文檔讓想貢獻...

莫力全 Kyle Mo ‧ 2020-10-09 ‧團隊不要搶我隊友

0 Like 0 留言 1004 瀏覽

鐵人賽 Modern Web DAY 25

為期 30 天的 react 大冒險系列第 25 篇

技術 react 大冒險-react router-day 21-1

繼前面提到 HOC 的概念後，緊接著介紹也是相當實用的 react router 本文使用的版本會因版本不同有些微差異 "react-router...

dc88 ‧ 2020-10-09

0 Like 0 留言 2492 瀏覽

鐵人賽 Modern Web DAY 25

前端工程師一起來種一棵後端技能樹吧！系列第 25 篇

技術 [Day 25] 菜鳥工程師的初次 Open Source Contribution - (1)

鐵人賽剩下 5 天，接下來我想聚焦在一些經驗分享，畢竟除了學習技術以外，適時的採取一些實際行動更能夠快速吸收所學知識與進步。身為軟體工程師， Github 自...

莫力全 Kyle Mo ‧ 2020-10-08 ‧團隊不要搶我隊友

0 Like 0 留言 639 瀏覽

鐵人賽 Modern Web DAY 24

為期 30 天的 react 大冒險系列第 24 篇

技術 react 大冒險-higher order component-day 20-2

上篇說明了 higher-order-component 的概念用一個簡單的案例作為例子開新檔案，名為 ClickerCounter.js希望點擊元件上的按鈕...

dc88 ‧ 2020-10-08

0 Like 0 留言 805 瀏覽

鐵人賽 Modern Web DAY 23

為期 30 天的 react 大冒險系列第 23 篇

技術 react 大冒險-higher order component-day 20-1

這篇來說明 React 實用的概念-高階元件(higher order component)所謂的 higher order，其實在 js 中也有類似的概念，叫...

dc88 ‧ 2020-10-07

0 Like 0 留言 848 瀏覽

鐵人賽 Modern Web DAY 22

為期 30 天的 react 大冒險系列第 22 篇

技術 react 大冒險-Lifecycle method-day 19

接續上篇，使用 promise 對 external api 取得值，但如果想要在頁面讀取時就顯示出值，而不是等待使用者操作後才取值就要靠 react 中的 l...

dc88 ‧ 2020-10-06

0 Like 0 留言 1190 瀏覽

鐵人賽 Modern Web DAY 21

為期 30 天的 react 大冒險系列第 21 篇

技術 react 大冒險-fetch data from API-day 18

react 如同一般 js，可以對 api 發出請求並取回值 send request 的幾種方法 js 是 synchronous 特性的語言，在同時間下，一...

dc88 ‧ 2020-10-05

0 Like 0 留言 709 瀏覽

鐵人賽 Modern Web DAY 20

為期 30 天的 react 大冒險系列第 20 篇

技術 react 大冒險-unidirectional flow 單向資料流-day 17-2

在 Calculator 中添加兩個 methodhandleCelsiusChange / handleFahrenheitChange 用來設定 Calc...

dc88 ‧ 2020-10-04

0 Like 0 留言 750 瀏覽

鐵人賽 Modern Web DAY 19

為期 30 天的 react 大冒險系列第 19 篇

技術 react 大冒險-unidirectional flow 單向資料流-day 17-1

在 react 中有個特性稱為單向資料流 unidirectional flow簡單說就是 child component 內的資料都來自於 parent...

dc88 ‧ 2020-10-03

0 Like 0 留言 1360 瀏覽

鐵人賽 Modern Web DAY 18

為期 30 天的 react 大冒險系列第 18 篇

技術 react 大冒險-form in react-day 16-2

上篇提到 react 表單內的事件，來實際應用，做一個表單在表單中寫 method 分別為submitHandler: 按提交後的 methodhand...

dc88 ‧ 2020-10-02

0 Like 0 留言 3155 瀏覽

鐵人賽 Modern Web DAY 18

React + GraphQL 全端練習筆記系列第 18 篇

技術仿Trello - 串接Unsplash API

本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 T...

Jasper ‧ 2020-10-01 ‧團隊Outcome First

0 Like 0 留言 1481 瀏覽

鐵人賽 Modern Web DAY 17

為期 30 天的 react 大冒險系列第 17 篇

技術 react 大冒險-form in react-day 16

上篇提到如何為 component 添加樣式，文末得到了一個使用 bootstrap 樣式的表單，接下來談談 react 中的表單表單內常用的 DOM inp...

dc88 ‧ 2020-10-01

1 Like 0 留言 1750 瀏覽

鐵人賽 Modern Web DAY 17

React + GraphQL 全端練習筆記系列第 17 篇

技術仿Trello - 客製化拖曳圖示

本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。目...

Jasper ‧ 2020-09-30 ‧團隊Outcome First

0 Like 0 留言 830 瀏覽

鐵人賽 Modern Web DAY 16

為期 30 天的 react 大冒險系列第 16 篇

技術 react 大冒險-styling component-day 15

這裡來講講在 react 內，怎麼對 component 套用樣式讓 component 醜小鴨變天鵝 inline stylingcss 屬性以駝峰式(ca...

dc88 ‧ 2020-09-30

0 Like 0 留言 1384 瀏覽

鐵人賽自我挑戰組 DAY 29

React初心者30天的探索之路系列第 29 篇

技術 [Day 29] 用React 來寫ooxx 小遊戲

ooxx也可以說是很熱門的練習題，所以今天就用React 來寫一個ooxx的小遊戲吧！初始化先設定一個長度為9的陣列來記錄玩家下的位置，這邊用了array.f...

Lieutenant ‧ 2020-09-29

0 Like 0 留言 2282 瀏覽

鐵人賽 Modern Web DAY 16

React + GraphQL 全端練習筆記系列第 16 篇

技術仿Trello - 用React DnD製作拖放(drop)功能

本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。有...

Jasper ‧ 2020-09-29 ‧團隊Outcome First

0 Like 0 留言 1460 瀏覽

鐵人賽 Modern Web DAY 15

為期 30 天的 react 大冒險系列第 15 篇

技術 react 大冒險-react 事件處理-day 14

上篇提及的 state 跟 setState，這裡談談在 react 內的 event handling Handling Events in js 一般 js...

dc88 ‧ 2020-09-29

技術 梳理useEffect和useLayoutEffect的原理與區別