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
  • 移動開發（一）：使用.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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類