總結了以下幾個方面在react上的效能優化 常見的效能問題場景 時刻注意程式碼的潛在效能問題 注意可重構的程式碼，元件化 瞭解如何使用工具定位效能問題

React-Navigation 前端架構 準備 /*安裝元件*/ npm install --save react-navigation npm install --sa

背景 Ink 是 React 在命令列中渲染系統的一個實現, 在 GitHub 上已經有 1w+ Star. 看著蠻好玩, 因此嘗試著寫了一個五子棋遊戲, 經過若干天的划水, 終於初見成效了! 先來

先來說說react搭建： 1 官方文件上也有提供直接下載react包，但是修改webpack配置比較麻煩 npx create-react-app my-app cd my-app npm start

在此之前，不瞭解 HoC 的同學請看高階元件 - React，不瞭解 Render Props 的同學請看Render Props - React，都是官方文件，我貼的都是翻譯連結。 總的來

在使用 React 的過程中，不可避免的需要元件間進行訊息傳遞（通訊），元件間通訊大體有下面幾種情況： 父元件向子元件通訊 子元件向父元件通訊 跨級元件之間通訊 非巢狀元件

在 JavaScript 中物件和函式是怎麼被引用好像不被人重視的，但它卻直接影響了 React 的效能。假設你分別創造了兩個完全相同的函式，它們還是不相等的。如下： const functionOne =

這個是模仿ant design的Tabs控制元件，當切換tab時，下面的藍色條滑過的效果。 點選檢視效果 我只是封裝了tab的頭部標籤，並沒有包含內容部分。 我的最終結果 相關技術

最近對前端動畫方案做了一些調研，想找到一個簡單且易複製的方案在React元件中使用(也就是用複製貼上解決80%的問題），最終選擇官方的 react-transition-group 加 animate.css

背景 在 Hook 出現之前，為實現一個計數器的功能，我們最常用的做法是在react class 的建構函式中宣告一個 count的狀態變數，然後通過在點選事件中呼叫 this.setStat

一、技術選型 語言選擇： JavaScript TypeScript 最終選擇了JavaScrip

在React寫應用的時候，難免遇到跨元件通訊的問題。現在已經有很多的解決方案。 React本身的Context Redux結合React-redux Mobx結合mobx-react

每次都信誓旦旦的給自己立下要好好學習react原始碼的flag，結果都是因為某個地方卡住了，或是其他原因沒看多少就放棄了。這次又給自己立個flag-堅持看完react 原始碼。為了敦促自己，特開設這樣

前面已經實現了一個簡單webpack配置，接下來需要在前面的基礎上對 webpack.config.js 進行拆分。 第二章 拆分webpack配置 專案開發時，我們需要用 webpack-dev

為什麼會提到一個抽象元件的概念，其實我們稱其為高複用元件更好，因為其實在業務開發中很多時候會有這樣的場景，我們的某部分功能是可以共用給其他部分的，但這部分又不太可能脫離元件或者某個基準資料存在。於是，我們需要將