React怎么應用

這篇文章主要介紹“React怎么應用”，在日常操作中，相信很多人在React怎么應用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React怎么應用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

React 介紹

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

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

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

React應用

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

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

基于這種方式的一個直觀感受就是我們不再需要不厭其煩地來回查找某個 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（這個組件沒用到）。可以把 props 看作是組件的配置屬性，在組件內部是不變的，只是在調用這個組件的時候傳入不同的屬性（比如這里的 name）來定制顯示這個組件。

JSX

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

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

Virtual DOM

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

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

Data Flow

        “單向數據綁定”是 React推崇的一種應用架構的方式。當應用足夠復雜時才能體會到它的好處，雖然在一般應用場景下你可能不會意識到它的存在，也不會影響你開始使用React，你只要先知道有這么個概念。

到此，關于“React怎么應用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！