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:hiddenz-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 值 什麼是 NULL 值? NULL 值是指欄位沒有值的情況。如果表中的欄位是可選的,那麼可以插入新記錄或更新記錄而不向該欄位添加值。此時,該欄位將保存為 NULL 值。需要註意的是,NULL 值與零值或包含空格的欄位不同。具有 NULL 值的欄位是在記錄創建期間留空的欄位。 如何 ...
  • 一條 SQL 查詢語句結構如下: SELECT DISTINCT <select_list> FROM <left_table> <join_type> JOIN <right_table> ON <join_condition> WHERE <where_condition> GROUP BY < ...
  • MPP MPP:Massively Parallel Processing, 即大規模並行處理. 一般用來指多個SQL資料庫節點搭建的數據倉庫系統. 執行查詢的時候, 查詢可以分散到多個SQL資料庫節點上執行, 然後彙總返回給用戶. Doris Doris 作為一款開源的 MPP 架構 OLAP 高 ...
  • 本文分享自華為雲社區《Navicat 基於 GaussDB 主備版的快速入門》,作者:Navicat_China。 Navicat Premium(16.2.8 Windows版或以上) 已支持對GaussDB 主備版的管理和開發功能。它不僅具備輕鬆、便捷的可視化數據查看和編輯功能,還提供強大的高階 ...
  • 一、來自MySQL官方的感謝 在 2023-10-25 MySQL 官方發佈的 8.2 版本 Release Notes 中,GreatSQL 社區核心開發者 Richard Dang 和 Hao Lu ,分別收到了來自 MySQL 官方的貢獻感謝,與Amazon、Facebook(Meta)、Te ...
  • DM8壓縮表 0、結論 行表(普通表)不支持壓縮。但是語法支持。建表之後,查詢到的占用空間會比普通表小一半。 經過測試,裝10萬數據(兩個欄位),壓縮的、未壓縮,占用空間一樣大。 列表(huge表)支持壓縮。可以壓縮表(就是壓縮所有列),也可以選擇壓縮列。但是建表的時候就要設置,否則建好表之後修改不 ...
  • Recyclerview中,提供了一個方法addItemDecoration給我們用於設置item的分割線 下麵提供幾個常見的分割線效果 註: 下麵的SizeUtils是AndroidUtilCode此庫里的工具類,需要添加依賴,也可以自行修改封裝的方法(主要是將dp單位轉為px) 以下代碼已封裝在 ...
  • npm 存在的問題 我們經常使用 npm 來管理 node 項目中的包,從 package.json 中讀取配置將依賴下載到本地,以保障項目的正常運行。 當項目數量多時,這樣的包管理方式會非常的占用電腦記憶體。由於每個項目都有屬於自己的依賴,每個項目都需要安裝,即使 npm 會對依賴進行緩存,但是每個 ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...