iT邦幫忙

前端工程師相關文章
共有 75 則文章

技術 React源碼 commit階段詳解

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

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

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

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

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

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

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

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

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

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

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

技術 深入理解React Diff算法

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

技術 React狀態計算解密

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

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

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

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

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

鐵人賽 Modern Web DAY 7

技術 [Day 07] Web Server & Nginx — (1)

接下來想透過兩篇文章聊聊在 web 開發領域中非常重要的 web server,並一併介紹鼎鼎有名的 Nginx Web Server。第一篇會著重在介紹 we...

鐵人賽 Modern Web DAY 6

技術 [Day 06] Message Queue - (3) 程式範例

這是 message queue 系列文第三篇,以下附上前兩篇連結 讓任務排隊吧:Message Queue — (1) 讓任務排隊吧:Message Queu...

鐵人賽 Modern Web DAY 5

技術 [Day 05] Message Queue - (2)

上回介紹了 message queue 的基本觀念與使用時機(想複習觀念的可以看上一篇),今天則要介紹業界常用的第三方 message queue 服務 —...

鐵人賽 Modern Web DAY 2

技術 [Day 02] IOC 控制反轉 & DI 依賴注入 - (1)

第一個主題先來暖暖身子,要講的不是一個 backend 專屬的技術或概念,更像是屬於寫出優質程式碼的一種方法或者說模式,畢竟不管是前端後端,或是任何領域的工程師...

鐵人賽 自我挑戰組 DAY 1
溫故知新 JavaScript 系列 第 1

技術 Day1 - 前奏

HI 大家好,我是 AWEI 首次參加IT邦鐵人賽,這次想透過 30 天的時間帶大家一起來認識 JavaScript ,至於為什麼會叫溫故知新JavaScri...

鐵人賽 Modern Web DAY 1
實作經典 JavaScript 30 系列 第 1

技術 Day01:開賽廢言與自我介紹

壓根都沒想到自己會跟【鐵人】這兩個字,有任何的關係。 本人真的超級三分鐘熱度,小時候學才藝都很容易半途而廢的類型... 不知道哪根筋不對,跑來參加鐵人賽,希望未...

技術 [鼠年全馬鐵人挑戰] Week16 - 超新手學前端 - 爆好用的視覺滾差:AOS

嗯 這週本來要來寫BS4的寫法 但.......... 這星期的切版直播班學到一個超好用的套件,真的讓我驚訝不已!!! 所以這週就先寫 AOS的筆記吧XDD A...

技術 [鼠年全馬鐵人挑戰] Week02 - 超新手小知識:HTML、CSS、JavaScript的關連性

Hi~大家 我們又見面啦:) 上星期那篇文章出乎我的意料的有很多人關注真的嚇歪我啦XDDD 謝謝大家對於我這個剛碰程式的新手小嫩嫩那麼大的支持呀~ 讓我有更多的...

技術 [鼠年全馬鐵人挑戰] Week01 - 非本科系零經驗超新手前端之路

在接觸程式前 在我的基本認知裡覺得程式碼真的是一個非常複雜的東西呀 這要本科系又是頭腦很好的神人才有辦法寫的吧XD 所以壓根沒想到之後的我會開始學習程式 至於...

徵才 [內科] 軟體開發公司徵才 -前端網頁工程師

軟體開發公司內部徵才 【前端網頁工程師/資深工程師】 工作地點:台北內湖科學園區瑞光路 工作時間:日班 9:30-18:00PM 薪資範圍:4萬~6.5萬/月(...

技術 旅館預約服務練習紀錄-訂房成功與失敗頁面

這次練習是訂房成功與失敗的頁面,兩者寫法幾乎相同,只是有地方更換了而已。 寫完好想出國啊!! 訂房成功頁面 要呈現的畫面如下: HTML 架構相當簡單,im...

技術 旅館預約服務練習紀錄-訂房確認頁面練習

這次要寫的練習紀錄是選定房間後會彈跳出來的視窗,但因為小弟 JS 還在學習中,還不會寫彈跳出來的互動行為,所以先把靜態頁面做練習,這次的練習使用到 BS4 框...

技術 旅館預約服務練習紀錄-訂房頁面練習

這次來要來寫上面的練習,訂房頁面會有的畫面。 先記錄左邊步驟,要寫下方畫面 HTML <div class="room__price&qu...

技術 RWD-off-canvas 側邊選單練習

這次來練習一個比較進階的練習,是 RWD + off-canvas 側邊選單練習 這次練習會使用到 jQuery 的 addClass 跟 removeCla...

技術 RWD 漢堡選單練習-讓漢堡顯示在 header 上

這次來練習響應式網站很常見到的漢堡選單 但漢堡選單要寫的內容有點長,就分段來記錄一下這個過程。 這次要顯示的內容如下圖 如果在 pad 尺寸顯示會如下 要...

鐵人賽 自我挑戰組 DAY 26
網頁學習紀錄 系列 第 26

技術 鐵人賽 Day26 首次參加六角學院同學會

今年最令我期待的活動之一-六角學院三週年同學會! 在二月中註冊了六角學院網頁設計師的課程,中間經歷了孩子誕生、陪伴太太坐月子、新手奶爸的生活... 就這樣過了七...

技術 人生第一篇程式的發文文章:為何開始學 React?

挑戰 React 第一篇 學習目的 從去年11月開始轉職當軟體工程師,主要都是在了解後端的知識,像是 mysql / php / laravel框架/ ngin...

鐵人賽 Modern Web DAY 13
鉄人28号FX 系列 第 13

技術 鉄人28号FX 鉄人13号「縮進盾」text-indent

★ 支線:地圖東南方林中村落 ↓↓↓ 顯示防具店位置圖 :您好。我想找?! NPC [防具店老闆]: 什麼都有,什麼都賣,什麼都不奇怪! 好盾,好鈍,好睏~~?...

鐵人賽 Modern Web DAY 11
鉄人28号FX 系列 第 11

技術 鉄人28号FX 鉄人11号「變體蟲」font-variant

★ 地圖近郊岩洞底層 ↓↓↓ 閱讀前,建議先前往 鉄人10号「幻影狐」獲取少量經驗值,此為岩洞口探索終章。 顯示岩洞層位置圖 好像不能再往前? 但牆柱上似乎隱約...

鐵人賽 Modern Web DAY 10
鉄人28号FX 系列 第 10

技術 鉄人28号FX 鉄人10号「幻影狐」font-style

★ 地圖近郊岩洞底層 ↓↓↓ 閱讀前,建議先前往 鉄人9号「修飾蝠」獲取少量經驗值,此為岩洞口探索續章。 顯示岩洞口位置圖 怦怦! 心跳聲。) 靜。 岩洞口 [...