React是什么？React用來做什么？

猿友 2020-12-16 17:54:36 瀏覽數 (8260)

反饋

React 介紹

React是由Facebook（臉書）開源的一個進行創(chuàng)建用戶界面的一款JavaScript庫，如今已應用于Facebook及旗下的Instagram應用。

React與龐大的AngularJS不同的地方在于它只專注于MVC框架中的V，即視圖；這點使得React很容易與開發(fā)者已有的開發(fā)棧進行融合。

React在使用的時候，你應該從UI出發(fā)，抽象出不同的組件，繼而將它們拼裝起來；這點順應了Web開發(fā)組件化的趨勢。

React應用

React 的核心思想是：封裝組件。

各個組件維護自己的狀態(tài)和UI，當狀態(tài)變更，自動重新渲染整個組件。

基于這種方式的一個直觀感受就是我們不再需要不厭其煩地來回查找某個 DOM元素，然后操作 DOM 去更改 UI。

React 大體包含下面這些概念：

組件
JSX
Virtual DOM
Data Flow

這里通過一個簡單的組件來快速了解這些概念，以及建立起對 React 的一個總體認識。

import React, { Component } from 'react';

import { render } from 'react-dom';

class HelloMessage extends Component {

render() {

return <div>Hello {this.props.name}</div>;

}

// 加載組件到 DOM 元素 mountNode

render(<HelloMessage name="John" />, mountNode);

組件

React 應用都是構建在組件之上。

上面的 HelloMessage 就是一個 React構建的組件，最后一句 render 會把這個組件顯示到頁面上的某個元素 mountNode 里面，顯示的內容就是 <div>Hello John</div>。

props 是組件包含的兩個核心概念之一，另一個是 state（這個組件沒用到）?？梢园?nbsp;props 看作是組件的配置屬性，在組件內部是不變的，只是在調用這個組件的時候傳入不同的屬性（比如這里的 name）來定制顯示這個組件。

JSX

從上面的代碼可以看到將 HTML 直接嵌入了 JS 代碼里面，這個就是 React 提出的一種叫 JSX 的語法，這應該是最開始接觸 React 最不能接受的設定之一，因為前端被“表現和邏輯層分離”這種思想“洗腦”太久了。但實際上組件的 HTML 是組成一個組件不可分割的一部分，能夠將 HTML 封裝起來才是組件的完全體，React 發(fā)明了 JSX 讓 JS 支持嵌入 HTML 不得不說是一種非常聰明的做法，讓前端實現真正意義上的組件化成為了可能。

好消息是你可以不一定使用這種語法，后面會進一步介紹 JSX，到時候你可能就會喜歡上了?，F在要知道的是，要使用包含 JSX 的組件，是需要“編譯”輸出 JS 代碼才能使用的，之后就會講到開發(fā)環(huán)境。

Virtual DOM

當組件狀態(tài) state 有更改的時候，React 會自動調用組件的 render 方法重新渲染整個組件的 UI。

當然如果真的這樣大面積的操作 DOM，性能會是一個很大的問題，所以 React 實現了一個VirtualDOM，組件 DOM 結構就是映射到這個 Virtual DOM 上，React 在這個 Virtual DOM上實現了一個 diff 算法，當要重新渲染組件的時候，會通過 diff 尋找到要變更的 DOM 節(jié)點，再把這個修改更新到瀏覽器實際的DOM 節(jié)點上，所以實際上不是真的渲染整個 DOM 樹。這個 Virtual DOM 是一個純粹的 JS 數據結構，所以性能會比原生 DOM 快很多。