React快速入門教程

更新時(shí)間：2017年01月17日 15:32:05 作者：專注·精彩

本文主要介紹了React的相關(guān)知識(shí)，具有一定的參考價(jià)值，下面跟著小編一起來看下吧

簡介

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

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

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

組成　　

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

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

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

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

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

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

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

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

React目前支持的事件列表：

生命周期

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

一、初始化：

解析：

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

對(duì)于一個(gè)組件來說，render 是唯一一個(gè)必須的方法。render方法需要滿足這幾點(diǎn)：

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

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

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

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

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

您可能感興趣的文章: