react開發教程（－）初識

Allen 發布于2019-08-21 15:36 / 1918人閱讀

摘要：定義一個組件可以在其他組件中調用這個組件調用組件劉宇組件插入內容在上面的案例中可以看到吧寫到當中，這種寫法稱為。

React初識

React是Facebook推出的一個javascript庫(用來創建用戶界面的Javascript庫)，所以他只是和用戶的界面打交道，你可以把它看成MVC中的V(視圖)這一層。

組件

React的一切都是基于組件的。web世界的構成是基于各種HTML標簽的組合，這些標簽也叫語意化標簽每個標簽代表一個含義，在react，vue，angular中我們可以將這些標簽組合成一個輪播／導航...等，可以稱為自定義組件。
react中最重要的特性就是基于組件的設計流程。使用React你唯一需要關心的就是如何構建組件（封裝性，復用性，測試）,如下圖，每個塊都是一個組件，頁面由組件構建而成，就像搭積木。

每個組件都有各自的狀態，當狀態變更時，便會重新渲染整個組件。
定義一個組件

import React, { Component } from "react";、
import "./Comment.css";

class Comment extends Component {
  render() {
    return (
      
        {this.props.name}
        {this.props.children}
      
    );
  }
}
export default Comment;

可以在其他組件中調用這個組件

import React, { Component } from "react";
import Comment from "./Comment";
import "./App.css";

class App extends Component {
  render() {
    return (
      
        {/**調用組件**/}
        組件插入內容
      
    );
  }
}

export default App;

JSX

在上面的案例中可以看到react吧html寫到js當中，這種寫法稱為JSX。這是一種類似XML的寫法，他可以定義類似HTML一樣簡潔的樹狀結構。這種語法結合了JavaScript語法和HTML的優點，既可以像平常一樣使用HTML,也可以在里面前套JavaScript語法。這種有好的格式，讓開發者易于閱讀和開發。而且，對于組件來說，直接使用類似HTML的格式，也是非常嗨皮的。但是需要注意的是。JSX和HTML完全不是一回事，JSX只是作為編輯器，把類似HTML的結構編譯成JavaScript。

注意：在瀏覽器中不能直接使用這種格式，需要添加JSX編譯器來完成這項工作。

JSX基本語法

使用類XML語法的好處是標簽可以任意嵌套，我們可以像HTML一樣清晰地看到DOM樹狀結構及其屬性。比如，我們構建一個List組件

const List = () => (
    
        列表元素1
        列表元素2
        列表元素3
        列表元素4
    
)

寫這個組件的過程就像寫html一樣，只不過它被包裹在JavaScript的方法中，需要注意以下幾點。

定義標簽時，只允許被一個標簽包裹
標簽一定要閉合

元素類型

在React中創建的虛擬元素可以分為兩類，DOM元素(DOM element)與組件元素(component element)
分別對應著原生DOM元素與自定義元素，而JSX與創建元素過程有這莫大的關聯，在JSX中對應的規則是HTML標簽首字母是否為小寫字母，其中小寫首對應DOM元素，而組件元素自然對應大寫首字母

注釋

在HTML中，注釋語法是在jsx依舊使用的是js語法注釋，唯一要注意的是，在一個組件的子元素位置使用注釋要用{}包起來。

const List = () => (
    
        {/**這個是個列表**/}
        列表元素1
    
)

元素屬性

元素除了標簽之外，另一個組成部分就是標簽的屬性。
在JSX中，不論是DOM元素還是組件元素，他門都有屬性。不同的是，DOM元素的屬性是標準規范屬性，但有兩個例外--class和for，這是因為在JavaScript中這兩個單詞都是關鍵詞。因此有對應的倆個轉化

class屬性改為className。
for屬性改為htmlFor。

在組件中元素的屬性是完全自定義的屬性，也可以理解為組件傳遞的參數。

組件插入內容

在自定義組件中除了上面傳遞屬性的方法外也可以

const comment = 組件插入內容;
comment.props.name = "劉宇";

也可以使用es6語法

const data = {name:"劉宇",age:10};
const comment = 組件插入內容;

自定義html屬性，上面說的是組件上的屬性，在JSX中往DOM元素中傳入自定義屬性，React是不會渲染的；
如果要使用HTML自定義屬性，要使用data-前綴，這與HTML標準也是一致的：

 //不被渲染
 //成功渲染

HTML轉譯

React會將所有要顯示到DOM的字符串轉義，防止XSS。所以，如果jsx中含有轉義后的實體字符。可以使用以下方法

直接使用utf-8字符
使用對應的Unicode編碼查詢編碼；
使用數組組裝
{["cc",?," 2017"]}

直接插入原始html

虛擬DOM(Virtual DOM)

在傳統的web應用中每次更新頁面的時候都需要手動操作DOM來更新

事件－》執行操作－》改變dom

DOM操作非常昂貴。在前端開發中，性能消耗最大的就是DOM操作，而且這部分的操作代碼不好維護。React把真實的DOM操作轉成JavaScript對象樹，也就是虛擬DOM;

這是普通的Html標簽寫法


React

這是在js中手動生成相同dom的寫法

//javascript dom
var a = document.createElement("a")
a.setAttribute("class", "link")
a.setAttribute("href", "https://github.com/facebook/react")
a.appendChild(document.createTextNode("React"))
//這是一種封裝，沿用的React.createElement的命名
var a = React.createElement("a", {
    className: "link",
    href: "https://github.com/facebook/react"
}, "React")

所有html結構，都可以用js dom來構造，而且能將構造的步驟封裝起來，做到「數據-dom結構」的映射。
緩存初始數據，新數據進來時，與舊數據對比，找到差異，根據差異本身的性質進行dom操作；無差異，則不作為。

dom本身在js中就是一種數據結構
console.dir(document.body)
在控制臺可以看到body的數據結構。然而，dom相關的數據豐富而且復雜，我們其實只關心少數元素的少數屬性。

建立一個javascript plain object，非常輕量，用它保存我們真正關心的與dom相關的少數數據；對它進行操作，然后對比操作前后的差異，再根據映射關系去操作真正的dom，無疑能提高性能。

相對于 DOM 對象，原生的 JavaScript 對象處理起來更快，而且更簡單。DOM 樹上的結構、屬性信息我們都可以很容易地用 JavaScript 對象表示出來：

var element = {
  type: "ul", // 節點標簽名
  props: { // DOM的屬性，用一個對象存儲鍵值對
    id: "list"
  },
  children: [ // 該節點的子節點
    {type: "li", props: {className: "item"}, children: ["Item 1"]},
    {type: "li", props: {className: "item"}, children: ["Item 2"]},
    {type: "li", props: {className: "item"}, children: ["Item 3"]},
  ]
}

上面對應的HTML寫法是：


  Item 1
  Item 2
  Item 3

每次數據更新后，重新計算虛擬DOM,并和上一次的作比較，對發生改變的部分做批量更新。React也提供了生命周期方法減少了不必要的對比過程，以保證性能

下一篇：react開發教程（二）安裝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88246.html

react開發教程（二）安裝

摘要：使用快速構建開發環境第一步安裝全局包是來自于，通過該命令我們無需配置就能快速構建開發環境。執行以下命令創建項目項目目錄在瀏覽器中打開，即可顯示上一篇開發教程初識下一篇開發教程三組件的構建 react安裝 React可以直接下載使用，下載包中也提供了很多學習的實例。本教程使用了 React 的版本為 15.4.2，你可以在官網 http://facebook.github.io/reac...

Jonathan Shieber 2019-08-20 15:51 評論0 收藏0
初識redux

摘要：主要用于構建，很多人認為是中的視圖。函數接受另一個函數作為參數，返回新生成的對象的變化，會導致的變化。用戶無法直接改變只能觸發上綁定的事件。表示應該要發生變化了。允許使用方法設置監聽函數，一旦發生變化，就自動執行這個函數。什么是react React 是一個用于構建用戶界面的 JAVASCRIPT 庫。React主要用于構建UI，很多人認為 React 是 MVC 中的 V（視圖）。...

xumenger 2019-08-22 16:13 評論0 收藏0
React系列---React（一）初識React

摘要：系列一初識系列二組件的和系列三組件的生命周期是推出的一個庫，它的口號就是用來創建用戶界面的庫，所以它只是和用戶界面打交道，可以把它看成中的視圖層。系列一初識系列二組件的和系列三組件的生命周期 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期 showImg(https://...

lanffy 2019-08-20 17:27 評論0 收藏0