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 微服務框架
    前言 微服務架構已經成為搭建高效、可擴展系統的關鍵技術之一，然而，現有許多微服務框架往往過於複雜，使得我們普通開發者難以快速上手並體驗到微服務帶了的便利。為瞭解決這一問題，於是作者精心打造了一款最接地氣的 .NET 微服務框架，幫助我們輕鬆構建和管理微服務應用。 本框架不僅支持 Consul 服務註 ...
  • 基於surging的木舟IOT平臺如何添加網路組件
    先看一下效果吧: 如果不會寫動畫或者懶得寫動畫，就直接交給Blend來做吧; 其實Blend操作起來很簡單，有點類似於在操作PS，我們只需要設置關鍵幀，滑鼠點來點去就可以了，Blend會自動幫我們生成我們想要的動畫效果. 第一步：要創建一個空的WPF項目 第二步：右鍵我們的項目，在最下方有一個，在B ...
  • Prism:框架介紹與安裝
    Prism:框架介紹與安裝 什麼是Prism? Prism是一個用於在 WPF、Xamarin Form、Uno 平臺和 WinUI 中構建鬆散耦合、可維護和可測試的 XAML 應用程式框架 Github https://github.com/PrismLibrary/Prism NuGet htt ...
  • 不可不知的WPF畫筆（Brush）
    在WPF中，屏幕上的所有內容，都是通過畫筆（Brush）畫上去的。如按鈕的背景色，邊框，文本框的前景和形狀填充。藉助畫筆，可以繪製頁面上的所有UI對象。不同畫筆具有不同類型的輸出（ 如：某些畫筆使用純色繪製區域，其他畫筆使用漸變、圖案、圖像或繪圖）。 ...
  • .NET 8 高併發微服務電商系統實戰
    前言 嗨，大家好！推薦一個基於 .NET 8 的高併發微服務電商系統，涵蓋了商品、訂單、會員、服務、財務等50多種實用功能。 項目不僅使用了 .NET 8 的最新特性，還集成了AutoFac、DotLiquid、HangFire、Nlog、Jwt、LayUIAdmin、SqlSugar、MySQL、 ...
  • 基於surging 如何利用peerjs進行語音視頻通話
    本文主要介紹攝像頭（相機）如何採集數據，用於類似攝像頭本地顯示軟體，以及流媒體數據傳輸場景如傳屏、視訊會議等。 攝像頭採集有多種方案，如AForge.NET、WPFMediaKit、OpenCvSharp、EmguCv、DirectShow.NET、MediaCaptre（UWP），網上一些文章以及 ...
  • [WPF]數據綁定時為何會出現StringFormat失效
    前言 Seal-Report 是一款.NET 開源報表工具，擁有 1.4K Star。它提供了一個完整的框架，使用 C# 編寫，最新的版本採用的是 .NET 8.0 。 它能夠高效地從各種資料庫或 NoSQL 數據源生成日常報表，並支持執行複雜的報表任務。 其簡單易用的安裝過程和直觀的設計界面，我們 ...
  • NET Core 多身份校驗與策略模式
    背景需求： 系統需要對接到XXX官方的API，但因此官方對接以及管理都十分嚴格。而本人部門的系統中包含諸多子系統，系統間為了穩定，程式間多數固定Token+特殊驗證進行調用，且後期還要提供給其他兄弟部門系統共同調用。 原則上：每套系統都必須單獨接入到官方，但官方的接入複雜，還要官方指定機構認證的證書 ...
  • C#自定義控制項—轉換開關
    本文介紹下電腦設備關機的情況下如何通過網路喚醒設備，之前電源S狀態 電腦Power電源狀態- 唐宋元明清2188 - 博客園 (cnblogs.com) 有介紹過遠程喚醒設備，後面這倆天瞭解多了點所以單獨加個隨筆 設備關機的情況下，使用網路喚醒的前提條件： 1. 被喚醒設備需要支持這WakeOnL ...
  • .NET 8.0 前後分離快速開發框架
    前言 大家好，推薦一個.NET 8.0 為核心，結合前端 Vue 框架，實現了前後端完全分離的設計理念。它不僅提供了強大的基礎功能支持，如許可權管理、代碼生成器等，還通過採用主流技術和最佳實踐，顯著降低了開發難度，加快了項目交付速度。 如果你需要一個高效的開發解決方案，本框架能幫助大家輕鬆應對挑戰，實 ...
所有分類