1-泛型接口
这实际上是一个泛型接口,在内部通过交叉类型将msg传入合并
2-typescript
React.FunctionComponent等价于React.FC
style对应的ts为React.CSSProperties
高阶组件中的ts类型
input元素的change事件对象:React.ChangeEvent
兼容ts的高阶组件写法
为函数组件添加静态属性
3-useRef
始终获取的是最终值,可以避免更新,并不总是绑定dom
当我们先点击click me后再点击look num,之后再点click me,3s后的结果是1.这是因为在任意一次render中,state和props是独立的、不变的
使用useRef则始终获取的是引用值,即最终值
与dom/组件绑定
模拟updated
4-色彩:www.zhongguose.com
5-由scss提供的!default关键字会优先使用子属性值
6-normalize.css --github搜索
7-scss
scss文件以_开头标识不编译到scss文件,只能使用@import作为模块导入时且不需要_
8-className工具
cnpm i classnames --save安装
使用
9-ts工具类型
https://www.typescriptlang.org/docs/handbook/utility-types.html 文档
https://www.jianshu.com/p/e64156583ef0
10-测试
jest
npx jest fileName --watch
jest文档:https://www.bookstack.cn/read/jest-25.1-zh/a1f3e8269a5287ab.md#%E6%95%B0%E5%AD%97
中文:https://jestjs.io/zh-Hans/docs/mock-functions
博客:https://www.jianshu.com/p/b271e1395167
测试自定义hooks:https://github.com/testing-library/react-hooks-testing-library
react专属测试框架:https://testing-library.com/docs/react-testing-library/intro/
测试hooks
@testing-library/react-hooks
https://blog.csdn.net/weixin_39305620/article/details/107513052
https://github.com/testing-library/react-hooks-testing-library
使用
import { render } from '@testing-library/react' 引入render,该函数会将组件渲染到内存,就像一个不可见的html节点
describe + it 相当于 switch + case
定时测试
useFakeTimers放在beforeEach中挂起计时器
runAllTimers并非真的等待一定时长,直接执行计时器
enzyme
https://enzymejs.github.io/enzyme/docs/installation/react-16.html
11-图标:
安装依赖
cnpm i --save @fortawesome/fontawesome-svg-core
cnpm i --save @fortawesome/free-solid-svg-icons
cnpm i --save @fortawesome/react-fontawesome
地址 https://fontawesome.com/icons?d=gallery&p=2&s=solid&m=free
https://github.com/FortAwesome/react-fontawesome/tree/development
12-omit.js 过滤对象属性
13-reactDom
import ReactDom from 'react-dom' 引入
api
ReactDom.render('要挂载的组件','组件要挂载的节点','挂载后的回调')
ReactDom.unmountComponentAtNode('从哪个节点卸载dom')
ReactDom.findDOMNode('组件实例')
ReactDom.createPortal('要挂载的组件','组件要挂载的节点')
14-rmc-feedback原生app视觉反馈
15-rmc-dialog弹窗库
16-在线mock
http://www.mockhttp.cn/html/help.html
17-获取路由信息
import createHashHistory from 'history/createHashHistory';
const hashHistory=createHashHistory();
18-react新生命周期
static getDerivedStateFromProps 将props的值映射到组件内state
getSnapshotBeforeUpdate 组件更新之前,将参数返回并传递给componentDidUpdate周期函数
19-对象比较
https://www.jianshu.com/p/90ed8b728975
20-算法
https://github.com/youngyangyang04/leetcode-master
21- 修改npm包
https://www.cnblogs.com/linx/p/13367570.html
https://blog.jijian.link/2020-07-23/webpack-alter-file/
https://github.com/neutrinojs/webpack-chain
https://blog.csdn.net/yeluoxiang/article/details/107526958
22-html字符串转dom
var parser = new DOMParser();
var resXML = parser.parseFromString(htmlStr, 'text/html');
或
var fragment = document.createElement('div');
fragment.innerHTML = tb;
转字符串
var tempNode = document.createElement('div');
tempNode.appendChild(dom.cloneNode(true));
var nodeStr = tempNode.innerHTML;
tempNode = dom = null;
23-常用moment操作
https://blog.csdn.net/weixin_44111864/article/details/109049340
http://momentjs.cn/docs/#/parsing/ 文档
24-拖拽库
react-dnd-html5-backend
react-dnd
示例:https://www.jianshu.com/p/81c1735b1944
25-复制文本(react-copy-to-clipboard)
26-桌面通知
https://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API/Using_the_Notifications_APICN/docs/Web/API/Notifications_API/Using_the_Notifications_API
27-h5文档
https://developer.mozilla.org/zh-CN/docs/Web/API 全js文档
28-多线程
web workers
28-antd的form表单自定义触发error
29-区间存在交集
30-eval和new Function
eval函数即可以访问全局,也可以访问闭包
new Function不能访问闭包
31-with
https://blog.csdn.net/zwkkkk1/article/details/79725502
32-快速访问github
gitee中下载dev-sidecar
33-cdn
https://www.bootcdn.cn/
34-node调试
--inspect-brk
浏览器输入chrome://inspect/#devices
35-JSON
https://www.sojson.com/
36-antd Form表单的setFieldsValue