<listing id="r7f1v"></listing>
<listing id="r7f1v"><var id="r7f1v"></var></listing><listing id="r7f1v"><cite id="r7f1v"><i id="r7f1v"></i></cite></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<thead id="r7f1v"><cite id="r7f1v"></cite></thead>
<listing id="r7f1v"></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<progress id="r7f1v"><var id="r7f1v"></var></progress>
<listing id="r7f1v"></listing>
APP開發平臺 > Blog > React中文文檔

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 元素 mountNoderender(<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 發明了 JSX 讓 JS 支持嵌入 HTML 不得不說是一種非常聰明的做法,讓前端實現真正意義上的組件化成為了可能。

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

Virtual DOM

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

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

Data Flow

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


APP開發工具推薦:


APICloud是一款“云端一體”的移動開發平臺。使用APICloud開發平臺,是用Web語言去開發iOS和Android應用,這樣將開發難度大幅降低,開發周期縮短將近一倍。此外,APICloud平臺上有上千個各式各樣的功能模塊,一鍵調用方便去開發各類App。

立即免費在線制作一個APP,新手注冊即送開發大禮包


高效的App定制平臺,標準化、便宜、快!

提交APP定制開發需求
欧美激情一区二区,国产精品区免费视频,欧美激情视频在线播放,久久久亚洲综合久久98,久久国产精品99精品国产