此系列文章將整合我的 React 視頻教程與 React Native 書籍中的精華部分，給大家介紹 React 與 React Native 結合學習的方法，此小節主要介紹 React 的底層原理與機制。 ...

此系列文章將整合我的 React 視頻教程與 React Native 書籍中的精華部分，給大家介紹 React 與 React Native 結合學習的方法，此小節主要介紹 React 的底層原理與機制。

目前 React 可以說是前端世界最火熱的框架，具有高性能以及容易上手的特性，而且在掌握了 React 框架後，再學習其他類似 React 的框架也將變得更易上手。

關於 React 框架的高性能原因以及底層的重要概念，我們在後續的章節會陸續展開探討，這一章節我們先來通過一個實際的案例來探究 React 的重要概念與特性。

如果你對 React 框架已非常熟悉，可以選擇性地跳過此章節，直接閱讀後續章節即可。

1. React 框架的安裝

學習 React 框架，我們可以通過如下幾種方式搭建開發環境進行快速地學習。

1.1 使用線上代碼編輯器編寫學習

線上編輯器中可以靈活地切換 React 的版本以及選擇 Babel 作為 JSX 代碼到 JavaScript 的預處理轉換。
如官方推薦的線上代碼編輯器 React 環境：CodePen。

1.2 本地開發環境的搭建

1.2.1 安裝 Node.js

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。 Node.js 的包管理器 npm，是全球最大的開源庫生態系統。

Node.js 本身不是一個新的開發語言，也不是一個 JavaScript 框架，而是一個 JavaScript 的運行時。底層為 Google Chrome V8 引擎，併在此基礎上進行了封裝，可用於創建快速、高效、可擴展的網路應用。Node.js 採用事件驅動與非阻塞 I/O 模型，以使得 Node.js 輕量並高效。

Node.js 中包含了 npm 系統，npm 是 Node.js 的包生態系統，是最大的開源生態系統。你可以理解為基於 Node.js 框架，全世界的開發者提交了各種各樣的功能類庫到 npm 中，其他開發者在開發過程中需要使用的大部分功能都可以在 npm 中找到已存在的庫，完全不需要自己再重覆去“造輪子”。

Node.js 框架的安裝只需要去 Node.js 官網下載你對應平臺的安裝包直接安裝即可。

1.2.2 安裝官方腳手架項目

create-react-app 腳手架項目存在於 npm 包系統中，所以可以直接通過 npm 命令在命令行工具中進行安裝。

npm install -g create-react-app

之後即可通過命令行進行 React 項目的初始化。

create-react-app your-app-project-name

2. React 中的 JSX、state 與 props

JSX、state 與 props 是 React 框架最重要最基礎的三個知識點，而從根本上說，你在掌握了這三個知識點後就可以使用 React 進行項目的開發了，其他的知識點基本上翻看下文檔就可以快速掌握。

2.1 組件實例設計介紹

下麵我們通過 React 組件化設計了兩個頁面組件：

入口組件定義為 Index；
Index 組件中載入了一個子組件，定義為 BodyIndex；
Index 組件會向 BodyIndex 組件中傳遞兩個參數：id 和 name；
BodyIndex 組件中還有一個自身的屬性 username，並會在組件載入 5 秒後自動修改定義的值。

通過此實例，大家需要註意實例中的如下幾個知識點：

React 組件的定義；
JSX 代碼的語法結構；
組件屬性 state 的定義；
組件通過 props 傳遞參數的方法。

2.2 組件實例代碼實現

2.2.1 組件 Index 的代碼實現

/**  
* index.js 定義了 React 項目的入口，Index 組件 
*/    
      
var React = require('react');    
var ReactDOM = require('react-dom');    
import BodyIndex from './components/bodyindex';    
class Index extends React.Component {      
      
    //頁面表現組件渲染    
    render() {    
        return (    
            <div>    
                <BodyIndex id={1234567890} name={"IndexPage"}/>    
            </div>    
        );    
    }    
}    
      
ReactDOM.render(<Index/>, document.getElementById('example'));

2.2.2 子組件 BodyIndex 的代碼實現

/**  
* bodyindex.js 定義了一個 BodyIndex 子組件  
*/    
      
import React from 'react';    
export default class BodyIndex extends React.Component {    
    constructor() {    
        super();    
        this.state = {    
            username: "Parry"    
        };    
    }    
      
    render() {    
        setTimeout(() => {    
            //5秒後更改一下 state    
            this.setState({username: "React"});    
        }, 5000);    
      
        return (    
            <div>    
              
                <h1>子組件頁面</h1>    
              
                <h2>當前組件自身的 state</h2>    
                <p>username: {this.state.username}</p>    
              
                <h2>父組件傳遞過來的參數</h2>    
                <p>id: {this.props.id}</p>    
                <p>name: {this.props.name}</p>    
          
            </div>    
        )    
    }    
}

2.3 組件實例的頁面表現與代碼解釋

瀏覽器中的運行效果如下圖所示，並且在 5 秒後子組件的 state 定義的 username 值由 Parry 變成了 React。

你可以直接在本地編寫代碼運行測試或直接下載配套源碼直接運行，運行後，註意此 state 頁面值更新的部分，整個頁面沒有進行任何的重新刷新載入，而只是進行了局部的更新。

註意這裡的局部更新你可能想到了熟悉的 Ajax 頁面無刷新的更新操作，但是邏輯代碼部分沒有進行任何的頁面 DOM 元素操作，而這正是 React 的核心以及高性能特性所在，具體的底層原理我們會在後續的章節深入講解。

對於實例代碼中幾個重要知識點的解釋：

組件定義頭部使用 require 或 import 引入了一些必備的組件，後續 React 開發載入的第三方 npm 框架也使用此方法引入；
組件 Index 中引入的子組件 BodyIndex 在頁面佈局中可以直接按照 HTML 的標簽形式進行引用；
子組件 BodyIndex 中通過 props 獲取父組件傳遞過來的屬性值；
自身的屬性通過 state 進行定義，頁面的顯示也直接通過 state 進行綁定，而後續在邏輯函數中修改了 state 值之後，頁面綁定的值也會隨之變更，並且變更的過程頁面完全是無刷新的，這正式 React 框架的重要特性，頁面的所有變更都是通過 state 值的變更驅動的。

以上完整代碼你可以在 JueJin-Book-React-Native-Demo 處下載。

系列文章其他相關資源

我的「React.js 入門與實戰」視頻教程：http://coding.imooc.com/class/83.html

我的《React Native 精解與實戰》書籍：http://rn.parryqiu.com/

我的更多免費原創視頻教程：https://devopen.club/

3. 小結

此章節和大家一起通過對 React 開發環境的構建以及一個實際的組件實例學習了 React 中最基礎的三個概念：JSX、state 與 props，並領略到 React 構建的頁面更新完全是通過後臺 state 值的變更驅動的，這有別於我們之前接觸的前臺框架，是通過直接操作 HTML DOM 結構進行頁面的更新。

而 React 框架這樣設計的優勢以及背後的底層原理，我們在接下來的幾個章節會進行逐步深入地探討，以便切合此系列文章的定位，而在使用 React 開發過程中遇到的任何其他細節問題，你都可以通過下方的留言向我提問即可，這裡限於篇幅就不對 React 框架的基本使用展開講解。

React 與 React Native 底層共識：React 是什麼