...大约 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，需要复制很多文件。
...大约 5 分钟