SegmentFault 技術週刊 Vol.9 - 進階吧！React

時間 2019-11-05

標籤 segmentfault 技術週刊 vol.9 vol 進階 react 欄目 React 简体版

原文原文鏈接

上期週刊時，咱們提到接下來的幾期都將以 React 爲主題，層層引入，經過一個月的時間，完成對 React 的學習、升級、打怪直到本身成爲 boss 的全部過程。css

這一期，結束了入門（ Vol.8 - React，「5 分鐘快速入門」）以後，咱們從「一個簡單的組件」開始：前端

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>
  }
})
React.render(<HelloMessage name="John" />, mountNode)

將進階 React 之旅，分爲組件、進階思考、性能優化、Redux 及更具備實踐性的應用五個部分。react

深刻了解組件

leozdgao - 瞭解一個 React 組件webpack

先經過一個名爲 A Simple Component 的例子讓你初步接觸下 React 組件，從瞭解組件、建立組件到弄明白組件的生命週期，但願這能快速開啓你對組件的感知。git

dmyang - 譯丨React 組件的生命週期es6

基本上全部的 React 組件的生命週期方法均可以被分割成四個階段：初始化、掛載階段（mounting）、更新階段、卸載階段（unmounting）。這一次，讓咱們來近距離研究下各個階段，並找出開發過程當中容易被忽視的細節。github

nanges - React 組件數據流 && 組件間溝通web

使用 React，只有先知道如何傳遞數據，組件如何溝通，才能展現咱們想要的數據。本文列舉了組件交流過程當中使用到的幾種方式，但願能幫到你。面試

kpaxqin - React 進階 —— 使用高階組件（Higher-order Components）優化你的代碼算法

經過函數向現有組件類添加邏輯，就是高階組件。藉助函數的邏輯表現力，高階組件的用途幾乎是無窮無盡的。下次當你想寫 mixin 或 class extends 的時候，不妨也考慮下高階組件。

拓展閱讀

進階吧

戴嘉華 - 深度剖析：如何實現一個 Virtual DOM 算法

用 300~400 行代碼實現一個基本的 Virtual DOM 算法，這就是本文想要讓你學會的。此外，但願在閱讀本文以後，你不只對 Virtual DOM 的算法思路有一個清楚瞭解，還可以對現有的前端編程產生新的思考。

淡蒼 - 基於 Decorator 的組件擴展實踐

組件配置式的方法在業務變化的過程當中容易出現配置氾濫問題，從而使組件可維護性下降。近期項目，做者嘗試用組件組合式開發思想，有效地解決了配置式存在的問題，一塊兒來看看其思想的詳細闡釋和具體實踐過程吧。

Cam - Immutable 詳解及 React 中實踐

有人說 Immutable 能夠給 React 應用帶來數十倍的提高，也有人說 Immutable 的引入是近期 JavaScript 中偉大的事，但由於同期 React 太火，它的光芒被掩蓋了。不管哪一種評價，這至少說明 Immutable 是頗有價值的。讓咱們來一探究竟。

xile611 - React 實現 Table 的思考

Table 是最經常使用展現數據的方式之一，但是一個產品每每有不少很是相似的 Table，可是咱們碰到的狀況每每是 Table A 要排序，Table B 不須要……等這種看起來很是相似，可是又不徹底相同的表格。本文將會詳細的講述這種 Table 組件解決方案產出的過程和一些思考。

拓展閱讀

性能優化

當你開始接觸到一些比較複雜的應用，好比構建一個圖片分析器或者富文本編輯器，性能的瓶頸就是一個繞不過的坎。

grace_xhw - 譯丨React 性能工程（上）、（下） - 深刻研究 React 性能調試

這個系列譯文，將會講述使用 React 性能工具的一些基礎知識、一些會致使 React 渲染瓶頸的常見問題，以及一些須要謹記的調試方法。而後經過實現一個簡單版的 todo list，深刻研究調試的工做流，來一步步完成性能調優。

hepeguo - React 高級性能優化

官方文檔中譯版：經過減小 UI 更新須要的花費較大的 DOM 操做，來更進一步地優化響應和速度

使用 production 版本
避免更新 DOM
shouldComponentUpdate 實戰
Immutable-js 和 Flux

lcxfs1991 - React 移動 web 極致優化、騰訊新聞 React 同構直出優化實踐

手機 QQ 團隊使用 React 重構家校羣和騰訊新聞，經過項目實戰展現全面的性能優化策略、實踐方案和開發工具。很是值得拜讀。

Redux / Flux

Redux

Redux 是一個 JavaScript 應用狀態管理的庫，有一點和別的前端庫或框架不一樣，它不僅僅是一套類庫，它更是一套方法論，告訴你如何去構建一個狀態可預測的應用。這部分，來進一步瞭解 Rudux。

ustccjw - Redux 介紹

單頁面應用的痛點、Actions、Reducers 和 Store、Middleware、異步 Actions……本文主要是對 Redux 官方文檔的梳理，固然，也有很多做者自身對 Redux 的理解。

andyyu0920 - 從<琅琊榜>學 Redux

一篇頗有意思的文章，如聖旨般存在的 action、形似內閣的 action creator、有點像梁帝身邊的太監總管高湛的 store……本文根據電視劇《琅琊榜》的角色呈現，從另外一個角度來 Redux 的機制與運用。

程序猿小卡_casper - Redux 系列 01：從一個簡單例子瞭解 action、store、reducer 丨 02：一個炒雞簡單的 React+Redux 例子

01 部分，一個極簡單的倆字，讓你對 redux 產生感性的認識。02 部分，就會經過一個例子，理性地幫助你掌握如何將 redux 跟 react 應用結合起來。

Flux

Flux 是 Facebook 用來構建用戶端的 Web 應用程序的體系架構，與其它形式化的框架相比，它更像是一個架構思想，用於管理和控制應用中數據的流向。本模塊，一塊兒來熟悉 Flux。

meikidd - 譯丨Flux 入門

本文歸納性的介紹瞭如何使用 Flux 架構開發 JavaScript 應用，但願能用盡量少的篇幅讓你儘量多的熟悉 Flux 核心概念。

Jiavan - 淺談 Flux 架構及 Redux 實踐

看了 Flux 的定義，想必你和做者同樣，不是一臉懵逼，而是 N 臉懵逼。不過不慌，此類懵逼屬於 Taylor 展開懵逼，細看展開式就能夠。MVC、Flux 數據流框架……本文都介紹的很詳細。

kuitos - 我對 React Flux 架構的理解

Flux 是什麼？它的核心部分是什麼？改如何 Fulx？相比於 MVVM，Flux 又存在哪些優點劣勢，一篇做者對於 Flux 架構的理解，可拍磚可 star~

深刻學習

阿城 - 解析 Redux 源碼

做爲 React 全家桶的一份子，Redux 可謂說也是名聲響響，本文不說如何使用 Redux 的 API，而是經過閱讀 Redux 的源碼來學習它的使用以及思想。

shelbeniskb - Redux middleware 詳解

Redux 做者 Dan 對 middleware 的描述：「It provides a third-party extension point between dispatching anaction, and the moment it reaches the reducer.」

middleware 提供了一個分類處理 action 的機會，在 middleware 中你能夠檢閱每個流過的 action，挑選出特定類型的 action 進行相應操做，給你一次改變 action 的機會。

jafeney - 基於 Redux 架構的單頁應用開發總結

一個基於 React + Redux + React-Route 框架，利用 webpack 進行模塊化構建，前端編寫語言是 JavaScript ES6，利用 babel 進行轉換的項目開發及總結，但願經過這樣一個比較完善的項目，檢測你學習 Redux 過程當中的細節。

勞卜 - Redux 狀態管理方法與實例

如何利用 Redux 來管理你的 React 項目？在這裏，做者會和你介紹一下官方文檔中比較少出現，可是項目中卻必備的知識點，一個基於 React + Redux + React-Router 的方法。

拓展閱讀

項目與實踐

李偉鵬 - 實例講解基於 React+Redux 的前端開發流程

經過一個「蘋果籃子」實例，講解做者所定義的 React+Redux 開發流程：佈局組，靜態和動態，對專一於寫樣式佈局，大可能是基本的 HTML+CSS 工做；邏輯組，action 和 reducer，專一於開發應用邏輯，基本都是 JS 工做。分工獲得很是明確的規劃，各個部件的耦合性很低，任務安排靈活性比較大。