...大约 7 分钟
react 组件封装
水印组件封装
使用 Canvas 生成水印，并使用 MutationObserve （可以监听 DOM 结构变化的接口）监视 DOM 的变动，使得水印不可被删除、且属性不可被修改
源码如下
import * as React from "react";
import { watermark } from "../../utils/watermark";
export default class WaterMark extends React.Component {
constructor(props) {
super(props);
this.container = null;
}
componentDidMount() {
const { style, ...options } = this.props;
watermark({
container: this.container,
...options,
});
}
render() {
const style = {
position: "relative",
...this.props.style,
};
return (
<div ref={(el) => (this.container = el)} id="watermark" style={style}>
{this.props.children}
</div>
);
}
}
...大约 2 分钟
React 18Beta 版
简介
React 18 包括对现有功能的开箱即用的改进。它也是第一个添加对并发功能支持的 React 版本，这让您可以以 React 以前不允许的方式改善用户体验，并发功能是可选的，可以逐渐采用
安装
npm install react@beta react-dom@beta
...大约 8 分钟
Dva
dva 一个轻量级的应用框架 1.路由： React-Router 2.架构： Redux 3.异步操作： Redux-saga
将上面三个 React 工具库包装在一起，简化了 API，让开发 React 应用更加方便和快捷
redux 存在的问题
概念太多，并且 reducer, saga, action 都是分离的（分文件）
编辑成本高，需要在 reducer, saga, action 之间来回切换
不便于组织业务模型 (或者叫 domain model) 。比如我们写了一个 userlist 之后，要写一个 productlist，需要复制很多文件。
saga 书写太复杂，每监听一个 action 都需要走 fork -> watcher -> worker 的流程
...大约 5 分钟