React 中常用技術

来源:https://www.cnblogs.com/hubert-style/archive/2023/11/20/17844745.html
-Advertisement-
Play Games

可以少去理解一些不必要的概念，而多去思考為什麼會有這樣的東西，它解決了什麼問題，或者它的運行機制是什麼？ 1. React 中導出和導入 1.1 ES6 解析 ES6 的模塊化的基本規則或特點： 每一個模塊只載入一次， 每一個 JS 只執行一次， 如果下次再去載入同目錄下同文件，直接從記憶體中讀取。一 ...


可以少去理解一些不必要的概念，而多去思考為什麼會有這樣的東西，它解決了什麼問題，或者它的運行機制是什麼？

1. React 中導出和導入

1.1 ES6 解析

ES6 的模塊化的基本規則或特點：

  • 每一個模塊只載入一次， 每一個 JS 只執行一次， 如果下次再去載入同目錄下同文件，直接從記憶體中讀取。一個模塊就是一個單例，或者說就是一個對象；
  • 每一個模塊內聲明的變數都是局部變數，不會污染全局作用域；
  • 模塊內部的變數或者函數可以通過 export 導出；
  • 一個模塊可以導入別的模塊；

ES6 中 export 和 export default 的區別：

  • export 與 export default 均可用於導出常量、函數、文件、模塊；
  • 你可以在其它文件或模塊中通過 import +（常量 | 函數 | 文件 | 模塊）名的方式將其導入，以便能夠對其進行使用；
  • 在一個文件或模塊中 export、import 可以有多個，export default 僅有一個；
  • 通過 export 方式導出，在導入時要加大括弧 { }，export default 則不需要。

其實很多時候 export 與 export default 可以實現同樣的目的，只是用法有些區別。註意第四條，通過 export 方式導出，在導入時要加 { }，export default 則不需要。使用 export default 命令，為模塊指定預設輸出，這樣就不需要知道所要載入模塊的變數名。

1.2 React 解析

React 中使用 export 導出類可以有兩種方法。如下所示。

導出方式1：

// 導出方式1
export default classname

在其他文件中引用時採取如下方式：

import classname form path

示例：

// demo.js 文件
class Welcome extends React.Component{
    render(){
        return <h1> hello,{this.props.name}</h1>
    }
}
 
function App(){
    return (
        <div>
            <Welcome name="Sara"/>
            <Welcome nmae="Peng"/>
        </div>
    );
}
 
export default App;

// index.js 文件
import App from './components/Demo';
 
const element=<App/>;
ReactDOM.render(element,document.getElementById('root'));

導出方式2：

// 導出方式2
export {classname1,classname2}

在其他文件中引用時採用如下方式：

// 註意引用一個類時也要加上{}
import {classname1, classname2} from path

示例：

// Demo.js 文件
class Welcome extends React.Component{
    render(){
        return <h1> hello,{this.props.name}</h1>
    }
}
 
function App(){
    return (
        <div>
            <Welcome name="Sara"/>
            <Welcome nmae="Peng"/>
        </div>
    );
}
 
export {Welcome, App};

// index.js 文件
import {App}  from './components/Demo';
 
const element=<App/>;
ReactDOM.render(element, document.getElementById('root'));

2. declare 聲明

declare 可以用來聲明一個類型、模塊、變數以及作用域。聲明後其他地方不需要引入，就可以直接使用。

https://www.runoob.com/typescript/ts-ambient.html

https://blog.csdn.net/youhebuke225/article/details/125664535

3. dangerouslySetInnerHTML

dangerouslySetInnerHTML，翻譯過來就是：危險的設置內部 HTML。為什麼會說危險的設置？要知道有這麼一句話：“永遠不要相信用戶的輸入”。用戶有時候不會按照程式員所設想的規則來進行數據的輸入，比如想要用戶輸入數字，用戶卻輸入的是文本，類似的情況比比皆是。

（1）dangerouslySetInnerHTML 的作用：

當用戶輸入或者獲取到的數據是一段 HTML 代碼的時候，dangerouslySetInnerHTML 就可以把這一段代碼變成 HTML，然後插入到某個地方，類似 JS 中的 innerHTML。

即當用戶輸入的是 HTML 代碼時，如果不設置 dangerouslySetInnerHTML 的話，那麼在展示的時候就是一段 HTML 代碼字元串了。

（2）dangerouslySetInnerHTML 的語法：

dangerouslySetInnerHTML 是作為標簽屬性出現的，並且是值是一個對象，該對象內有一個屬性，也是對象：

<span dangerouslySetInnerHTML = {{
      	__html: item,
      }}>
</span>

__html 是固定寫法，後面的 item 表示要插入的內容，如果插入的是 HTML 代碼，那麼就會以 HTML 進行渲染，然後展示在頁面上；如果要插入的內容是其他文本，那麼不會有任何影響。

（3）為什麼是危險的設置？

不合時宜的插入 HTML 可能會導致網站被某些不良分子進行 XSS 攻擊，作者取名 dangerouslySetInnerHTML 也是為了警示程式員，不要隨意的使用該屬性。

4. immutable

immutable 是一種持久化數據結構，immutable 數據就是一旦創建，就不能更改的數據，每當對 Immutable 對象進行修改的時候，就會創建返回一個新的不可變 immutable 對象，以此來保證數據的不可變。在新對象上操作並不會影響到原對象的數據。這個庫的實現是深拷貝還是淺拷貝？

immutable 實現的原理是 Persistent Data Structure（持久化數據結構），也就是使用舊數據創建新數據時，要保證舊數據同時可用且不變。同時為了避免 deepCopy 把所有節點都複製一遍帶來的性能損耗，immutable 使用了structural Sharing（結構共用），即如果對象樹中一個節點發生變化，只修改這個節點和受它影響的父節點，其它節點則進行共用。

安裝：

npm install immutable

引入：

const immutable = require("immutable")
const { Map } = require('immutable');

具體使用參考官網：

https://github.com/immutable-js/immutable-js

5. Portal 傳送門

5.1 概念和應用場景

React 節點預設渲染到父節點下，React Portal 提供了一種將子節點渲染到父組件以外的 DOM 節點的優秀解決方案。

Portal 最常見的適用場景是當子組件需要從視覺上“跳出”其容器時，譬如模態對話框、懸浮卡、提示框、載入動畫等。典型的用法就是當父組件的 DOM 元素有 overf1ow:hidden 或者 z-index 樣式，而你又需要顯示的子元素超出父元素的盒子。舉例來說，如對話框，懸浮框，和小提示。

5.2 Portal 構建語法

React Portal 構建語法：

ReactDOM.createPortal(child, container)

第一個參數 child 是可渲染的 react 元素，子符串或者片段等。第二個參數 container 是 Portal 要插入的 DOM 節點元素的位置。

普通的組件，子組件的元素將掛載到父組件的 DOM 節點中：

render() {
  // React 掛載一個div節點，並將子元素渲染在節點中
  return ( 
    <div>
	{this.props.children} 
    </div>
  );
}

有時需要將元素渲染到 DOM 中的不同位置上去，這是就用到的 Portal 的方法。

下麵使用 React Portal 創建一個簡單 modal 組件：

//此時 React 將子元素渲染到 Dom 節點上。domNode 是一個有效的任意位置的 dom 節點。
const Modal = ({ message, isOpen, onClose, children }) => {
  if (!isOpen) return null;
  return ReactDOM.createPortal(
    <div className="modal">
      <span className="message">{message}</span>
      <button onClick={onClose}>Close</button>
    </div>,
    domNode
  );
};

即使 Portal 是在父級 DOM 元素之外呈現的，他的表現行為也跟平常我們在 React 組件中使用是一樣的。它能夠接受 props 以及 context API。這是因為 Portal 駐留在 React Tree 層次結構內（也就是保證在同一顆 React Tree 上）。

5.3 為什麼我們需要它呢？

當我們在特定元素（父組件）中使用模態彈窗時，模態的高度和寬度就會從模態彈窗所在的組件繼承，也就是說模態彈窗的樣式可能會被父組件影響。傳統的模態框需將需要設置 CSS 屬性，例如 overflow：hidden 和 z-index 來避免這個問題。

普通組件將導致模態框在 root 下的嵌套組件內部渲染。當使用瀏覽器檢查元素時，如下所示。

8. Portal 1

接下來，讓我們看看 React Portal 是如何被使用的。下麵的代碼使用 createPortal() 在 root 樹層次結構之外創建 DOM 節點來解決此問題。

const Modal = ({ message, isOpen, onClose, children }) => {
  if (!isOpen) return null;
  return ReactDOM.createPortal(
    <div className="modal">
      <span>{message}</span>
      <button onClick={onClose}>Close</button>
    </div>,
    document.body
  );
};

function Component() {
  const [open, setOpen] = useState(false);
  return (
    <div className="component">
      <button onClick={() => setOpen(true)}>Open Modal</button>
      <Modal
        message="Hello World!"
        isOpen={open}
        onClose={() => setOpen(false)}
      />
    </div>
  );
}

下麵顯示的是 DOM 樹層次結構，這是在使用 React Portal 時得到的，其中模態框組件將被註入 root 之外，並且與 root 處於同一層級。

9. Portal 2

由於這個模態框是在根層次結構之外渲染的，因此模態框的大小不會因為繼承父級組件而被更改。

結論：

在我們需要在正常 DOM 層次結構之外呈現子組件而又不通過 React 組件樹層次結構破壞事件傳播的預設行為時，React Portal（傳送門）會派上用場。比如在渲染模態框，工具提示，彈出消息之類的組件時，這很有用。

在 Portal 中的事件冒泡：雖然通過 Portal 渲染的元素在父組件的盒子之外，但是渲染的 DOM 節點仍在 React 的元素樹上，在那個 DOM 元素上的點擊事件仍然能在 DOM 樹中監聽到。

6. navigator.userAgent

navigator.userAgent 是瀏覽器用於 HTTP 請求的用戶代理頭的值，通過userAgent 可以取得瀏覽器類別、版本，客戶端操作系統等信息，可以用來判斷當前瀏覽器所處的環境。

在 PC 端打開 ，navigator.userAgent 顯示如下：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36

在手機 Web 端打開 ，navigator.userAgent 顯示如下：

Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

使用場景：

場景1：判斷頁面是在手機端還是 PC 端打開：

window.location.href=/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)?"http://localhost:8888/mobile_web":"http://localhost:8888/PC";

場景2：判斷頁面是在手機端，平板端還是 PC 端打開：

var os = function (){
	var ua = navigator.userAgent,
	isWindowsPhone = /(?:Windows Phone)/.test(ua),
	isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
	isAndroid = /(?:Android)/.test(ua),
	isFireFox = /(?:Firefox)/.test(ua),
	isChrome = /(?:Chrome|CriOS)/.test(ua),
	isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
	isPhone = /(?:iPhone)/.test(ua) && !isTablet,
	isPc = !isPhone && !isAndroid && !isSymbian;
	return {
		isTablet: isTablet,
		isPhone: isPhone,
		isAndroid: isAndroid,
		isPc: isPc
	};	
}();
 
if (os.isAndroid || os.isPhone) {   
   alert("手機" );
} else if (os.isTablet) {
    alert("平板" );
} else if (os.isPc) {
    alert("電腦" );
}

場景3：獲取操作系統類型，判斷是 Android 或者 IOS：

/**
     * 獲取操作系統類型，
     * 0 Android
     * 1 iOS
     */
function getOSType() {
    if (/(Android)/i.test(navigator.userAgent)) {
        return 0;
    } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        return 1;
    } else {
        return 2;
    }
}

場景4：判斷當前環境是否是微信環境：

function is_weixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
         return true;
    } else {
         return false;
    }
}

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

-Advertisement-
Play Games
更多相關文章
  • SQL 中的 NULL 值：定義、測試和處理空數據，以及 SQL UPDATE 語句的使用
    SQL NULL 值 什麼是 NULL 值？ NULL 值是指欄位沒有值的情況。如果表中的欄位是可選的，那麼可以插入新記錄或更新記錄而不向該欄位添加值。此時，該欄位將保存為 NULL 值。需要註意的是，NULL 值與零值或包含空格的欄位不同。具有 NULL 值的欄位是在記錄創建期間留空的欄位。 如何 ...
  • MySQL Select 語句執行順序
    一條 SQL 查詢語句結構如下： SELECT DISTINCT <select_list> FROM <left_table> <join_type> JOIN <right_table> ON <join_condition> WHERE <where_condition> GROUP BY < ...
  • 聊聊分散式 SQL 資料庫Doris(一)
    MPP MPP:Massively Parallel Processing, 即大規模並行處理. 一般用來指多個SQL資料庫節點搭建的數據倉庫系統. 執行查詢的時候, 查詢可以分散到多個SQL資料庫節點上執行, 然後彙總返回給用戶. Doris Doris 作為一款開源的 MPP 架構 OLAP 高 ...
  • Navicat 基於 GaussDB 主備版的快速入門
    本文分享自華為雲社區《Navicat 基於 GaussDB 主備版的快速入門》，作者：Navicat_China。 Navicat Premium（16.2.8 Windows版或以上） 已支持對GaussDB 主備版的管理和開發功能。它不僅具備輕鬆、便捷的可視化數據查看和編輯功能，還提供強大的高階 ...
  • GreatSQL社區與Amazon、Facebook、Tencent共同被MySQL致謝
    一、來自MySQL官方的感謝 在 2023-10-25 MySQL 官方發佈的 8.2 版本 Release Notes 中，GreatSQL 社區核心開發者 Richard Dang 和 Hao Lu ，分別收到了來自 MySQL 官方的貢獻感謝，與Amazon、Facebook(Meta)、Te ...
  • 達夢資料庫——壓縮
    DM8壓縮表 0、結論 行表（普通表）不支持壓縮。但是語法支持。建表之後，查詢到的占用空間會比普通表小一半。 經過測試，裝10萬數據（兩個欄位），壓縮的、未壓縮，占用空間一樣大。 列表（huge表）支持壓縮。可以壓縮表（就是壓縮所有列），也可以選擇壓縮列。但是建表的時候就要設置，否則建好表之後修改不 ...
  • Android Recyclerview的item間距實現
    Recyclerview中,提供了一個方法addItemDecoration給我們用於設置item的分割線 下麵提供幾個常見的分割線效果 註: 下麵的SizeUtils是AndroidUtilCode此庫里的工具類,需要添加依賴,也可以自行修改封裝的方法(主要是將dp單位轉為px) 以下代碼已封裝在 ...
  • 什麼是DOM?
    npm 存在的問題 我們經常使用 npm 來管理 node 項目中的包，從 package.json 中讀取配置將依賴下載到本地，以保障項目的正常運行。 當項目數量多時，這樣的包管理方式會非常的占用電腦記憶體。由於每個項目都有屬於自己的依賴，每個項目都需要安裝，即使 npm 會對依賴進行緩存，但是每個 ...
一周排行
    -Advertisement-
    Play Games
  • （開源）都進來！簡單易懂、功能強大的許可權+可視化流程管理系統
    1、預覽地址：http://139.155.137.144:9012 2、qq群:801913255 一、前言 隨著網路的發展，企業對於信息系統數據的保密工作愈發重視，不同身份、角色對於數據的訪問許可權都應該大相徑庭。 列如 1、不同登錄人員對一個數據列表的可見度是不一樣的，如數據列、數據行、數據按鈕 ...
  • 設計模式-C#實現簡單工廠模式
    前言 上一篇文章寫瞭如何使用RabbitMQ做個簡單的發送郵件項目，然後評論也是比較多，也是準備去學習一下如何確保RabbitMQ的消息可靠性，但是由於時間原因，先來說說設計模式中的簡單工廠模式吧！ 在瞭解簡單工廠模式之前，我們要知道C#是一款面向對象的高級程式語言。它有3大特性，封裝、繼承、多態。 ...
  • Nodify學習 一：介紹與使用
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 介紹 Nodify是一個WPF基於節點的編輯器控制項，其中包含一系列節點、連接和連接器組件，旨在簡化構建基於節點的工具的過程 ...
  • 使用C#/.NET解析Wiki百科數據實現獲取歷史上的今天
    創建一個webapi項目做測試使用。 創建新控制器，搭建一個基礎框架，包括獲取當天日期、wiki的請求地址等 創建一個Http請求幫助類以及方法，用於獲取指定URL的信息 使用http請求訪問指定url，先運行一下，看看返回的內容。內容如圖右邊所示，實際上是一個Json數據。我們主要解析 大事記 部 ...
  • .NET科普：.NET簡史、.NET Standard以及C#和.NET Framework之間的關係
    最近在不少自媒體上看到有關.NET與C#的資訊與評價，感覺大家對.NET與C#還是不太瞭解，尤其是對2016年6月發佈的跨平臺.NET Core 1.0，更是知之甚少。在考慮一番之後，還是決定寫點東西總結一下，也回顧一下.NET的發展歷史。 首先，你沒看錯，.NET是跨平臺的，可以在Windows、 ...
  • Nodify學習 二：添加節點
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 添加節點（nodes） 通過上一篇我們已經創建好了編輯器實例現在我們為編輯器添加一個節點 添加model和viewmode ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（上）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
  • C# 使用模式匹配的好處,因為好用所以推薦~
    類型檢查和轉換：當你需要檢查對象是否為特定類型，並且希望在同一時間內將其轉換為那個類型時，模式匹配提供了一種更簡潔的方式來完成這一任務，避免了使用傳統的as和is操作符後還需要進行額外的null檢查。 複雜條件邏輯：在處理複雜的條件邏輯時，特別是涉及到多個條件和類型的情況下，使用模式匹配可以使代碼更 ...
  • 推薦一種批量判斷文件是否存在的快速辦法
    在日常開發中，我們經常需要和文件打交道，特別是桌面開發，有時候就會需要載入大批量的文件，而且可能還會存在部分文件缺失的情況，那麼如何才能快速的判斷文件是否存在呢？如果處理不當的，且文件數量比較多的時候，可能會造成卡頓等情況，進而影響程式的使用體驗。今天就以一個簡單的小例子，簡述兩種不同的判斷文件是否... ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（中）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
所有分類