簡介

Facebook官網(wǎng)介紹：React 是一個用來構(gòu)建用戶界面的 JavaScript 庫。相當(dāng)于 MVC 架構(gòu)的 V 層。

React 的核心思想是：封裝組件，各個組件維護(hù)自己的狀態(tài)和UI，當(dāng)狀態(tài)變更，自動重新渲染整個組件。

React的優(yōu)點（React為什么這么火？）：

組成　　

React構(gòu)建界面的三要點：組件、路由、狀態(tài)管理。

React 的核心內(nèi)容：JSX和虛擬 DOM。

一個最基本的 React 組件由數(shù)據(jù)和JSX兩個主要部分構(gòu)成，我們先來看看數(shù)據(jù)。

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

在組件內(nèi)部，可以通過this.props來訪問props

React的一大創(chuàng)新，就是把每一個組件都看成是一個狀態(tài)機(jī)，組件內(nèi)部通過state來維護(hù)組件狀態(tài)的變化，這也是state唯一的作用。

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

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

React目前支持的事件列表：

生命周期

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

一、初始化：

解析：

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

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

    1）只能通過 this.props 或 this.state 訪問數(shù)據(jù)

    2）只能出現(xiàn)一個頂級組件

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

    4）不能對 props、state 或 DOM 進(jìn)行修改

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論