React快速入門教程

簡介

Facebook官網介紹：React 是一個用來構建用戶界面的 JavaScript 庫。相當于 MVC 架構的 V 層。

React 的核心思想是：封裝組件，各個組件維護自己的狀態和UI，當狀態變更，自動重新渲染整個組件。

React的優點（React為什么這么火？）：

組成　　

React構建界面的三要點：組件、路由、狀態管理。

React 的核心內容：JSX和虛擬 DOM。

一個最基本的 React 組件由數據和JSX兩個主要部分構成，我們先來看看數據。

這是一個簡單完整的React組件（類），props 主要作用是提供數據來源，可以簡單的理解為 props 就是構造函數的參數。 state 唯一的作用是控制組件的表現，用來存放會隨著交互變化狀態，比如開關狀態等。JSX 做的事情就是根據 state 和 props 中的值，結合一些視圖層面的邏輯，輸出對應的 DOM 結構。

在組件內部，可以通過this.props來訪問props

React的一大創新，就是把每一個組件都看成是一個狀態機，組件內部通過state來維護組件狀態的變化，這也是state唯一的作用。

傳統 Web App：是直接和DOM交互，由App來控制DOM的構建和渲染、元素屬性的讀寫、事件的注冊和銷毀等。

React Web App：是通過虛擬DOM來交互。虛擬DOM是在DOM的基礎上建立了一個抽象層，我們對數據和狀態所做的任何改動，都會被自動且高效的同步到虛擬DOM，最后再批量同步到DOM中。（渲染效率高）

React目前支持的事件列表：

生命周期

大體可以分為三個過程：初始化、更新和銷毀，在組件生命周期中，隨著組件的props或者state發生改變，它的虛擬DOM和DOM表現也將有相應的變化。

一、初始化：

解析：

1. 組件類在聲明時，會先調用 getDefaultProps() 方法來獲取默認props值，這個方法會且只會在聲明組件類時調用一次，這一點需要注意，它返回的默認props由所有實例共享。
2. 在組件被實例化之前，會先調用一次實例方法 getInitialState() 方法，用于獲取這個組件的初始state。
3. 實例化之后就是渲染，componentWillMount方法會在生成虛擬DOM之前被調用，你可以在這里對組件的渲染做一些準備工作，比如計算目標容器尺寸然后修改組件自身的尺寸以適應目標容器等等。
4. 接下來就是渲染工作，在這里你會創建一個虛擬DOM用來表示組件的結構。

對于一個組件來說，render 是唯一一個必須的方法。render方法需要滿足這幾點：

    1）只能通過 this.props 或 this.state 訪問數據

    2）只能出現一個頂級組件

    3）可以返回 null、false 或任何 React 組件

    4）不能對 props、state 或 DOM 進行修改

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！