React學習筆記之react基礎篇（1）

来源:https://www.cnblogs.com/ygxdbmx/archive/2018/10/01/9735958.html
-Advertisement-
Play Games

一.React特點歸納 1.聲明式的視圖層：React 模板寫在 JS 文件中，而不是 html 的 <script> 標簽中。能使用所有 JS 語法，而不只有模板語法，所以更加靈活。 2.簡單的更新流程：當狀態數據發生變化時，React也會根據最新的狀態渲染出最新的UI。 3.靈活的渲染實現：Re ...


一.React特點歸納

　　1.聲明式的視圖層：React 模板寫在 JS 文件中，而不是 html 的 <script> 標簽中。能使用所有 JS 語法，而不只有模板語法，所以更加靈活。

　　2.簡單的更新流程：當狀態數據發生變化時，React也會根據最新的狀態渲染出最新的UI。

　　3.靈活的渲染實現：React並不是把視圖直接渲染成最終的終端界面，而是先把它們渲染成虛擬DOM。

　　4.高效的DOM操作：我們可以直接操作javascript對象取代一個真實的DOM節點。

 

二.ES6語法簡介

因為React項目一般都是用ES6語法來寫的，所以ES6語法的學習是十分有必要的。

 

1.var丶let丶const

　　var是ES5聲明的變數，let是ES6聲明的變數，const聲明一個只讀的常量，一旦聲明，常量的值就不能改變

 

2.箭頭函數　　

　　ES6允許使用“箭頭”（=>）定義函數，該方式不需要function關鍵字和return關鍵字，同時箭頭函數中的this指向函數定義時的上下文對象，而不是函數執行時的上下文對象。

　　例如：

var f=a=>a+1;
    //等價於
var f =function(a){
    return a+1;
}

function foo(){
    this.bar=1;
    this.f= (a) => a+this.bar;
}
    //等價於
 function foo(){
    this.bar=1;
    this.f=(function(a){
        return a+this.bar
}).bind(this);
}

　　//如果函數體內包含的語句多於一條，就需要用大括弧將函數體括起來，使用return返回
例如：
　　var f =(x,y) => {
　　　　x++;
　　　　y--;
　　return x+y;
}

 

 

3.模板字元串

　　模板字元串是增強版的字元串，用反引號（   '   )表示字元串

例如：

//普通字元串
'FeiYuMoFan!'

//多行字元串
'React is wonderful !
 React is beautiful ! '

//字元串中嵌入變數
var name = "WXF";
'Hello , ${name} !';

 

4.解構賦值

　　ES6允許按照一定模式從數組和對象中提取值，對變數進行賦值，這被稱之為解構。

例如：

//數組解構
let [a,b,c] = [1,2,3];

//對象解構
let name = 'WXF';
let age = 4;
let person = {name,age};

//對象解構另外一種形式
let person ={name:'WXF' , age:4};
let {name,age} =person;

//函數的參數解構
function sum ([x,y]){
    return x+y;
}
sum([1,2]);    //3

//對象參數解構
function sum({x,y}) {
    return x+y;
}
sum({x:1,y:2});

//嵌套解構的數組解構
let [a,[b],c] =[1,[2],3];

//嵌套結構的對象解構
let {person: {name,age},foo} ={person:{name:'WXF',age:4},foo:'foo'};

 

5.rest參數

　　ES6引入rest參數（形式為...變數名）用於獲取函數的多餘參數。

　例如：

function input(one,...two){
    console.log(two)
}
input('one','two','three');  //['two','three']

 

6.擴展運算符

　　擴展運算符是三個點（...)，它將一個數組轉化為用逗號分隔的參數序列，類似於rest參數的逆運算。

　例如：

function sum(a,b,c){
    return a+b+c;
}
let numbers = [1,2,3]
sum(...numbers)     //將數組轉換成參數序列進行輸入    

//合併數組
let arr1 = [1];
let arr2 = [2];
let arr4 = [3];
[...arr1,...arr2,...arr3];    [1,2,3]

//與解構賦值結合
let [a,...rest] =[1,2,3]
rest    //[2,3]

 

7.class

　　ES6中引用了class(類)這個概念

//定義一個類
class Person{
    constructor(name,age) {   //可參照java中的構造方法
        this.name =name;
        this.age  =age;
}

getName(){
    return this.name;
}

getAge(){
    return this.age;
}

}
//創建對象
let person = new('WXF',4);

 

 

三.JSX語法簡介

　JSX是一種用於描述UI的JavaScript擴展語法，React使用這種語法描述組件的UI.

 

1.JSX簡單運用

ReactDOM.render(
    <div>
    <h1>React</h1>
    <h2>歡迎學習 React</h2>
    <p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p>
    </div> ,
    document.getElementById('example')   //將該組件渲染到example節點上去
);

 

2.JavaScript表達式

我們可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括弧 {} 中。實例如下：

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>,
    document.getElementById('example')
);

在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 表達式來替代。以下實例中如果變數 i 等於 1 瀏覽器將輸出 true, 如果修改 i 的值，則會輸出 false.

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>,
    document.getElementById('example')
);

　　

3.註釋

註釋需要寫在花括弧中，實例如下：

ReactDOM.render(
    <div>
    <h1>菜鳥教程</h1>
    {/*註釋...*/}
     </div>,
    document.getElementById('example')
);

 

4.數組　　

JSX 允許在模板中插入數組，數組會自動展開所有成員：

var arr = [
  <h1>React</h1>,
  <h2>三大主流框架之一</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

　　

 

四.React組件

1.組件的定義

import React,{Component} from "react";

class Demo extends Component {    //定義了Demo組件
    render(){                     //定義了render（）方法
        return{
    <div>
          <ul>
                測試代碼
        </ul>  
    </div>
}                     

export default Demo;           　　//將Demo作為預設模塊導出，從而在其他頁面中可以進行組件的調用

　　

2.組件的props(組件的屬性）

　   組件的props用於在我們使用一個組件（父組件）調用另外一個組件（子組件）的時候，把父組件中的數據通過props（一個對象）傳遞給子組件，供子組件使用。

　　示例（函數組件）：

 

function HelloMessage(props) {　　　　　　　　　　　　　　//子組件HelloMessage,使用ES5中的function進行定義
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;　　　　//父組件element，同時通過props傳入數據name
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

　　讓我們再來看一個更加完善的使用方法：

　　首先我們創建一個子組件PostItem

class PostItem extends Component{
    render(){
        const{title,author,date}= this.props;           //通過props接收父組件傳過來的數據
        return(
    <div>
          <li>{title}</li>　　　　　　　　　　　　　　　　　　//將數據在頁面中進行顯示
          <li>{author}</li>
          <li>{date}</li>
    </div> 
    );
    }
}
export default PostItem;

　　接下來我們來創建一個父組件PostList向子組件PostItem傳遞數據同時進行子組件的調用

//定義常量來存儲我們需要傳遞的數據
const data = [
    {title:1,author:1,date:1},
    {title:2,author:2,date:2},
    {title:3,author:3,date:3},
];
class PostList extend Component{
    render(){
        return(
            <div>
                    {data.map(item=>　　　　　　　　　　　//data調用map函數對數據進行迴圈操作
                        <PostItem　　　　　　　　　　　　　//調用子組件同時通過props傳遞數據
                            title={item.title}
                            author={item.author}
                            date={item.date}
                          />
            </div>
        );
    }
}

 

3.組件的state

　　組件的state是組件內部的狀態，state的變化最終將反映到組件UI的變化上。

示例：

class Clock extends React.Component {
  constructor(props) {                                  //通過constructor函數初始化組件狀態
    super(props);　　　　　　　　　　　　　　　　　　　　　　　
    this.state = {date: new Date()};　　　　　　　　　　　　//通過this.state定義了組件的狀態
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>現在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

　　

　　* 有狀態組件和無狀態組件

上述組件因為涉及到了狀態的變化，所以我們可以把它看成有狀態組件，那什麼是無狀態組件呢？我們來看一下下麵這個示例

 

function HelloMessage(props) {　　　　　　　　　　　　　　//子組件HelloMessage,使用ES5中的function進行定義
    return <h1>Hello {props.name}!</h1>;
}

 

這也就是無狀態組件了，我們也可以稱之為函數組件

在我們開發React應用時，一定要先認真的思考哪些組件應該設計成有狀態組件，哪些組件應該設計成無狀態組件。並且，應該儘可能多的使用無狀態組件，無狀態組件不用關心狀態的變化，只聚焦於UI的展示，因此更容易被覆用。

 

　　

4.組件的事件處理

　　簡單的事件處理函數

 

<button onClick={activateLasers}>
  激活按鈕
</button>

 

　　當我們使用 ES6 class 語法來定義一個組件的時候，事件處理器會成為類的一個方法。例如，下麵的 Toggle 組件渲染一個讓用戶切換開關狀態的按鈕：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
 
    // 這邊綁定是必要的，這樣 `this` 才能在回調函數中使用
    this.handleClick = this.handleClick.bind(this);    //將當前類的this綁定到對應的函數上
  }
 
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}
 
ReactDOM.render(                                        //將組件渲染到example節點上
  <Toggle />,
  document.getElementById('example')
);

　　

 

　　

　　

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 喜聞樂見-Android LaunchMode
    launchMode，通俗點說，就是定義了Activity應該如何被launch的。那麼這幾種模式的區別以及應用場景，會有何不同呢？谷歌是基於什麼原因設計這幾種模式的呢？這幾種模式背後的工作原理是什麼呢？ ...
  • 喜聞樂見-Android應用的生命周期
    本文主要講述了App的啟動流程、Application的生命周期以及進程的回收機制。 ...
  • 喜聞樂見-Android簡介
    本文主要是對Android系統做一個簡介，包括其架構、啟動流程、沙箱機制、APK、Darlvik以及ART。 ...
  • Flutter 不一樣的跨平臺解決方案
    本文主要介紹Flutter相關的東西，包括Fuchsia、Dart、Flutter特性、安裝以及整體架構等內容。 ...
  • vue 關於圖片路徑的問題
    在vue 中，當我們想載入assets中的圖片，本人按照多年的開發經驗會這樣寫，那是沒問題的 如果我要用v-bind去動態綁定呢,正常思路來說 我會這樣寫，但是在vue 中 他會被當成一個字元串來處理，並不會轉換為圖片的路徑 正確的寫法 如果圖片路徑不是本地靜態圖片 就不需要 require 啦 此 ...
  • 在HTML代碼中使用freemarker
    在HTML代碼中使用freemarker 1、freemarker中顯示某對象的屬性使用${user.name}. 但如果name為null，freemarker就會報錯。如果需要判斷對象是否為空： <#if name??>.....</#if> 當然也可以通過設置預設值${name!''}來避免對 ...
  • vue Do not use built-in or reserved HTML elements as component id: nav
    剛入坑vue 在新建組建的時候出現這個問題，原因是我新建的這個組建name: 'nav' 在vue中好像nav 這樣的 有點類似於 “關鍵字” 不能作為組建的name，按照服務端來說 就是不可以命名關鍵字 為你的屬性名一樣的意思 所以在vue中 比如 nav ，header，footer 不可以作為 ...
  • vue 圖片懶載入 vue-lazyload
    在項目中，如果出現大圖一時半會載入不出來 的情況確實很醜。如果是那種沒有給定寬高 靠圖片撐起來的等圖片載入出來 再把內容擠下去的用戶體驗效果非常差。 在vue中 使用vue-lazyload可以實現圖片懶載入 安裝 引用 main.js index.vue 還有就是全局配置的 main.js 使用 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類