原文地址:https://zhuanlan.zhihu.com/p/...,歡迎轉載 :-) ? 關於 其實對於這個專欄的訂閲用户感到非常抱歉,已經停更很久了,也沒啥特別的理由就是懶 orz!不對,畫風不能這樣開頭,是這樣的,我覺得我應該用 React 去做點兒什麼,寫文章能夠清晰我的思路,讓我和別人有交流,但是並沒有實際做產品那麼性感,於是我決定要用 React 來做一些產品出來,於是就
react tricks 編輯中。。。 React 自身提供的 API 並不多,但總有一些比較 trick 的 API 和點是平時可能忽略的,本節將列舉一下相關的點。 setState setState function param setState 延遲 ref ref as funct
書籍完整目錄 4.2 react patterns 修改 Props Immutable data representation 確定性 在 getInitialState 中使用 props 私有狀態和全局事件 render 包含 side effects
書籍完整目錄 4.1 react 代碼規範 關於 基礎規範 組件結構 命名規範 jsx 書寫規範 eslint-plugin-react 關於 在代碼的設計上,每個團隊可能都有一定的代碼規範和模式,好的代碼規範能夠提高代碼的可讀性便於協作溝通,好的模式能夠上層設計上避免不必要的 bug 出現。本節會參考社區提供一些
書籍完整目錄 3.5 compose redux sages 基於 redux-thunk 的實現特性,可以做到基於 promise 和遞歸的組合編排,而 redux-saga 提供了更容易的更高級的組合編排方式(當然這一切要歸功於 Generator 特性),這一節的主要內容為: 基於 take Effect 實現更自由的任務編排 fork 和 cancel 實現非
書籍完整目錄 3.4 redux 異步 在大多數的前端業務場景中,需要和後端產生異步交互,在本節中,將詳細講解 redux 中的異步方案以及一些異步第三方組件,內容有: redux 異步流 redux-thunk redux-promise redux-saga 3.4.1 redux 異步流 前面講的 redux 中的數據流都是同步的,
書籍完整目錄 3.3 理解 Redux 中間件 這一小節會講解 redux 中間件的原理,為下一節講解 redux 異步 action 做鋪墊,主要內容為: Redux 中間件是什麼 使用 Redux 中間件 logger 中間件結構分析 applyMiddleware 中間件的執行過程 3.3.1 Redux 中間件是什麼
書籍完整目錄 3.2 Redux TodoApp 上一節講完了 redux 中的概念,但是仍然沒有和 react 聯繫起來,這一節 將利用 redux 在 react 中實現完整的 todolist: 在 react 使用 redux 通過 Provider 連接 react 和 redux store 創建 action creators
書籍完整目錄 3.1 開始使用 redux 前面我們介紹了 flux 架構以及其開源實現 redux,在這一節中,我們將完整的介紹 redux: redux 介紹 redux 是什麼 redux 概念 redux 三原則 redux Stores redux Action
書籍完整目錄 2.5 webpack 進階 配置分離 code splitting 異步加載 理解 webpack chunk webpack 調試 2.5.1 配置分離 在大型項目中,可能 webpack.config.js 會變得越來越臃腫,這個時候可以利用做 webpack-merge 插件。將配置定義在一個目錄下面的不同文件中,然
書籍完整目錄 2.4 webpack + gulp 構建完整前端工作流 在前面的兩個小節中已經完整的講了 webpack 和 gulp 相關的內容,本小節中將會結合二者構建一個完整的前端工作流,內容目錄為: 前端工程結構和目標 前端工程目錄結構 gulp clean gulp copy gulp less gulp au
書籍完整目錄 2.3 Gulp 在前端工程化中最重要的就是流程管理,借用 gulp 可以很方便的基於流的方式定義流程任務,並將任務串聯起來,本節中將詳細介紹 gulp ,包括: gulp 介紹 gulp 是什麼 gulp 能夠解決哪些問題 gulp 核心思想和特點 gulp 安裝
書籍完整目錄 2.2 webpack 這一節中我們將系統的講解 webpack ,包括: webpack 介紹 webpack 是什麼 為什麼引入新的打包工具 webpack 核心思想 webpack 安裝 webpack 使用 命令行調用
書籍完整目錄 2.1 前端工程化概述 在前端開發的初始階段,開發者通常只用關 html, css, javascript。但是現代化的前端開發已經不僅僅是業務代碼本身,真正的前端開發環境涉及很多方面的需求,如: 開發需求 共享需求 性能需求 部署需求 這些東西我們都統一的叫做前端工程化,為了簡化前端工程化的配置,出現了很多優秀的工具比如:
書籍完整目錄 1.6 flux 這一節將介紹 React 的核心應用架構模式 Flux,包括內容: Flux 介紹 MVC 架構之痛 Flux 的理解 Flux 相關庫和工具介紹 Flux 與 React 實例 最後我們將會把之前的 TODOMVC 改為 Flux 的架構。 1.6.1 Flux 介紹 簡單來講,Flux 是
書籍完整目錄 1.5 React 與 DOM 在這一節中,主要的討論範圍為 React 與 DOM 相關的處理,包括: 如何獲取 DOM 元素 如何做事件響應處理 表單處理 style 屬性 這節講述過後,我們將會為 TODO 應用添加完整的事件響應,包括新增,刪除,標記完成等。 1.5.1 獲取 DOM 元素 上一節我們已經講過組件的生
書籍完整目錄 1.4 React 組件生命週期 官方文檔 1.4.1 組件 React 中組件有自己的生命週期方法,簡單理解可以為組件從 出生(實例化) - 激活 - 銷燬 生命週期 hook。通過這些 hook 方法可以自定義組件的特性。 除此之外,還可以設置一些額外的規格配置。 這些生命週期方法都可以在調用 React.createClass 的參數對象中傳入, 我們已經使用過
書籍完整目錄 1.3 React 組件 1.3.1 React 組件介紹 在 React 中組件是第一元素,是 React 的基礎,一個 React 應用就是基於 React 組件的組合而成。 前面的 JSX 練習過後,大家應該對 React 組件不陌生了,在這一節我們將温習以及深入學習 React 組件。 1.3.2 創建一個 React 組件 創建一個 React 組件的方法為,
書籍完整目錄 1.2 JSX 語法 官方文檔 https://facebook.github.io/react/docs/jsx-in-depth.html JSX 語法聽上去很討厭,但當真正使用的時候會發現,JSX 的寫法在組件的組合和屬性的傳遞上提供了非常靈活的解決方案。 在學習本節的時候,希望讀者在閲讀的同時能夠實際編碼體驗 JSX ,寫代碼的意思是真的要寫.代.碼。 1.2.
Lean React 目前本書正在撰寫過程中,將這個目錄結構先發出來,希望能得到更多讀者的反饋,有興趣的朋友可以回覆訂閲更新 關於 應該是在 2013 年我還在天貓的時候,在一次團隊會議中 Teamleader 邀請了來自 Facebook 的前端工程師來分享他們的開發棧,其中就有提到 React,當説到它有自己的獨特語法的時候(JSX 語法),我對此不屑一顧,認為這樣的前端框架只會曇花一現,頂