React 學習筆記 - 框架優勢、XSS、CSS in JS 使用方式 - Part 2

大分類
Frontend
By Mark.Ku
React get start

react 學習筆記

react 框架的成功關鍵

雙向挷定的問題

雙向挷定主要透過數據的改變，動態改變 UI ，應用程式越來大，大多數情況不需要雙向綁定，反而造成效能的消耗，數據也越來越不好控制。
Angular - AngularJs 雙單向數據，衍伸的問題太多，Angular 2 以後也採單向數據流。
Vue - 單向數據流框架，v-model 只是語法糖，用來減少 控制數據流向的代碼，讓用戶的操作可以通過單向的數據流向 更新到綁定值中，綁定值在通過更新渲染更新到頁面上。

單向渲染

數據和界面挷定，就好像一個函數，同樣的輸入參數，輸出同樣的組件。

虛擬dom

瀏覽器操作 dom 成本很高，js 模擬出 DOM 抽像層，用最小代價達成部份渲染更新。

元件化

一個應用是無數的元件我搭建，元件本身擁有著獨立、完整、自由組合特性，可以使

  • 一致性
  • 視覺風格統一
  • 有利程式開發協作

react xss

{html} => 在 jsx 模板中被渲染時，xss 相關字元，轉換成特殊字元轉成編碼字串，如果要渲染 Html，得透過 dangerouslySetInnerHTML ，但要小心使用。

import React from "react";
import logo from "./logo.svg";

import Robot from "Robot";
import "App.css";

function App() {
  let html = "<img alt='rebot' src='https://robohash.org/GDZ.png?set=set3'} />";
  let jsHack = "javascript: alert('123')";  

  let user = { name: "hannah </script><script>alert(1);//" };

  return (
    <div className="App">      

      <span dangerouslySetInnerHTML= />
      <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
      >
        Learn Reactaa
      </a>
      {/* <Robot id="GDZ.png?set=set3" email="edaad" name="mark" /> */}
      <a href={jsHack}>JShACK</a>
      {html}
    </div>
  );
}

export default App;

react 引用 css 方法

1. 直接引入整個css 文件

import './index.css'
<div className="app" />

P.S.這樣匯入可能造成，全域 css 汙染

2. 在組件中寫css

import React from "react";

class Header extends React.Component {
	style1 = {
		background: 'red',
		height: '25px'
	};	
	 	
  render() {
    return (
		<div  style={this.style1}>		
			123
		</div>
    );
  }
}

export default Header;

3. css in js ( JSS 模快化引入 )

css in js 的特性是，最後渲染結果的 CssName 會是動態生成的，但好處是可以按使用需求使用 CSS 才引入使用。 宣告 css 模塊。

global.d.ts
declare module "*.module.css" {
    const classes: { [key: string]: string}
    export default classes
}

declare module "*.module.scss" {
    const classes: { [key: string]: string}
    export default classes
}
  

import style from './index'
<div className={styles.app}>

vscode 智能提示 css in Js 功能( 安裝 typescript css 模塊組件 )

npm install typescript-plugin-css-modules --save --dev

修改 tsconfig.json 設定檔，加入 plugins

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    ...
  
    "plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ]
    ...
	...
   "include": [
	"global.d.ts"
   ]
   ...
  },
}

加入 vs code 配置( .vscode\settings.json )

{
	"typescript.tsdk": "node_modules/typescript/lib",
	"typescript.enablePromptUseWorkspaceTsdk": true,
	"typescript.tsserver.pluginPaths": ["typescript-plugin-css-modules"]
}

此時 vs code 會提示，按下允許，重啟 vs code，就能擁有模塊的 css 模組的自動提示

自動提示功能

P.S. 從React 底層，發現，圖片格式及其他類型 react moudule 都預設宣告好了，直接引就好行了