八月我学到了什么

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

2022.08.3

使用 <datalist> 实现 <input> 的 autocomplete

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

2022.08.04

CSS父选择器 :has()

表单校验通过伪类 :valid 和未通过伪类 :invalid

使用 @property 自定义CSS属性

使用 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

React Controlled Input 中的数字输入问题

非预期字符处理：

当 <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

git 中的 tag 有什么用

tag 一般被用来标记“版本”，虽然每个 commit 都有自己的消息体，但要找到某个特定的 commit 还是太麻烦了。所以 tag 类似于给特定的 commit 取一个别名。

查看所有的标签：git tag

创建标签：git tag [tagname]

删除标签：git tag [tagname] -d

查看标签内容：git cat-file -p [tagname]

如何单独合并某一个 commit

git cherry-pick [commit]

盐酸多西环素和盐酸左氧氟沙星

前者是治疗皮肤的，对喉咙有腐蚀性，后者是抗生素，治疗炎症。

名字很像，不要吃错。

2022.08.08

offset 属性

CSS3 新增属性 offset 可以让元素沿着指定的路径进行运动。

offset-anchor ：指定元素运动的中心。

offset-position ：指定元素运动的起始位置。

offset-path : 指定元素在路径上的位置。

offset-distance : 指定元素在路径上的位置。

offset-rotate ：指定元素运动时的指向。

在 CSS 中单独使用 SVG 中的某个元素


mask: url(foo.svg#id);

mask 属性

使用位图或 SVG 元素为目标元素添加遮罩蒙版，可以指定只显示蒙版部分或截去蒙版部分。

useCallback 搭配 memo 使用

当组件重新渲染时，虽然 useCallback不会重新执行，但子组件还是会重新渲染。所以使用 React.memo 包裹组件，这样在 useCallback 的返回函数不变的情况下，子组件也不会重新渲染。

2022.08.09

npm、yarn 和 pnpm

npm 是围绕着语义控制版本的思想设计的，npm3 采用了扁平依赖关系树来解决问题，但npm必须首先遍历所有的项目依赖关系，然后再决定如何生成扁平的node_modules目录结构。npm必须为所有使用到的模块构建一个完整的依赖关系树，这是一个耗时的操作，是npm安装速度慢的一个很重要的原因。

yarn 是经过重新设计的npm客户端。提供离线模式来安装本地缓存的依赖，yarn.lock 文件则包含要安装的内容和校验，以确保使用的库的版本相同。

pnpm 继承了 yarn 的离线安装和确定性能力，且速度超过了前两者。

React-router 中的的state传参


// 跳转传递
const navigat = useNavigate();
navigate('/path',{id:1});

// 接收
const { state } = useLocation()； // {id: 1}

<HashRouter> 不支持 location.key 与 location.state，<HashRouter>通过state传递参数，刷新页面后参数丢失，官方建议使用<BrowserRouter>，<BrowserRouter>页面刷新参数也不会丢失。

React-router 中的路由嵌套

在使用 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

<script type="importmap" > 有什么用

在体验 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 。

设置某个元素下的 CSS 变量


document.querySelect('#id').style.setProperty('--key','value');

2022.08.12

将 UTC 时间转换为本地时间 —— 通过 dayjs


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

Navigate auth 重定向


import { Navigate } from "react-router-dom";
....
return <Navigate to="/login" replace={true} />

2022.08.13

ComponentType

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

2022.08.14

使用 Union 或 Enum 作为对象的 key


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;
};

TypeScript 中 Promise.allSettled 不能直接解构出 status，value 或 reason

2022.08.15

React 的 class component 是实例，生命周期

挂载生命周期

constructor：调用组件的 constructor 方法
getDerivedStateFromProps：让组件在 props 变化时更新state
render：class 组件中唯一必须实现的方法，返回 JSX
componentDidMount：组件挂载后

更新生命周期

getDerivedStateFromProps：在 render 之前调用
shouldComponentUpdate：在 props 或 state 变化时，在渲染之前执行
render
getSnapshotBeforeUpdate：在最近一次渲染输出前调用
componentDidUpdate：在更新后立即被调用

卸载生命周期

componentWillUnmount：组件卸载及销毁话题之前调用

2022.08.19

scroll-snap-type

CSS 简单实现轮播图临界点判断。

2022.08.22

linux 查看当前路径

pwa

2022.08.23

在 react 中引入 svg


import { ReactComponent as Icon } from 'icon.svg';

2022.08.24

原生 JS 支持的深拷贝


const original = { name: "MDN" };
const clone = structuredClone(original);

React class 组件的 setState 方法

setState 的第二个参数为一个callback , 这个callback 将会在 setState 将值更新后执行。

2022.08.26

在 iOS 下自动播放视频


<video autoplay loop muted playsinline />

需要注意，如果在低电量模式下将无法播放。

2022.08.29

content-visibility: auto;

如果元素在可视区内，则正常渲染元素。如果元素不在可视区内，则会跳过。

navigator.clipboard.writeText

复制文字

will-change

告诉浏览器元素会有哪些变化的方法，这样浏览器可以在元素真正发生变化之前提前做好对应的优化准备。

scss extends


.father {
// ...
}

.son {
	@extend .father;
}

2022.08.30

移除项目中的 .DS_Store 文件

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

2022.08.31

next.js 转发


// 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*',
      },
    ];
  },
	//...
}

Affinity Designer 中导出为 SVG 格式时，选择用于导出可以保存完整路径信息，否则会变成 image。