🌞Moon Will Know
📅

八月我学到了什么

对数字列表或二级block的显示有问题，先放下原文在这里，后续会修复下这个bug(已修复）

2022.08.3

  1. 使用 <datalist> 实现 <input> 的 autocomplete
      2. 为 <input> 标签的 list 属性指定一个 id ，该 id 对应一个包含 <option> 的 <datalist> 标签作为 autocomplete 的数据来源。
 

2022.08.04

  1. CSS父选择器 :has()
  1. 表单校验通过伪类 :valid 和未通过伪类 :invalid
  1. 使用 @property 自定义CSS属性
      2. 使用 CSS 语法定义
      /* 定义属性 */
@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

/* 修改属性 */
--my-color: #ffffff;
      使用 DOM 语法定义
      window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: '#c0ffee',
});

2022.08.05

  1. React Controlled Input 中的数字输入问题
      2. 非预期字符处理：
      当 <input> 标签的 type 被设置为 number 时，用户可以输入科学记数法的 e ，一开始尝试在 onChange 事件中将 e 匹配并去除，input 的 value 属性确实显示为 ‘’ ，但界面并没有更新。
      但其实可输入的非预期字符还要多 ['e', 'E', '+', '-']
      解决方法：
      const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    const exceptThisSymbols = ['e', 'E', '+', '-', '.'];
    return exceptThisSymbols.includes(e.key) && e.preventDefault();
  };
      限制小数输入位数：
      在 onChange 事件中
      const handleInputChange = (e: changeEvnet<HTMLInputElement>) => {
	let value = e.target.value;
	//...
	value = value.replace(/\D*(\d*)(\.?)(\d{0,2})\d*/, '$1$2$3');
	//...
}
      input 标签
      <input pattern="[0-9]*.?[0-9]{0,2}" />
      onBlur 时去掉末尾的 . :
      当 input 标签为 number 时，末尾的 . 字符并不会被算在 value 中，因此也不会被 state 记录，所以这个 . 就处在一个非法地带。
      所以去除它并不能通过简单的更新。而是需要先将值置空，再重新赋值。而且因为 React18 中的更新合并，还需要使用 flushSync 来使两次赋值生效。
      const [value,setValue] = useState();

const handleInputBlur = (e: FocusEvent<HTMLInputElement>) => {
		let preVal = value;
    flushSync(() => {
      setValue('');
    });
    setValue(preVal);
}

2022.08.05

  1. git 中的 tag 有什么用
      2. tag 一般被用来标记“版本”，虽然每个 commit 都有自己的消息体，但要找到某个特定的 commit 还是太麻烦了。所以 tag 类似于给特定的 commit 取一个别名。
      • 查看所有的标签：git tag
      • 创建标签：git tag [tagname]
      • 删除标签：git tag [tagname] -d
      • 查看标签内容：git cat-file -p [tagname]
  1. 如何单独合并某一个 commit
      2. git cherry-pick [commit]
  1. 盐酸多西环素 和 盐酸左氧氟沙星
      2. 前者是治疗皮肤的，对喉咙有腐蚀性，后者是抗生素，治疗炎症。
      名字很像，不要吃错。

2022.08.08

  1. offset 属性
      2. CSS3 新增属性 offset 可以让元素沿着指定的路径进行运动。
      offset-anchor ：指定元素运动的中心。
      offset-position ：指定元素运动的起始位置。
      offset-path : 指定元素在路径上的位置。
      offset-distance : 指定元素在路径上的位置。
      offset-rotate ：指定元素运动时的指向。
  1. 在 CSS 中单独使用 SVG 中的某个元素
      2. mask: url(foo.svg#id);
  1. mask 属性
      2. 使用位图或 SVG 元素为目标元素添加遮罩蒙版，可以指定只显示蒙版部分或截去蒙版部分。
  1. useCallback 搭配 memo 使用
      2. 当组件重新渲染时，虽然 useCallback不会重新执行，但子组件还是会重新渲染。所以使用 React.memo 包裹组件，这样在 useCallback 的返回函数不变的情况下，子组件也不会重新渲染。

2022.08.09

  1. npm、yarn 和 pnpm
      • npm 是围绕着语义控制版本的思想设计的，npm3 采用了扁平依赖关系树来解决问题，但npm必须首先遍历所有的项目依赖关系，然后再决定如何生成扁平的node_modules目录结构。npm必须为所有使用到的模块构建一个完整的依赖关系树，这是一个耗时的操作，是npm安装速度慢的一个很重要的原因 。
      • yarn 是经过重新设计的npm客户端。提供离线模式来安装本地缓存的依赖，yarn.lock 文件则包含要安装的内容和校验，以确保使用的库的版本相同。
      • pnpm 继承了 yarn 的离线安装和确定性能力，且速度超过了前两者。
  1. React-router 中的的state传参
      2. // 跳转传递
const navigat = useNavigate();
navigate('/path',{id:1});

// 接收
const { state } = useLocation()； // {id: 1}
      <HashRouter> 不支持 location.key 与 location.state，<HashRouter>通过state传递参数，刷新页面后参数丢失，官方建议使用<BrowserRouter>，<BrowserRouter>页面刷新参数也不会丢失。
  1. React-router 中的路由嵌套
      2. 在使用 React-router 时，使用嵌套的路由结构，并在父组件的相应位置使用 <Outlet/> 组件进行占位。
      const App = () => {
	return (
		<BrowserRouter>
      <Routes>
        <Route path="/" element={<Parent />}>
					{/* Child 组件在 Parent 组件内 */}
          <Route path="test" element={<Child />} />
        </Route>
      </Routes>
		</BrowserRouter>
	)
}
      通过 <Outlet/> 进行传参，通过 <Outlet/> 组件的 context 组件传递 props，再通过 useOutletContext 钩子在自组件中获取 props 。
      const Parent = () => {
  const onChange = (v) => {
    console.log('parent:', v);
  };
  return (
    <div>
      <Link to="/test">child</Link>
      <Outlet context={{ onChange }} />
    </div>
  );
};

const Child = () => {
  const [count, setCount] = React.useState(0);
  const { onChange } = useOutletContext<{
    onChange: (v: number) => void;
  }>();

  return (
    <React.Fragment>
      <div
        onClick={() => {
          onChange(count);
        }}
      >
        点击子传父
      </div>
      <div
        onClick={() => {
          setCount((c) => c + 1);
        }}
      >
        {count}+1
      </div>
    </React.Fragment>
  );
};

2022.08.011

  1. <script type="importmap" > 有什么用
      2. 在体验 spline 的操作时，可以直接导出为 three.js 代码，在源码中发现这样的用法
      index.html
      <!--
...
-->
<script type="importmap">
      {
        "imports": {
          "@splinetool/loader": "https://unpkg.com/@splinetool/[email protected]/build/SplineLoader.js",
          "three": "https://unpkg.com/[email protected]/build/three.module.js",
          "three/": "https://unpkg.com/[email protected]/"
        }
      }
</script>
<script type="module" src="./src/main.js"></script>
<!--
...
-->
      main.js
      import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import SplineLoader from '@splinetool/loader';
      在 importmap 中声明的组件会动态引入，在 module 类型的 JavaScript 中 可以直接 import 。
  1. 设置某个元素下的 CSS 变量
      2. document.querySelect('#id').style.setProperty('--key','value');

2022.08.12

  1. 将 UTC 时间转换为本地时间 —— 通过 dayjs
      2. import dayjs from 'dayjs';
import utc from 'dayjs/pulgins/utc';

dayjs.extend(utc);

dayjs.utc('2022-08-12 00:00:00').local().format('YYYY-MM-dd HH:mm')
// 2022-08-12 08:00:00
  1. Navigate auth 重定向
      2. import { Navigate } from "react-router-dom";
....
return <Navigate to="/login" replace={true} />

2022.08.13

  1. ComponentType
      2. React 组件类型最佳使用定义，包含函数组件定义和类组件定义。

2022.08.14

  1. 使用 Union 或 Enum 作为对象的 key
      2. enum EmailStatus {
  Read = 'READ',
  Unread = 'UNREAD',
  Draft = 'DRAFT',
}

type Status = {
  [key in EmailStatus]: string;
};

type EmailStatuses = 'Read' | 'Unread' | 'Draft';

type StatusFromUnion = {
  [key in EmailStatuses]: string;
};
  1. TypeScript 中 Promise.allSettled 不能直接解构出 status，value 或 reason

2022.08.15

  1. React 的 class component 是实例，生命周期
      • 挂载 生命周期
        • constructor：调用组件的 constructor 方法
        • getDerivedStateFromProps：让组件在 props 变化时 更新state
        • render：class 组件中唯一必须实现的方法，返回 JSX
        • componentDidMount：组件挂载后
      • 更新 生命周期
        • getDerivedStateFromProps：在 render 之前调用
        • shouldComponentUpdate：在 props 或 state 变化时，在渲染之前执行
        • render
        • getSnapshotBeforeUpdate：在最近一次渲染输出前调用
        • componentDidUpdate：在更新后立即被调用
      • 卸载 生命周期
        • componentWillUnmount：组件卸载及销毁话题之前调用

2022.08.19

  1. scroll-snap-type
      2. CSS 简单实现轮播图临界点判断。

2022.08.22

  1. linux 查看当前路径
      2. pwa

2022.08.23

  1. 在 react 中引入 svg
      2. import { ReactComponent as Icon } from 'icon.svg';

2022.08.24

  1. 原生 JS 支持的深拷贝
      2. const original = { name: "MDN" };
const clone = structuredClone(original);
  1. React class 组件的 setState 方法
      2. setState 的第二个参数为一个callback , 这个callback 将会在 setState 将值更新后执行。

2022.08.26

  1. 在 iOS 下自动播放视频
      2. <video autoplay loop muted playsinline />
      需要注意，如果在低电量模式下将无法播放。

2022.08.29

  1. content-visibility: auto;
      2. 如果元素在可视区内，则正常渲染元素。如果元素不在可视区内，则会跳过。
  1. navigator.clipboard.writeText
      2. 复制文字
  1. will-change
      2. 告诉浏览器元素会有哪些变化的方法，这样浏览器可以在元素真正发生变化之前提前做好对应的优化准备。
  1. scss extends
      2. .father {
// ...
}

.son {
	@extend .father;
}

2022.08.30

  1. 移除项目中的 .DS_Store 文件
    1. 在 .gitignore 文件 中 添加 .DS_Store
    2. 移除已经被 git 追踪的文件 git rm --cached .DS_Store

2022.08.31

  1. next.js 转发
      2. // next.config.js
module.exports = {
	//...
	async rewrites() {
    return [
			// 将 pages/index/index.tsx 转发到 /index
      {
        source: '/',
        destination: '/index',
      },
			// node 转发接口
      {
        source: '/web-api/:path*',
        destination: 'https://dev-api.metaclassn.com/:path*',
      },
    ];
  },
	//...
}
  1. Affinity Designer 中导出为 SVG 格式时，选择用于导出可以保存完整路径信息，否则会变成 image。