iT邦幫忙

reactjs相關文章
共有 415 則文章

技術 【前端 HTML/JSX】在Input框內部加上Icon?除了使用Bootstrap、Semantic或Material-UI之外你還可以這麼做

相信像下列的輸入框需求,在前端開發的時候很容易遇到 菜鳥前端的第一直覺大概就會想要這樣寫... 把icon的部分直接放在 <input>裡面 &l...

技術 React源碼 commit階段詳解

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

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

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

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

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

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

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

技術 深入理解React Diff算法

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

技術 React狀態計算解密

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

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

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

技術 React中的優先級

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

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

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

在 Calculator 中 添加兩個 method handleCelsiusChange / handleFahrenheitChange 用來設定 Cal...

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 18

技術 仿Trello - 串接Unsplash API

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 16

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

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