基於Effect的組件設計

来源:https://www.cnblogs.com/jingdongkeji/archive/2023/10/11/17756645.html
-Advertisement-
Play Games

Effect的概念起源 從輸入輸出的角度理解Effect https://link.excalidraw.com/p/readonly/KXAy7d2DlnkM8X1yps6L 編程中的Effect起源於函數式編程中純函數的概念 純函數是指在相同的輸入下，總是產生相同的輸出，並且沒有任何副作用(si ...


Effect的概念起源

從輸入輸出的角度理解Effect https://link.excalidraw.com/p/readonly/KXAy7d2DlnkM8X1yps6L

編程中的Effect起源於函數式編程中純函數的概念

純函數是指在相同的輸入下，總是產生相同的輸出，並且沒有任何副作用(side effect)的函數。

副作用是指函數執行過程中對函數外部環境進行的可觀察的改變，比如修改全局變數、列印輸出、寫入文件等。

前端的典型副作用場景是 瀏覽器環境中在window上註冊變數

副作用引入了不確定性，使得程式的行為難以預測和調試。為了處理那些需要進行副作用的操作，函數式編程引入了Effect的抽象概念。

它可以表示諸如讀取文件、寫入資料庫、發送網路請求、DOM渲染等對外部環境產生可觀察改變的操作。通過將這些操作包裝在Effect中，函數式編程可以更好地控制和管理副作用，使得代碼更具可預測性和可維護性。

實際工作中我們也是從React的useEffect開始直接使用Effect的說法

React: useEffect

useEffect is a React Hook that lets you synchronize a component with an external system.

import { useState, useEffect } from 'react';
// 模擬非同步事件
function getMsg() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('React')
    }, 1000)
  })
}

export default function Hello() {
  const [msg, setMsg] = useState('World')
  useEffect(() => {
    getMsg().then((msg) => {
      setMsg(msg)
    })
    const timer = setInterval(() => {
      console.log('test interval')
    })
    return () => {
      // 清除非同步事件
      clearTimeout(timer)
    }
  }, [])
  return (
    <h1>Hello { msg }</h1>
  );
}

Effect中處理非同步事件，併在此處消除非同步事件的副作用clearTimeout(timer)，避免閉包一直無法被銷毀

Vue: watcher

運行期自動依賴收集 示例

<script setup>
import { ref } from 'vue'
const msg = ref('World!')

setTimeout(() => {
  msg.value = 'Vue'
}, 1000)
</script>

<template>
  <h1>Hello {{ msg }}</h1>
</template>



_createElementVNode("h1", null, _toDisplayString(msg.value), 1 /* TEXT */)

runtime的render期間通過msg.value對msg產生了引用，此時產生了一個watch effect：msg的watchlist中多了一個render的watcher，在msg變化的時候 render會通過watcher重新執行

Svelte: $

編譯器依賴收集 示例

suffix的值依賴name，在name變化之後，suffix值也更新

<script>
    let name = 'world';
    $: suffix = name + '!'
    setTimeout(() => {
        name = 'svelte'
    }, 1000)
</script>

<h1>Hello {suffix}</h1>




// 編譯後部分代碼
function instance($$self, $$props, $$invalidate) {
  let suffix
  let name = 'world'

  setTimeout(() => {
    $$invalidate(1, (name = 'svelte'))
  }, 1000)
  // 更新關係
  $$self.$$.update = () => {
    if ($$self.$$.dirty & /*name*/ 2) {
      $: $$invalidate(0, (suffix = name + '!'))
    }
  }

  return [suffix, name]
}

Effect分類

React先介紹了兩種典型的Effect

  • 渲染邏輯中可以獲取 props 和 state，並對它們進行轉換，然後返回您希望在屏幕上看到的 JSX。渲染代碼必須是純的，就像數學公式一樣，它只應該計算結果，而不做其他任何事情。
  • 事件處理程式是嵌套在組件內部的函數，它們執行操作而不僅僅做計算。事件處理程式可以更新輸入欄位、提交HTTP POST請求以購買產品或將用戶導航到另一個頁面。它包含由用戶特定操作（例如按鈕點擊或輸入）引起的 “副作用”（它們改變程式的狀態）。

Consider a ChatRoom component that must connect to the chat server whenever it’s visible on the screen. Connecting to a server is not a pure calculation (it’s a side effect) so it can’t happen during rendering. However, there is no single particular event like a click that causes ChatRoom to be displayed.

考慮一個ChatRoom組件，每當它在屏幕上可見時都必須連接到聊天伺服器。連接到伺服器不是一個純粹的計算（它是一個副作用），因此不能在渲染期間發生（渲染必須是純函數）。然而，並沒有單個特定的事件（如點擊）會觸發ChatRoom的展示

Effects let you specify side effects that are caused by rendering itself, rather than by a particular event. Sending a message in the chat is an event because it is directly caused by the user clicking a specific button. However, setting up a server connection is an Effect because it should happen no matter which interaction caused the component to appear. Effects run at the end of a commit after the screen updates. This is a good time to synchronize the React components with some external system (like network or a third-party library).

Effect 允許指定由渲染本身引起的副作用，而不是由特定事件引起的副作用。在聊天中發送消息是一個事件，因為它直接由用戶點擊特定按鈕引起。然而不管是任何交互觸發的組件展示，_設置伺服器連接_都是一個Effect。Effect會在頁面更新後的commit結束時運行。這是與某個外部系統（如網路或第三方庫）同步React組件的好時機

以下Effect儘量達到不重不漏，不重的意義是他們之間是相互獨立的，每個模塊可以獨立實現，這樣可以在系統設計的初期可以將業務Model建設和Effect處理分離，甚至於將Effects提取成獨立的utils

渲染

生命周期

組件被初始化、更新、卸載的時候我們需要做一些業務邏輯處理，例如：組件初始化時調用介面更新數據

React

react基於自己的fiber結構，通過閉包完成狀態的管理，不會建立值和渲染過程的綁定關係，通過在commit之後執行Effect達到值的狀態更新等副作用操作，因此聲明周期需要自己模擬實現

import { useState, useEffect } from 'react';

export default function Hello() {
  const [msg, setMsg] = useState('World')
  // dependency是空 因此只會在第一次執行 聲明周期上可以理解為onMounted
  useEffect(() => {
    // 非同步事件
    const timer = setTimeout(() => {
      // setMsg會觸發重渲染 https://react.dev/learn/render-and-commit
      setMsg('React')
    }, 1000)
    return () => {
      // 卸載時/重新執行Effect前 清除非同步事件
      clearTimeout(timer)
    }
  // 如果dependency有值 則每次更新如果dependency不一樣就會執行Effect
  }, [])
  return (
    <h1>Hello { msg }</h1>
  );
}



<script setup>
import { onMounted, onUnmounted, onUpdated, ref } from 'vue'

const msg = ref('Hello World!')
// 掛載
onMounted(async () => {
  function getValue() {
    return Promise.resolve('hello, vue')
  }
  const value = await getValue()
  msg.value = value
})
onUpdated(() => {}) // 更新
onUnmounted(() => {}) // 卸載
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg">
</template>



<script>
  import { onMount, onDestroy, beforeUpdate } from 'svelte'
  let name = 'world'
  $: suffix = name + '!'

  onMount(() => {
    setTimeout(() => {
      name = 'svelte'
    }, 1000)
  })
  beforeUpdate(() => {}) // 更新
  onDestroy(() => {}) // 卸載/銷毀
</script>

<h1>Hello {suffix}</h1>

Action 用戶行為

對應React中提到的兩個典型Effect中的 事件處理程式

在不考慮跳出應用（location.href='xxx'）的情況下，我們的行為都只能改變當前應用的狀態，不管是輸入、選擇還是觸發非同步事件的提交，網路相關的副作用在下節討論

點擊/輸入

<!-- 原生 要求onClick是全局變數 -->
<div onclick="onClick"/>
<!-- React -->
<div onClick={onClick}/>
<!-- Vue -->
<div @click="onClick"/>
<!-- Svelte -->
<div on:click="onClick"/>

滑動輸入、鍵盤輸入等

<!-- React view和model的關係需要自己處理 -->
<input value={value} onChange={val => setValue(val)} placeholder="enter your name" />
<!-- Vue 通過指令自動建立view和model的綁定關係 -->
<input v-model="name" placeholder="enter your name" />
<!-- Svelte -->
<input bind:value={name} placeholder="enter your name" />

所謂的MVVM即是視圖和模型的綁定關係通過框架(v-mode,bind:valuel)完成，所以需要自己處理綁定關係的React不是MVVM

滾動

同上

Network 網路請求

基礎：XMLHttpRequest,Fetch

NPM包：Axios，useSwr

Storage 存儲

任何存儲行為都是副作用：POST請求、變數賦值、local存儲、cookie設置、URL參數設置

Remote

緩存/資料庫，同上 網路請求

Local

記憶體

  • 局部變數 閉包

React的函數式組件中的useState的值的變更

  • 全局變數 window

瀏覽器環境初始化完成之後，我們的context中就會有window全局變數，修改window的屬性會使同一個頁面環境中的所有內容都被影響（微前端的window隔離方案除外）

LocalStorage

相容localStorage存儲和 原生APP存儲；返回Promise 其實也可以相容從介面獲取、存儲數據

export function getItem(key) {
  const now = Date.now();
  if (window.XWebView) {
    window.XWebView.callNative(
      'JDBStoragePlugin',
      'getItem',
      JSON.stringify({
        key,
      }),
      `orange_${now}`,
      '-1',
    );
  } else {
    setTimeout(() => {
      window[`orange_${now}`](
        JSON.stringify({
          status: '0',
          data: {
            result: 'success',
            data: localStorage.getItem(key),
          },
        }),
      );
    }, 0);
  }
  return new Promise((resolve, reject) => {
    window[`orange_${now}`] = (result) => {
      try {
        const obj = JSON.parse(result);
        const { status, data } = obj;
        if (status === '0' && data && data.result === 'success') {
          resolve(data.data);
        } else {
          reject(result);
        }
      } catch (e) {
        reject(e);
      }
      window[`orange_${now}`] = undefined;
    };
  });
}

export function setItem(key, value = BABEL_CHANNEL) {
  const now = Date.now();
  if (window.XWebView) {
    window.XWebView.callNative(
      'JDBStoragePlugin',
      'setItem',
      JSON.stringify({
        key,
        value,
      }),
      `orange_${now}`,
      '-1',
    );
  } else {
    setTimeout(() => {
      window[`orange_${now}`](
        JSON.stringify({
          status: '0',
          data: {
            result: 'success',
            data: localStorage.setItem(key, value),
          },
        }),
      );
    }, 0);
  }
  return new Promise((resolve, reject) => {
    window[`orange_${now}`] = (result) => {
      console.log('MKT ~ file: storage.js:46 ~ returnnewPromise ~ result:', result);
      try {
        const obj = JSON.parse(result);
        const { status, data } = obj;
        if (status === '0' && data && data.result === 'success') {
          resolve(data.data);
        } else {
          reject(result);
        }
      } catch (e) {
        reject(e);
      }
      window[`orange_${now}`] = undefined;
    };
  });
}

Cookie

https://www.npmjs.com/package/js-cookie

URL

參見地址欄參數

舉個慄子

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

-Advertisement-
Play Games
更多相關文章
  • MySQL高級
    前言： 本篇文章是本人學習MySQL高級的筆記。 資料：《MySQL是怎樣運行的》、《小林Coding-圖解MySQL》、《MySQL45講》、《尚矽谷康師傅MySQL視頻》 一、基礎篇 1. 什麼是關係型資料庫？ 關係型資料庫是指採用了關係模型來組織數據的資料庫，其以行和列的形式存儲數據，一系列的 ...
  • MySQL的最左原則
    一、簡述 MySQL索引的最左原則指的是，當使用多列索引時，MySQL會優先使用索引中最左邊的列。如果查詢條件中包含了索引的最左列，那麼MySQL會使用這個索引來加速查詢。 更具體的描述：建立一個索引，對於索引中的欄位，mysql會一直向右匹配直到遇到範圍查詢(>、<、between、like)就停 ...
  • 快速提升NineData實戰能力：新手任務詳解
    NineData控制台的新手任務旨在幫助新用戶熟悉和掌握其各項功能，包括數據源創建、SQL開發、分鐘級數據恢復、不停機數據遷移和企業協同開發等。通過任務引導和實踐，可以顯著降低使用門檻，提升使用效率，保證數據安全。對於新用戶，玖章算術提供了完整的NineData新手任務實戰指南，覆蓋四大模塊的基礎操... ...
  • 一些問題記錄和快捷按鈕
    JS一些問題記錄 1.switch，break後只會退出switch本身用於防止穿透，外層比如for不會退出，ifbreak的話就會退出整個迴圈 2.三元運算符用於比較簡單的兩個東西之間的比較，也不能輸出列印出來，但是if雙分支就可以 3.同一個頁面兩個for，都用i不會衝突，是兩個局部變數不會影響 ...
  • vue項目打包，解決靜態資源無法載入和路由載入無效(404)問題
    打包後的項目靜態資源無法使用，導致頁面空白 靜態資源無法使用，那就說明項目打包後，圖片和其他靜態資源文件相對路徑不對，此時找到config裡面的index.js，在build模塊下加入assetsPublicPath: './', 如下圖所示， 在History模式下配合使用nginx運行打包後的項 ...
  • 解決浮動帶來影響的方法
    # 浮動會帶來的影響 —— 會造成父標簽塌陷的問題 解決辦法： 方法一：自己加一個div，設置高度 方法二：利用clear屬性 #d1{ clear: left; /*該標簽的左邊(地面和空中)都不能有浮動的元素*/ } 方法三：使用通用方法 在寫HTML代碼前，先提前寫好處理浮動帶來的影響的css ...
  • 記錄--純CSS實現騷氣紅絲帶
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 在本文中，我們將探討如何使用 CSS 以最少的代碼創造出精美的 CSS 絲帶形狀,並最終實現下麵這個效果： 下麵我們使用html和css來實現這個效果。我們使用內容自適應方式佈局，不用擔心裡面的文字長度。本文介紹兩種絲帶：左側的絲帶稱為“ ...
  • Vue響應式
    目錄Vue中的響應式對象獨立的響應式值計算變數監聽響應式變數setup方法 Vue中的響應式對象 Vue3允許在setup()中定義組件需要的數據和方法, 通過return在模板中可以直接使用 reactive方法 <body> <div id = "Application"> </div> <sc ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類