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

0 Like 0 留言 239 瀏覽

技術 React源碼 commit階段詳解

點擊進入React源碼調試倉庫。當render階段完成後，意味著在內存中構建的workInProgress樹所有更新工作已經完成，這包括樹中fiber節點的更...

nero ‧ 2021-02-19

0 Like 0 留言 230 瀏覽

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

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

nero ‧ 2021-02-16

0 Like 0 留言 425 瀏覽

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

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

nero ‧ 2021-02-14

0 Like 0 留言 287 瀏覽

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

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

nero ‧ 2021-02-13

0 Like 0 留言 295 瀏覽

技術 React和DOM的那些事-節點刪除算法

點擊進入React源碼調試倉庫。本篇是詳細解讀React DOM操作的第壹篇文章，文章所講的內容發生在commit階段。 Fiber架構使得React需要維護...

nero ‧ 2021-02-12

0 Like 0 留言 269 瀏覽

技術 React和DOM的那些事-節點新增算法

點擊進入React源碼調試倉庫。本篇是詳細解讀React DOM操作的第二篇文章，文章所講的內容發生在commit階段。插入DOM節點操作的是fiber節點...

nero ‧ 2021-02-11

0 Like 0 留言 252 瀏覽

技術完全理解React的completeWork以及错误边界

點擊進入React源碼調試倉庫。概述每個fiber節點在更新時都會經歷兩個階段：beginWork和completeWork。在Diff之後（詳見深入理解R...

nero ‧ 2021-02-10

0 Like 0 留言 256 瀏覽

技術深入理解React Diff算法

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

nero ‧ 2021-02-09

0 Like 0 留言 495 瀏覽

技術 React狀態計算解密

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

nero ‧ 2021-01-24

0 Like 0 留言 501 瀏覽

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

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

nero ‧ 2021-01-23

1 Like 0 留言 660 瀏覽

技術 React的秘密-原理解析第壹篇：核心概念

作為壹個構建用戶界面的庫，React的核心始終圍繞著更新這壹個重要的目標，將更新和極致的用戶體驗結合起來是React團隊壹直在努力的事情。為什麽React可以將...

nero ‧ 2021-01-22

2 Like 0 留言 347 瀏覽

技術 React中的優先級

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

nero ‧ 2021-01-12

1 Like 0 留言 539 瀏覽

鐵人賽 Modern Web DAY 30

從比入門再往前一點開始，一直到深入React.js 系列第 30 篇

技術【Day.30】React進階 - Styled-Components: React的CSS解決方案 | 系列總結

在過去的29天內，除了直接綁在JSX元素上外，我們從來都沒有提過要如何在React處理CSS code。其實只要設定好打包工具，我們就能直接在任何元件檔使用im...

Andy Chang ‧ 2020-10-15

1 Like 1 留言 227 瀏覽

鐵人賽 Modern Web DAY 30

I Want To Know React 系列第 30 篇

技術 I Want To Know React - 中場休息

鐵人煉成，回顧三十天三十天過去了，沒想到我竟然成功完成鐵人賽了！上次鐵人賽完賽心得的第一句話是 "轉眼間就過了三十天"，但在這次的挑戰中...

Henry Chang ‧ 2020-10-15 ‧團隊404 Not Found

1 Like 0 留言 329 瀏覽

鐵人賽 Modern Web DAY 29

I Want To Know React 系列第 29 篇

技術 I Want To Know React - PropTypes & DefaultProps

此文件紀錄 React PropTypes 的使用方式與語法相信讀者在使用純 JavaScript 的時候一定有遇過搞不清楚 function 參數的型別的狀...

Henry Chang ‧ 2020-10-14 ‧團隊404 Not Found

1 Like 0 留言 358 瀏覽

鐵人賽 Modern Web DAY 29

從比入門再往前一點開始，一直到深入React.js 系列第 29 篇

技術【Day.29】React進階 - 以Redux Thunk處理非同步資料流

很多時候，我們的state必須要透過HTTP Request從後端取得。然而發送Request常用的fetch或是axios是非同步的。雖然我們可以透過以下方式...

Andy Chang ‧ 2020-10-14

1 Like 0 留言 183 瀏覽

鐵人賽 Modern Web DAY 28

I Want To Know React 系列第 28 篇

技術 I Want To Know React - Context 範例 & 使用技巧

回顧 Context 語法在上一章節中，我們介紹了 Context 的使用簡介與語法。 React context 的使用環繞三個角色在運作： Contex...

Henry Chang ‧ 2020-10-13 ‧團隊404 Not Found

1 Like 0 留言 327 瀏覽

鐵人賽 Modern Web DAY 28

從比入門再往前一點開始，一直到深入React.js 系列第 28 篇

技術【Day.28】React進階 - 導入Redux，讓元件溝通更簡潔

當專案中的階層變複雜，state和props變的很多，資料在多層component之間的傳遞也越來越多。產生了一堆純粹用來傳遞用的props和父componen...

Andy Chang ‧ 2020-10-13

1 Like 0 留言 90 瀏覽

鐵人賽 Modern Web DAY 27

從 0 開始建一個 Static Site Generator 系列第 27 篇

技術 Day 27: Incremental build

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

DanSnow ‧ 2020-10-12

1 Like 0 留言 305 瀏覽

鐵人賽 Modern Web DAY 27

I Want To Know React 系列第 27 篇

技術 I Want To Know React - Context 語法

回顧 Context 在上一章節中，我們介紹了何謂 context。 Context 是一種利用向下廣播來傳遞資料的方式，此方法可以解決 props 必須要一層...

Henry Chang ‧ 2020-10-12 ‧團隊404 Not Found

0 Like 0 留言 555 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 [Day 29] Frontend ? Backend ? 如何做選擇？

可能很多人一開始看到系列文主題就會產生疑惑了：「前後端都碰會不會都不專精啊？」其實這個問題的答案我自己覺得是：會的。但我仍然照自己的想法自己的步調在往前行，...

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

2 Like 0 留言 226 瀏覽

鐵人賽 Modern Web DAY 27

從比入門再往前一點開始，一直到深入React.js 系列第 27 篇

技術【Day.27】React進階 - 用useReducer定義state的更動原則

通常當我們要設定state時，都是透過setState(要指定的值)。但這樣做有兩個問題: 使用setState的元件可以任意指定值給state 當stat...

Andy Chang ‧ 2020-10-12

1 Like 0 留言 244 瀏覽

鐵人賽 Modern Web DAY 27

玩轉 Storybook 系列第 27 篇

技術玩轉 Storybook: Day 27 Design System for Developers - Review、Test

單一真值來源或單點故障 Single Source of Truth (SSOT) 單一真值來源 Single Points of Failure (SP...

lala_lee_jobs ‧ 2020-10-12

1 Like 0 留言 100 瀏覽

鐵人賽 Modern Web DAY 26

從 0 開始建一個 Static Site Generator 系列第 26 篇

技術 Day 26: 載入圖片

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

DanSnow ‧ 2020-10-11

1 Like 0 留言 246 瀏覽

鐵人賽 Modern Web DAY 26

I Want To Know React 系列第 26 篇

技術 I Want To Know React - 初探 Context

在本章中，我們將介紹 React Context。React Context 與 props 相同，是一種資料傳遞的方式，然而 React Context 可以...

Henry Chang ‧ 2020-10-11 ‧團隊404 Not Found

1 Like 0 留言 199 瀏覽

鐵人賽 Modern Web DAY 26

從比入門再往前一點開始，一直到深入React.js 系列第 26 篇

技術【Day.26】React進階 - useEffect v.s useLayoutEffect

如果你在撰寫React專案時，有試著在第一次渲染後，透過useEffect以state修改綁定給元件的資料，應該會發現一個特殊的現象: 嗯?為甚麼我的元件會閃...

Andy Chang ‧ 2020-10-11

1 Like 0 留言 119 瀏覽

鐵人賽 Modern Web DAY 25

從 0 開始建一個 Static Site Generator 系列第 25 篇

技術 Day 25: Static Query

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

DanSnow ‧ 2020-10-10

1 Like 0 留言 225 瀏覽

鐵人賽 Modern Web DAY 25

I Want To Know React 系列第 25 篇

技術 I Want To Know React - Composition vs Inheritance

當初學者剛接觸 React 時，常常會想要以 inheritance（繼承）的方式來實作 React component。然而 React 官方建議實作 com...

Henry Chang ‧ 2020-10-10 ‧團隊404 Not Found

0 Like 0 留言 298 瀏覽

鐵人賽 Software Development DAY 26

Mendix從入門到了解，工程師和業務都要知道低代碼平台是什麼系列第 26 篇

技術 Mendix上要不要做自己的Widget呢?

做自己的widget前，該想一想的事的確，能創造自己的widget真的很吸引人，但是，創造以後的維護，以及如何跟上最新版本更新的腳步，這些都是作為一個負責任的...

Mel ‧ 2020-10-10

0 Like 0 留言 373 瀏覽

鐵人賽 Modern Web DAY 27

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

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

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

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

技術 React源碼 commit階段詳解

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

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

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

技術 React和DOM的那些事-節點刪除算法

技術 React和DOM的那些事-節點新增算法

技術 完全理解React的completeWork以及错误边界

技術 深入理解React Diff算法

技術 React狀態計算解密

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

技術 React的秘密-原理解析第壹篇：核心概念

技術 React中的優先級

技術 【Day.30】React進階 - Styled-Components: React的CSS解決方案 | 系列總結

技術 I Want To Know React - 中場休息

技術 I Want To Know React - PropTypes & DefaultProps

技術 【Day.29】React進階 - 以Redux Thunk處理非同步資料流

技術 I Want To Know React - Context 範例 & 使用技巧

技術 【Day.28】React進階 - 導入Redux，讓元件溝通更簡潔

技術 Day 27: Incremental build

技術 I Want To Know React - Context 語法

技術 [Day 29] Frontend ? Backend ? 如何做選擇？

技術 【Day.27】React進階 - 用useReducer定義state的更動原則

技術 玩轉 Storybook: Day 27 Design System for Developers - Review、Test

技術 Day 26: 載入圖片

技術 I Want To Know React - 初探 Context

技術 【Day.26】React進階 - useEffect v.s useLayoutEffect

技術 Day 25: Static Query

技術 I Want To Know React - Composition vs Inheritance

技術 Mendix上要不要做自己的Widget呢?

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

At

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

技術完全理解React的completeWork以及错误边界

技術深入理解React Diff算法

技術【Day.30】React進階 - Styled-Components: React的CSS解決方案 | 系列總結

技術【Day.29】React進階 - 以Redux Thunk處理非同步資料流

技術【Day.28】React進階 - 導入Redux，讓元件溝通更簡潔

技術【Day.27】React進階 - 用useReducer定義state的更動原則

技術玩轉 Storybook: Day 27 Design System for Developers - Review、Test

技術【Day.26】React進階 - useEffect v.s useLayoutEffect