reactjs源碼揭秘,react 代碼

本文目錄一覽：

• 1、React作為時下最熱的前端框架，各位有什麼經驗分享下嗎
• 2、如何在react中加入js源碼
• 3、如何利用React.js開發出強大Web應用
• 4、如何用reactjs構建一個完整的前端頁面
• 5、React.js 小書 – 介紹

React作為時下最熱的前端框架，各位有什麼經驗分享下嗎

1. 不要陷入糾結工具的怪圈

我們團隊一開始用 React 的時候，工具棧應該是 grunt +

grunt-react；寫了一段時間感覺有局限，然後老大帶頭把工具換成了 gulp + browserify + watchify +

reactify，然後又愉快的寫了大概半年吧，發現流行的庫都上 webpack 了；於是我們的工具棧又變成了 gulp + webpack +

babel-loader。最後大家一致認為 gulp 是多餘的，所以我們的工具棧又圍繞 webpack

重新搭建了一遍。到最近我負責的一個內部項目，什麼 hot-module-replacement、extract-text-plugin（讓你在

js 里 require(‘style.scss’); 這麼寫的玩意兒）一股腦的造。當然再後來因為業務需要我們又基於 webpack

搭建了自己的構建工具，這是後話……

這將近一年半的折騰歷史告訴大家，1) 前端就是個大坑，1個月不學新知識你就會被社區遺忘 2) 現在上 React 真幸福，工具棧基本都穩定了（什麼？你還不懂？用 webpack！），不用花太多時間糾結。

PS. HMR 也就那樣，雖然 dan 吹得神乎其神，但實際在項目里我發現大家還是習慣手動 Cmd + R

，因為項目大了以後 rebuild 也需要 1、2 秒。

2. DOM 操作是不可避免的

但

凡是上點兒規模的前端項目，沒有 DOM 操作基本是不可能的。且不說最常見的後端「埋點」，你總得用 DOM API

去取值吧；就說一個最簡單的，比如右手邊這個「回到頂部」的按鈕，你純用 React 寫一個試試。當然你會說什麼

requestAnimationFrame，什麼 ReactCSSTransitionGroup blah blah

blah，真正到項目里你會發現還是 DOM API 簡單。

3. 擁抱 ES 6，擁抱 React v0.14

這倆為什麼放在一起說呢？因為 React v0.14 里提出了一個全新的組件概念叫做：無狀態的函數式組件（Stateless functional components）。它大概長這樣：

var Aquarium = ({species}) = (

Tank

{getFish(species)}

/Tank

);

有沒有發現被傳統的 createClass 方法精簡了很多？當然這樣寫組件也有很多局限，比如不能聲明各種生命周期方法等等，但是在常見的前端業務場景中，純 render 的組件不在少數。在這樣的語法推出後，我們就能把這些組件更方便的抽出來複用了。

此外，擁抱 ES 6 還有很多的好處，比如在加載依賴的時候不用先 var xxx = require(‘xxx’); 再 var yyy = xxx.yyy; 而是可以直接 import {yyy} from ‘xxx’; 簡潔明了。

4. 生態環境仍然在成長中，坑不少

其

中首先要口誅筆伐一下的就是 react-router，我們從 v0.10 開始用，到現在

v1.0。你知道為了升級這玩意兒我們改了多少次業務代碼么？每次升級 API 都要變，無力吐槽。當年好不容易搞懂了

v0.11，在博客里寫了篇技術文章分享，結果後面的日子就是各種被催更……一個月前抽空就 0.13 版又重寫了一遍教程，這不 1.0

版又出了，API 基本全都不一樣了！！不一樣了！！一樣了！！樣了！

當然除了坑也有不少高質量的生態環境產品，比如螞蟻的 ant design。

5. Server 端渲染很美，至今沒看見哪個規模級的產品用到

可能是我孤陋寡聞吧，歡迎評論中跟進。自己摸索着寫過一個最簡單的 server 端渲染，但是這套邏輯如果套到我們現在的業務邏輯中，幾乎可以直接槍斃。為了實現 server 端渲染需要做出的 trade off 太多。

6. React 很簡單，也很難

簡單是因為 React 的 API 真的很少，官網的各種文檔花一個下午也能看個七七八八（此時此刻再看看 Angular……）。但是當你以為你真的搞懂 React 的時候，看看React 源碼剖析系列 － 解密 setState – pure render – 知乎專欄這篇文章開頭提的問題，有多少人能不假思索的答對呢？（順便安利一下，我們團隊的知乎專欄，目前處於死磕 React 的狀態）

當你真正在業務項目中使用 React 的時候，你會發現它的生命周期比你想象的複雜；它的 API 背後的邏輯比你以為的麻煩。當然，首先你要踩進這個坑。

7. 對於樓上某位仁兄表示《React：引領未來的用戶界面開發框架》這本書太難的回答，作為譯者之一表示對不起你。作為補償，所有購買本書的同學均可憑拍照私信我諮詢 React 相關的問題。

如何在react中加入js源碼

直接寫 react 只是有他的結構要求，而代碼很大部分都是直接用原生JS進行數據操作

如何利用React.js開發出強大Web應用

如果大家打算利用React.js創建一款應用程序，那麼各位無需完成整套工具設置即可在自己的瀏覽器當中輕鬆便捷地搞定原型設計。是的，其實際操作過程與我們的表述同樣簡單。舉例來說，如果大家決定利用可選JSX語法自行編寫組件，其編寫方式以及代碼內容看起來幾乎與HTML如出一轍。

作為開發第一步，我們首先需要製作一份簡單的文檔，其中同時包含React.js與JSX轉換工具。以下列代碼作為範例：

因此，當我們利用React.js創建一款應用程序時，必須要在Web應用開發中做出一項決策——各組件擁有怎樣的數據，這些數據的主來源又是什麼。一旦解決了這個問題，大家就能夠輕鬆完成應用創建的其它工作。

在這種情況下，我們只需要考量三種數據類型：

網絡數據

用戶輸入數據

預測數據

具體來參考以下示意圖：

其中網絡數據將由網絡及線路組件所獲取。其通常代表着大量數據，而且為了不影響應用的運行速度，大家需要在外部對其加以處理，而後再把結果交付至我們創建的應用。

組件通信機制

在這裡，數據被設計為自上而下貫穿整個組件結構，但大家有時候也需要以自下而上的方式逆向交付數據以實現應用程序交互性。在這種情況下，我們就需要利用特定的技術手段實現這種“數據逆流”。下面來看幾種實現此類目標的方式：

·大家可以選擇使用回調屬性的方式，這是最理想也最簡單的解決方案，因為此時組件只需要同其直接上游對象進行數據共享。React.js能夠自動對每個實例者組件方法綁定，因此維護工作不會佔用我們大量精力。下面來看具體示例：

如何用reactjs構建一個完整的前端頁面

用reactjs構建一個完整的前端頁面的步驟：

準備：React 的安裝包，建議去官網下載安裝

1、使用 React 的網頁源碼，結構大致如下：

!DOCTYPE htmlhtml  head    script src=”../build/react.js”/script    script src=”../build/react-dom.js”/script    script src=”../build/browser.min.js”/script  /head  body    div id=”example”/div    script type=”text/babel”      // **用戶代碼 **    /script  /body/html

上面代碼有兩個地方需要注意。

首先，最後一個 script 標籤的 type 屬性為 text/babel 。這是因為 React 獨有的 JSX 語法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type=”text/babel” 。

其次，上面代碼一共用了三個庫： react.js 、react-dom.js 和 Browser.js ，它們必須首先加載。其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，Browser.js 的作用是將 JSX 語法轉為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。

2、將 src 子目錄的 js 文件進行語法轉換，轉碼後的文件全部放在 build 子目錄。

$ babel src –out-dir build

3、渲染轉換成html節點，以方便操作dom：

ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。

這裡以插入hello world為例來說明

ReactDOM.render(  h1Hello, world!/h1,  document.getElementById(‘example’));

4、運行結果如下：

React.js 小書 – 介紹

在線閱讀：

這是一本關於 React.js 的小書。

因為工作中一直在使用 React.js，也一直以來想總結一下自己關於 React.js 的一些知識、經驗。於是把一些想法慢慢整理書寫下來，做成一本開源、專業、簡單的入門級別的小書，提供給社區。希望能夠幫助到更多 React.js 剛入門朋友。

由於水平有限，編寫的過程難免會有諸多錯誤，也希望大家在看的過程中發現了問題，可以在 Github 上給該項目發 Pull Request。衷心希望可以有更多的人參與到本書的編寫當中。

（本書的後續可能會做成視頻版本，敬請期待。）

本書為有一點前端基礎的並且是 React.js 零基礎的同學而作，幫助他們掌握 React.js 並且靈活地把 React.js 應用到實際項目當中。如果你有一定的 HTML、CSS、JavaScript 基礎並且希望學習 React.js，而又覺得 React.js 當中有些概念比難以接受和理解，希望能夠從零開始學習，那麼本書很適合你。但如果你已經對前端已經非常熟悉並且用過不少的前端框架和相關的組件化技術，建議你直接看官網文檔。

本書並不會文檔式地包含所有知識點，只會提煉實戰經驗中基礎的、重要的、頻繁的知識進行重點講解，讓你能用最少的精力深入了解實戰中最需要的 React.js 知識和套路，輕裝上路。如果需要更多更全面的知識點，可以參看更多的官方文檔或者其他豐富的資料。

另外，本書全書採用 ECMAScript 2015，閱讀之前請確保自己已經掌握了 ECMAScript 2015 的基本語法，否則閱讀起來會非常困難。

本書初定分為三個階段，每個階段最後會有實戰分析，把該階段的知識點應用起來。

第一個階段 ：希望能讓讀者掌握 React.js 的基本概念和基礎知識。包括問題的根源：前端組件的復用性問題、數據和視圖的同步問題。了解清楚問題以後再了解 React.js 的基礎知識，包括 JSX、事件監聽、state、props、列表渲染等。看看 React.js 是怎麼解決這些問題的。這個階段結束以後，讀者就可以可以運用 React.js 構建簡單的頁面功能。

第二個階段 ：讓讀者更進一步了解 React.js，包括組件生命周期及其含義、state 和 props 的進階概念、props 驗證及其意義、組件組合進階、如何和 DOM 打交道、並且開始引入前端應用狀態管理所存在的問題。

第三個階段 ：讓讀者掌握 React.js 較為高級的概念，包括高階組件、context。並且嘗試引入 React-router、redux 來協助我們構建較為完整的前端應用；還會開始深入討論前端應用狀態管理的問題。

第一個階段

[圖片上傳失敗…(image-623c7d-1510227273169)]

第二個階段

[圖片上傳失敗…(image-54e0d3-1510227273169)]

第三個階段

特別感謝以下朋友對本書所做的審校工作，給本書提出了很多寶貴的改進意見：

本作品採用 署名-禁止演繹 4.0 國際許可協議 進行許可