2023-04-02 17:44:14
28
0
0
推荐以下两种手动保存状态的方式
将需要保存状态组件的state提升至父组件中保存。
使用 css visible
属性(display还是content-visibility ? )来控制需要保存状态组件的渲染,而不是使用 if/else
,避免React将其卸载。
目前市面上自动状态保存库主要从两方面下手:
改变路由机制,通常基于 React-Router
二次开发。React-Router
在路由切换时默认卸载非活动组件,因此这些库通过重写 React-Router
中的部分功能或者将其拓展的方式使得在路由切换时相关组件不被直接卸载,而是缓存下来。这种实现方式决定了状态保存的粒度只能具体到SPA的页面级别。
改变React组件被移除的方式。React在组件被移除时默认是被卸载的,这些库通过某些方式阻止或欺骗React使相关组件在移除时不被直接卸载,而是缓存下来。通过这种实现方式,状态保存的粒度可以精细到组件级别。
React官方在一些关于 strict mode
的回复中提到了其正在开发的 <Offscreen>
组件,并且预计其在 react@18.X
(非18早期版本)中可能会出现,其功能与vue <keep-alive>
类似。
根据对目前市场上存在的相关解决方案的调研,这里给出以下几点建议:
如果项目中需要状态缓存处理的数据量较小,那最好还是按照React官方的建议,手动解决状态缓存问题。
如果处理数据量较大,且缓存粒度为页面级别,那么推荐使用 react-router-cache-route
。
如果处理数据量较大,且缓存粒度为组件级别,或者你的项目框架采用了umi(无法直接触及react-router),或者干脆没有使用react-router路由,那么推荐使用 react-activation
。此外umi中使用 react-activation
可以直接使用其封装插件 umi-plugin-keep-alive
。
2019-11-14 07:46:24
8
0
0
## **何时使用 Refs**
下面是几个适合使用 refs 的情况:
- 处理焦点、文本选择或媒体控制。 - 触发强制动画。
- 集成第三方 DOM 库
如果可以通过声明式实现,则尽量避免使用 refs。
例如,不要在 Dialog 组件上直接暴露 open() 和 close() 方法,最好传递 isOpen 属性。
****
## **不要过度使用 Refs**
你可能首
2019-11-14 07:46:24
5
0
0
### React.Fragment(`React.Fragment`组件让你在一个render()方法中返回多个元素,而不用创造一个额外的DOM)
您也可以使用简写`<>`语法来使用它, 版本要求: `React v16.2.0`
2019-11-14 07:46:24
12
0
0
1.[官网注册账号并申请Key](https://id.amap.com/)
2. 登陆之后,在进入「应用管理」 页面「创建新应用」
3. 为应用添加Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
```
// mapbase.js
// 随机字符串(给callback使用)
const key = randomStr();
// callback是地图js
2019-11-14 07:46:24
38
0
0
## 在做react项目时,有时候需要将后台传过来的html的字符串变成真正的结构渲染到页面,如果直接插入的话页面显示的就是这段字符串,而不会进行转义,可以用以下方法插入,便可以html的形式展现:
2019-11-14 07:46:24
29
0
0
### axios Content-Type: multipart/form-data(上传文件)
let formData = new FormData();
formData.append('appkey', 'njssdjtkj');
formData.append('sign', sign);
formData.appen
2019-11-14 07:46:24
74
0
0
### pc端-ui库
>
1. Ant Design of React
文档: https://ant.design/docs/react/introduce-cn
***
### H5端-ui库
>
1. Ant Design Mobile of React
预览: https://mobile.ant.design/kitchen-sink/
文档:
2019-11-14 07:46:24
6
0
0
> 1. 调试组件
React Developer Tools
2. 调试redux
Redux DevTools
2019-11-14 07:46:24
8
0
0
> 官网: https://nervjs.github.io/taro/docs/README.html
2019-11-14 07:46:24
92
0
0
## `::`在React中的意义
### 我在看一些项目的时候遇到了::这种写法,查了之后才知道这种是ES7针对.bind的新语法。
#### 例如:在React中我们常见的写法是 ,那么ES7中我们可以按照如下格式方法书写
` `
1/2