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 組件化設計了兩個頁面組件：

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

經過此實例，你們須要注意實例中的以下幾個知識點：

1. React 組件的定義；
2. JSX 代碼的語法結構；
3. 組件屬性 state 的定義；
4. 組件經過 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 的核心以及高性能特性所在，具體的底層原理咱們會在後續的章節深刻講解。

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

1. 組件定義頭部使用 require 或 import 引入了一些必備的組件，後續 React 開發加載的第三方 npm 框架也使用此方法引入；
2. 組件 Index 中引入的子組件 BodyIndex 在頁面佈局中能夠直接按照 HTML 的標籤形式進行引用；
3. 子組件 BodyIndex 中經過 props 獲取父組件傳遞過來的屬性值；
4. 自身的屬性經過 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 框架的基本使用展開講解。