React 簡介

voidking 發(fā)布于2019-08-23 16:17 / 1441人閱讀

摘要：介紹是內(nèi)部的一個類庫并開源，可用于創(chuàng)建用戶交互界面。主要有四個主要概念構(gòu)成，下面分別來簡單介紹一下之所以引入虛擬，一方面是性能的考慮。允許直接在模板插入變量。這種單向數(shù)據(jù)流使得整個系統(tǒng)都是透明可預(yù)測的。

React 介紹

React是Facrbook內(nèi)部的一個JavaScript類庫并開源，可用于創(chuàng)建Web用戶交互界面。它引入了一種新的方式來處理瀏覽器DOM。那些需要手動更新DOM、費力地記錄每一個狀態(tài)的日子一去不復返。React使用很新穎的方式解決了這些問題。你只需要聲明地定義各個時間點的用戶界面，而無序關(guān)系在數(shù)據(jù)變化時，需要更新哪一部分DOM。在任何時間點，React都能以最小的DOM修改來更新整個應(yīng)用程序。

React主要有四個主要概念構(gòu)成，下面分別來簡單介紹一下

Virtual DOM

之所以引入虛擬DOM，一方面是性能的考慮。Web應(yīng)用和網(wǎng)站不同，一個Web應(yīng)用中通常會在單頁內(nèi)有大量的DOM操作，而這些DOM操作很慢

在React中，應(yīng)用程序在虛擬DOM上操作，這讓React有了優(yōu)化的機會。簡單說， React在每次需要渲染時，會先比較當前DOM內(nèi)容和待渲染內(nèi)容的差異，然后再決定如何最優(yōu)地更新DOM

除了性能的考慮，React引入虛擬DOM更重要的意義是提供了一種一致的開發(fā)方式來開發(fā)服務(wù)端應(yīng)用、Web應(yīng)用和手機端應(yīng)用

因為有了虛擬DOM這一層，所以通過配備不同的渲染器，就可以將虛擬DOM的內(nèi)容 渲染到不同的平臺。而應(yīng)用開發(fā)者，使用JavaScript就可以通吃各個平臺了。相當棒的思路！且虛擬DOM是內(nèi)存數(shù)據(jù)，性能是極高的，而對實際DOM進行操作的僅僅是 Diff部分，因而能達到提高性能的目的

React組件

對于React而言，則完全是一個新的思路，開發(fā)者從功能的角度出發(fā)，將UI分成不同的組件，每個組件都獨立封裝。
在React中，你按照界面模塊自然劃分的方式來組織和編寫你的代碼，對于評論界面而言，整個UI是一個通過小組件構(gòu)成的大組件，每個組件只關(guān)心自己部分的邏輯，彼此獨立。

組件化開發(fā)特性:

React認為一個組件應(yīng)該具有如下特征：

1.可組合（Composeable）：一個組件易于和其它組件一起使用，或者嵌套在另一個組件內(nèi)部。如果一個組件內(nèi)部創(chuàng)建了另一個組件，那么說父組件擁有（own）它創(chuàng)建的子組件，通過這個特性，一個復雜的UI可以拆分成多個簡單的UI組件；

2.可重用（Reusable）：每個組件都是具有獨立功能的，它可以被使用在多個UI場景；

3.可維護（Maintainable）：每個小的組件僅僅包含自身的邏輯，更容易被理解和維護；

4.可測試（Testable）：因為每個組件都是獨立的，那么對于各個組件分別測試顯然要比對于整個UI進行測試容易的多。

組件定義

在React中定義一個組件也是相當?shù)娜菀?，組件就是一個實現(xiàn)預(yù)定義接口的JavaScript類：

組件渲染

ReactDOM.render 是 React 的最基本方法，用于將模板轉(zhuǎn)為 HTML 語言，并插入指定的 DOM 節(jié)點。

ReactDOM.render(
  Hello, world!,
  document.getElementById("example")
);

而這個方法，必須而且只能返回一個有效的React元素。這意味著，如果你的組件是由多個元素構(gòu)成的，那么你必須在外邊包一個頂層元素，然后返回這個頂層元素。比如我們創(chuàng)建一個布局組件：

render:function(){
    return React.createElement(
        "div",null,
        React.createElement("div",null,"header"),
        React.createElement("div",null,"content"),
        React.createElement("div",null,"footer")
    );
}

ES5方式定義組件

"use strict";
var HelloMessage = React.createClass({
  displayName: "HelloMessage",
    render: function render() {
        return React.createElement(
            "div",
            null,
            "Hello ",
            this.props.name
        );
    }
});

ES6方式定義組件

import "./Hello.css";
import "./Hello.scss";
import React, {Component} from "react";
// 內(nèi)聯(lián)樣式
let style={
    backgroundColor:"blue"
}
export default class Hello extends Component {
    constructor(props) {
        super(props);
        this.state = { count: "es6"};
    }
    render() {
        return (
            
                Hello world{this.state.count}
                

                
            
        )
    }
}

JSX方式定義組件

var HelloMessage = React.createClass({
  render: function() {
    return Hello {this.props.name};
  }
});
ReactDOM.render(, mountNode);

Jsx語法

什么是jsx

在用React寫組件的時候，通常會用到JSX語法，粗看上去，像是在Javascript代碼里直接寫起了XML標簽，實質(zhì)上這只是一個語法糖，每一個 XML標簽都會被JSX轉(zhuǎn)換工具轉(zhuǎn)換成純Javascript代碼，當然你想直接使用純Javascript代碼寫也是可以的，只是利用JSX，組件的結(jié)構(gòu)和組件之間的關(guān)系看上去更加清晰

Jsx語法使用

HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它允許 HTML 與 JavaScript 的混寫。

var names = ["Alice", "Emily", "Kate"];
ReactDOM.render(
  
  {
    names.map(function (name) {
      return Hello, {name}!
    })
  }
  ,
  document.getElementById("example")
);

上面代碼體現(xiàn)了 JSX 的基本語法規(guī)則：遇到 HTML 標簽（以 < 開頭），就用 HTML 規(guī)則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規(guī)則解析。

JSX 允許直接在模板插入 JavaScript 變量。如果這個變量是一個數(shù)組，則會展開這個數(shù)組的所有成員

var arr = [
  Hello world!,
  React is awesome,
];
ReactDOM.render(
  {arr},
  document.getElementById("example")
);

上面代碼的arr變量是一個數(shù)組，結(jié)果 JSX 會把它的所有成員，添加到模板，運行結(jié)果如下。

Data Flow（單向數(shù)據(jù)流）

單向數(shù)據(jù)流

先來了解一下 Flux 的核心“單向數(shù)據(jù)流“怎么運作的：
Action -> Dispatcher -> Store -> View
更多時候 View 會通過用戶交互觸發(fā) Action，所以一個簡單完整的數(shù)據(jù)流類似這樣：

整個流程如下：

1.首先要有 action，通過定義一些 action creator 方法根據(jù)需要創(chuàng)建 Action 提供給 dispatcher
2.View 層通過用戶交互（比如 onClick）會觸發(fā) Action
3.Dispatcher 會分發(fā)觸發(fā)的 Action 給所有注冊的 Store 的回調(diào)函數(shù)
4.Store 回調(diào)函數(shù)根據(jù)接收的 Action 更新自身數(shù)據(jù)之后會觸發(fā)一個 change 事件通知 View 數(shù)據(jù)更改了
5.View 會監(jiān)聽這個 change 事件，拿到對應(yīng)的新數(shù)據(jù)并調(diào)用 setState 更新組件 UI
所有的狀態(tài)都由 Store 來維護，通過 Action 傳遞數(shù)據(jù)，構(gòu)成了如上所述的單向數(shù)據(jù)流循環(huán)，所以應(yīng)用中的各部分分工就相當明確，高度解耦了。
這種單向數(shù)據(jù)流使得整個系統(tǒng)都是透明可預(yù)測的。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102870.html

發(fā)表評論

登陸后可評論

0條評論

voidking

男|高級講師

我要關(guān)注我要私信

TA的文章

云虛擬主機有什么用-云虛擬主機有什么優(yōu)勢嗎？

閱讀 1045·2021-09-22 15:26
易探云：金秋上云季活動,香港/美國/日本云服務(wù)器僅18元/首月;香港/國內(nèi)物理機低至390元/月起

閱讀 2624·2021-09-09 11:52
狗盾云：亞太雙向CN2+美國GIA CN2節(jié)點CDN，免費1個月，號稱打不死

閱讀 1917·2021-09-02 09:52
DediPath：全場5折優(yōu)惠，E3-1230v3/16G/240G SSD/30T/1Gbps/5

閱讀 2254·2021-08-12 13:28
前端實例練習 - 模態(tài)圖

閱讀 1192·2019-08-30 15:53
鳥瞰前端 , 再論性能優(yōu)化

閱讀 522·2019-08-29 13:47
IE9無法支持大尺寸CSS的陷阱

閱讀 3393·2019-08-29 11:00
切圖崽的自我修養(yǎng)－SeaJs重要概念剖析

閱讀 3105·2019-08-29 10:58

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React 簡介

Hello, world!

Hello world{this.state.count}

Hello world!

React is awesome

相關(guān)文章

react-native電影簡介app，了解一下？（android端）

React與Redux整合技術(shù)簡介

React文檔翻譯系列（三）JSX簡介

**【全棧React】第18天: Flux 簡介**

React Native 簡介：用 JavaScript 搭建 iOS 應(yīng)用 (1)

發(fā)表評論

0條評論

voidking

男|高級講師

TA的文章

云虛擬主機有什么用-云虛擬主機有什么優(yōu)勢嗎？

易探云：金秋上云季活動,香港/美國/日本云服務(wù)器僅18元/首月;香港/國內(nèi)物理機低至390元/月起

狗盾云：亞太雙向CN2+美國GIA CN2節(jié)點CDN，免費1個月，號稱打不死

DediPath：全場5折優(yōu)惠，E3-1230v3/16G/240G SSD/30T/1Gbps/5

前端實例練習 - 模態(tài)圖

鳥瞰前端 , 再論性能優(yōu)化

IE9無法支持大尺寸CSS的陷阱

切圖崽的自我修養(yǎng)－SeaJs重要概念剖析

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React 簡介

Hello, world!

Hello world{this.state.count}

Hello world!

React is awesome

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！