React<二>入門

前言

這是一篇打基礎的文章，經過本文的基礎學習，會發現打開了新世界的大門，要實現如下幾個目標

1. react中文官方文檔學習

2. 邊學邊練

3. 探索學習資源

---

學習一門技術的最快的方式就是看它的文檔，跑官方的demo.

快速開始

我使用chrome瀏覽器，在分離文件時，文檔中說要經過http服務，linux下能夠建立軟鏈，因而我在在服務器的網站目錄下，軟鏈到了如今的項目，這樣就能繼續使用這個項目的目錄，同時又能跑在http服務上。

ln -s /Users/wang-xuan/project/react /XAMPP/xamppfiles/hthocs/react

-s 後面是源文件路徑 最後是目標文件路徑

提升開發效率

1.sublime設置
若是你是有的是sublime,並且對它還有一些小小的不滿意，能夠設置一下，
推薦一篇設置文章：Sublime Text3 - 實用設置

2.React調試工具
chrome和firefox都有調試工具，用起來很方便。

教程

資源加載

1. 爲了每次訪問沒必要由於加載資源而太耗時，把資源都加載到本地文件
   

2. 使用marked是發現資源報錯，引入文檔中的marked資源便可

3. 編寫假接口，api數據放在：public/api.comments
   引用： <CommentBox url="./api/comments" />

總結

1. 頁面數據
   顯示在頁面上的變量有兩種，一種是由父級控制的，一種是由本身的

   • props引用自父級，能夠是變化的值，父級控制着數據變更；也能夠是不變的。

   • state控制在本級，由組件本身控制狀態變化

2. 獲取頁面變動
   因爲React建立的是虛擬DOM,在DOM樹建立完後才能引用，用refs來引用DOM,追蹤文檔變化。

3. 事件掛載
   事件應該掛載到最底層的公共父節點，例如要讓CommentForm的改變反映到CommentList,則把控制處理掛載到CommentBox上，能夠經過子組件的事件回調調用這個父級掛載的事件來實現邏輯控制。

實戰進展

真正本身去編寫代碼纔能有真正的成長，沒有其它人能夠代替你，選擇一個本身感興趣的小功能去親自實戰吧，個人實戰能夠做爲你的參考。

在教程中學習了組件的解偶及事件的合適掛載位置,將它應用在實戰中：

1. 先寫總體的靜態結構，組件解偶，不要讓一個組件負責全部的事，拆分紅父子結構更合理。

2. 考慮數據如何傳遞，數據應該屬於本身控制仍是伏擊控制，數據變化源在哪裏，沿着數據流動方向寫數據傳輸事件。

我重構了React<一>初接觸的簡歷小管家

深刻理解 React

總結

項目的構建過程

1. 劃分組件，肯定最小組件單元

2. 編寫靜態結構

3. 肯定state有哪些，在哪裏建立

4. 編寫反向數據流

問題

• SearchBar的渲染並非基於ProductTable的，它的數據爲何要受ProductTable的控制，應該去掉ProductTable向SearchBar的數據流

實戰進展

1. 對着本身的應用從新走一遍官網中的流程，並做出相應的改進

2. 看看應用有沒有刻意增長的功能，
   我給簡歷小管家新增了搜索功能

爲何使用React

構建隨着時間數據不斷變化的大規模應用程序

數據呈現

數據呈現的理念

React最大的特色就是虛擬DOM，萬不得已不會操做真實DOM，主要是經過數據來改變頁面的顯示，頁面分割爲若干個組件，每一個組件只能渲染單個根節點，接受 props 和 state 來控制數據。

語法

React用JSX語法，能夠用 HTML 語法去寫 JavaScript 函數調用。
咱們把單一的功能單元拆分爲組件，在組件中能夠用HTML的語法直接建立節點，如：<a href="http://facebook.github.io/react/">Hello React!</a>

深刻理解 JSX

JSX 里約定分別使用首字母大、小寫來區分本地組件的類和 HTML 標籤。

轉換

JSX 把類 XML 的語法轉成純粹 JavaScript

var Nav, Profile;
// 輸入 (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// 輸出 (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

JavaScript 表達式

用｛｝包圍，能夠是變量、表達式、子節點和註釋

表達式

var person = <Person name={window.isLoggedIn ? window.name : ''} />;

子節點

var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;

註釋

{/* 通常註釋, 用 {} 包圍 */}

實戰進展

簡歷小管家規範化註釋

JSX的延展屬性

若是想要對props屬性進行修改和擴展
很差的方式：

var component = <Component />;
component.props.foo = x; // 很差

好的方式：

var props = {};
props.foo = x;
var component = <Component {...props} />;

JSX 的陷阱

JSX 的文本中能夠直接使用HTML實體，

<td>&middot;已投遞公司</td>

可是要在表達式中傳遞實體會有問題

// 錯誤: 會顯示 「First · Second」
<div>{'First &middot; Second'}</div>

4種解決方法：

1. 直接用 Unicode 字符

2. 找到 實體的 Unicode 編號，在 JavaScript 字符串裏使用

3. 混合使用字符串和 JSX 元素

4. 直接使用原始 HTML

富交互性的動態用戶界面

事件處理

用React寫事件是基本不用作兼容性處理的，也不用給組件的事件處理綁定this，由於它的底層已經處理好了，並且很高效。
一切變化的數據源頭都是state來控制的，this.state 應該僅包括能表示用戶界面狀態所需的最少數據

複合組件

複合方式

父組件中經過render返回子組件的方式，將自組件複合起來，Parent 能經過專門的 this.props.children props 讀取子級。

子級校訂及key的意義

什麼是子級校訂

校訂就是每次 render 方法調用後 React 更新 DOM 的過程。
例如先有3個dom：一、二、3，通過事件處理，要變爲二、3，該如何校訂呢？直觀上是刪除1，實際是一、2-－》二、3，而後刪除3，
能夠經過隱藏組件而不是刪除它們來繞過這些問題。

key的意義

經過給子級設置唯一標識的 key，會確保它們被從新排序（而不是破壞）或者刪除（而不是重用）。
key的正確應用格式：把 key 添加到子級數組裏組件自己上，而不是每一個子級內部最外層 HTML 上

// 錯誤！
// 子組件ListItemWrapper中
return <li key={this.props.data.id}>{this.props.data.text}</li>;
// 正確 :)
// 父組件生成子組件時
 return <ListItemWrapper key={result.id} data={result}/>;

性能

父級控制數據變化，經過props傳遞給子組件的過程是一個遍歷子組件的過程，自己性能就很好，還能夠經過shouldComponentUpdate() 方法返回 false ，來跳過一些子組件提升性能

可複用組件

複用是一項很是有用的技術，React組件爲複用提供了簡單、安全的方式，能夠設置默認值，還能夠對數據進行校驗，還能夠實現組件及邏輯的複用

Mixins

當一些組件須要共用一些耗性能的邏輯，咱們但願這個通用的邏輯只存於調用這段邏輯的生命週期，Mixins能夠作到！

傳遞 Props

React以組件的形式進行封裝，用props來進行數據間的傳遞。
從上層傳遞過來的屬性有兩種用途

1. 本層使用
   2，繼續傳遞供子層使用

若是上層傳遞過來的屬性有不少，向下傳遞的屬性也不少，一個一個傳遞事不現實的，須要批量傳遞，批量的同時又要摘除本層使用的屬性。
解決方法

1. 在 JSX 裏使用 ... 傳遞，能夠實現批量

2. 解構賦值模式能夠實現摘除屬性

表單組件

在剛開始寫React的表單時會感受奇怪，設置了value後沒法在表單中輸入值，react因爲自身的限制：node.getAttribute('value')一直是初始值，值不能改變。
因而，組件分爲受限的和不受限的，受限的能夠經過onChange事件來改變值。
另外的特別之處是：React經過default...來設置默認值。

瀏覽器中的工做原理

DOM

React是很快的，由於它從不直接操做DOM。React在內存中維護一個快速響應的DOM描述。render()方法返回一個DOM的描述，React可以利用內存中的描述來快速地計算出差別，而後更新瀏覽器中的DOM。
經過Refs和findDOMNode()調用已掛載的DOM

生命週期

關於Refs的更多內容

不要試圖操做虛擬DOM，過Refs和findDOMNode()操做已掛載的DOM。

工具和插件

找本身感興趣的進行探究
工具集成（Tooling Integration）
插件

學習資源推薦

精益 React 學習指南 （Lean React）
React 學習指南及前端乾貨
天天都實戰一個React-Native項目
小菜鳥如何系統性學習React？

相關博客

React<一>初接觸