iT邦幫忙

react相關文章
共有 560 則文章

技術 React源碼 commit階段詳解

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

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

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

技術 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可以將...

技術 React中的優先級

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

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 30
I Want To Know React 系列 第 30

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

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

鐵人賽 Modern Web DAY 29
I Want To Know React 系列 第 29

技術 I Want To Know React - PropTypes & DefaultProps

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28
I Want To Know React 系列 第 28

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

技術 Day 27: Incremental build

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

鐵人賽 Modern Web DAY 27
I Want To Know React 系列 第 27

技術 I Want To Know React - Context 語法

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 27

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

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

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

鐵人賽 Modern Web DAY 26

技術 Day 26: 載入圖片

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

鐵人賽 Modern Web DAY 26
I Want To Know React 系列 第 26

技術 I Want To Know React - 初探 Context

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

技術 Day 25: Static Query

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

鐵人賽 Modern Web DAY 25
I Want To Know React 系列 第 25

技術 I Want To Know React - Composition vs Inheritance

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

鐵人賽 Software Development DAY 26

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

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

鐵人賽 Modern Web DAY 27

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

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