簡介

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

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

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

組成　　

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

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

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

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

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

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

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

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

React目前支持的事件列表：

生命周期

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

一、初始化：

解析：

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

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

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

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

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

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

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

最新評論