差異處

這裏顯示兩個版本的差異處。

--- guide:frontend-dev [2022/05/17 07:00] – admin_wi1d5ky
+++ guide:frontend-dev [2022/06/25 18:06] (目前版本) – [map & object 的使用時機] admin_wi1d5ky
@@ 行 1: / 行 1: @@
 # 前端開發指南
+## 圖片
+```html
+<img
+  src="pic_1x.jpg"
+  srcset="pic_1x.jpg 1x, pic_2x.jpg 2x"
+/>
+```
+---
+## lazy import
+```jsx
+import React, { useState, createElement } from 'react';
+import MessageList from './MessageList';
+import MessageInput from './MessageInput';
+import ErrorBoundary from './ErrorBoundary';
+const Channel = () => {
+  const [emojiPickerEl, setEmojiPickerEl] = useState(null);
+  const openEmojiPicker = () => {
+    import(/* webpackChunkName: "emoji-picker" */ './EmojiPicker')
+      .then(module => module.default)
+      .then(emojiPicker => {
+        setEmojiPickerEl(createElement(emojiPicker));
+      });
+  };
+  const closeEmojiPickerHandler = () => {
+    setEmojiPickerEl(null);
+  };
+  return (
+    <ErrorBoundary>
+      <div>
+        <MessageList />
+        <MessageInput onClick={openEmojiPicker} />
+        {emojiPickerEl}
+      </div>
+    </ErrorBoundary>
+  );
+};
+```
+---
+## map & object 的使用時機
+### 使用 Map：
+  * 储存的键不是字符串/数字/或者 Symbol 时，选择 Map，因为 Object 并不支持
+  * 储存大量的数据时，选择 Map，因为它占用的内存更小
+  * 需要进行许多新增/删除元素的操作时，选择 Map，因为速度更快
+  * 需要保持插入时的顺序的话，选择 Map，因为 Object 会改变排序
+  * 需要迭代/遍历的话，选择 Map，因为它默认是可迭代对象，迭代更为便捷
+### 使用 Object：
+  * 只是简单的数据结构时，选择 Object，因为它在数据少的时候占用内存更少，且新建时更为高效
+  * 需要用到 JSON 进行文件传输时，选择 Object，因为 JSON 不默认支持 Map
+  * 需要对多个键值进行运算时，选择 Object，因为句法更为简洁
+  * 需要覆盖原型上的键时，选择 Object
+Src: <https://zhuanlan.zhihu.com/p/358378689>
+---
 ## PDF 頁面開發