Skip to content

Commit

Permalink
Merge pull request #2 from CJY0208/develop
Browse files Browse the repository at this point in the history 
- `<KeepAlive>` 增加 `when` 属性用以自动控制缓存
- 修复 `<React.Suspense>`、`React.lazy` 层级破坏性问题
- `Bridge` 机制抽象化
- 更新 README
  • Loading branch information
@CJY0208
CJY0208 authored Sep 17, 2019
2 parents 510ce95 + d68cab6 commit 02c191d
Show file tree
Hide file tree
Showing 15 changed files with 457 additions and 112 deletions.
89 changes: 78 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,35 +156,99 @@ function App() {

- - -

## Manually control the cache
## Cache Control

1. Add the `name` attribute to the `<KeepAlive />` tag that needs to control the cache.
### Automatic control cache

Add the `when` attribute to the `<KeepAlive />` tag that needs to control the cache. The value is as follows

#### When the `when` type is `Boolean`

- **true**: Cache after uninstallation
- **false**: Not cached after uninstallation

```javascript
<KeepAlive when={false}>
```

#### When the `when` type is `Array`

The **1th** parameter indicates whether it needs to be cached at the time of uninstallation.

The **2th** parameter indicates whether to unload all cache contents of `<KeepAlive>`, including all `<KeepAlive>` nested in `<KeepAlive>`.

```javascript
// For example:
// The following indicates that it is not cached when uninstalling
// And uninstalls all nested `<KeepAlive>`
<KeepAlive when={[false, true]}>
...
<KeepAlive>
...
<KeepAlive>
...
</KeepAlive>
...
</KeepAlive>
...
</KeepAlive>
```

#### When the `when` type is `Function`

The return value is the above `Boolean` or `Array`, which takes effect as described above.

### Manually control the cache

1. Add the `name` attribute to the `<KeepAlive>` tag that needs to control the cache.

2. Get control functions using `withAliveScope` or `useAliveController`

- **drop(name)**

Unload the `<KeepAlive />` node in cache state by name. The name can be of type `String` or `RegExp`. Note that only the first layer of content that hits KeepAlive is unloaded and will not be uninstalled in KeepAlive. Nested, missed KeepAlive
Unload the `<KeepAlive>` node in cache state by name. The name can be of type `String` or `RegExp`. Note that only the first layer of content that hits `<KeepAlive>` is unloaded and will not be uninstalled in `<KeepAlive>`. Would not unload nested `<KeepAlive>`

- **dropScope(name)**

Unloads the `<KeepAlive />` node in cache state by name. The name optional type is `String` or `RegExp`, which will unload all content of KeepAlive, including all KeepAlive nested in KeepAlive.
Unloads the `<KeepAlive>` node in cache state by name. The name optional type is `String` or `RegExp`, which will unload all content of `<KeepAlive>`, including all `<KeepAlive>` nested in `<KeepAlive>`.

- **clear()**

will clear all `<KeepAlive />` in the cache
will clear all `<KeepAlive>` in the cache

- **getCachingNodes()**

Get all the nodes in the cache

```javascript
...
import { withAliveScope, useAliveController } from 'react-activation'
import KeepAlive, { withAliveScope, useAliveController } from 'react-activation'
...
<KeepAlive name="Test">
...
<KeepAlive>
...
<KeepAlive>
...
</KeepAlive>
...
</KeepAlive>
...
</KeepAlive>
...
function App() {
const { drop, dropScope, clear, getCachingNodes } = useAliveController()

useEffect(() => {
drop('Test')
// or
drop(/Test/)
// or
dropScope('Test')

clear()
})

return (
...
)
Expand All @@ -209,10 +273,12 @@ class App extends Component {

Pass the `children` attribute of `<KeepAlive />` to `<AliveScope />` and render it with `<Keeper />`

After rendering `<Keeper />`, the content is transferred to `<KeepAlive />` through DOM operation.
After rendering `<Keeper />`, the content is transferred to `<KeepAlive />` through `DOM` operation.

Since `<Keeper />` will not be uninstalled, caching can be implemented.

<img src="./docs/reactActivationPrinciple.gif">

- - -

## Breaking Change
Expand Down Expand Up @@ -305,8 +371,9 @@ Since `<Keeper />` will not be uninstalled, caching can be implemented.

Choose a repair method

- Create `Context` using `createContext` exported from `react-activation`
- Fix the affected `Context` with `fixContext` exported from `react-activation`
- Create `Context` using `createContext` exported from `react-activation`

- Fix the affected `Context` with `fixContext` exported from `react-activation`

```javascript
...
Expand All @@ -328,7 +395,7 @@ Since `<Keeper />` will not be uninstalled, caching can be implemented.

3. Affects the functionality that depends on the level of the React component, as follows

- [x] ~~Error Boundaries (fixed)~~
- [ ] React.Suspense & React.lazy (to be fixed)
- [x] ~~Error Boundaries~~ (Fixed)
- [x] ~~React.Suspense & React.lazy~~ (Fixed)
- [ ] React Synthetic Event Bubbling Failure
- [ ] Other undiscovered features
101 changes: 89 additions & 12 deletions README_CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,24 +154,98 @@ function App() {

- - -

## 手动控制缓存
## 缓存控制

### 自动控制缓存

给需要控制缓存的 `<KeepAlive />` 标签增加 `when` 属性，取值如下

#### 当 `when` 类型为 `Boolean` 时

- **true**: 卸载时缓存
- **false**: 卸载时不缓存

```javascript
<KeepAlive when={true}>
```

#### 当 `when` 类型为 `Array` 时

**第 1 位**参数表示是否需要在卸载时缓存

**第 2 位**参数表示是否卸载 `<KeepAlive>` 的所有缓存内容，包括 `<KeepAlive>` 中嵌套的所有 `<KeepAlive>`

```javascript
// 例如：以下表示卸载时不缓存，并卸载掉嵌套的所有 `<KeepAlive>`
<KeepAlive when={[false, true]}>
...
<KeepAlive>
...
<KeepAlive>
...
</KeepAlive>
...
</KeepAlive>
...
</KeepAlive>
```

#### 当 `when` 类型为 `Function` 时

返回值为上述 `Boolean` 或 `Array`，依照上述说明生效

### 手动控制缓存

1. 给需要控制缓存的 `<KeepAlive />` 标签增加 `name` 属性

2. 使用 `withAliveScope` 或 `useAliveController` 获取控制函数

- **drop(name)**: 按 name 卸载缓存状态下的 KeepAlive 节点，name 可选类型为 `String` 或 `RegExp`，注意，仅卸载命中KeepAlive 的第一层内容，不会卸载 KeepAlive 中嵌套的、未命中的 KeepAlive
- **dropScope(name)**：按 name 卸载缓存状态下的 KeepAlive 节点，name 可选类型为 `String` 或 `RegExp`，将卸载命中KeepAlive 的所有内容，包括 KeepAlive 中嵌套的所有 KeepAlive
- **clear()**：将清空所有缓存中的 KeepAlive
- **getCachingNodes()**：获取所有缓存中的节点
- **drop(name)**:

按 name 卸载缓存状态下的 `<KeepAlive>` 节点，name 可选类型为 `String` 或 `RegExp`，注意，仅卸载命中 `<KeepAlive>` 的第一层内容，不会卸载 `<KeepAlive>` 中嵌套的、未命中的 `<KeepAlive>`

- **dropScope(name)**

按 name 卸载缓存状态下的 `<KeepAlive>` 节点，name 可选类型为 `String` 或 `RegExp`，将卸载命中 `<KeepAlive>` 的所有内容，包括 `<KeepAlive>` 中嵌套的所有 `<KeepAlive>`

- **clear()**

将清空所有缓存中的 KeepAlive


- **getCachingNodes()**

获取所有缓存中的节点

```javascript
...
import { withAliveScope, useAliveController } from 'react-activation'
import KeepAlive, { withAliveScope, useAliveController } from 'react-activation'
...
<KeepAlive name="Test">
...
<KeepAlive>
...
<KeepAlive>
...
</KeepAlive>
...
</KeepAlive>
...
</KeepAlive>
...
function App() {
const { drop, dropScope, clear, getCachingNodes } = useAliveController()

useEffect(() => {
drop('Test')
// or
drop(/Test/)
// or
dropScope('Test')

clear()
})

return (
...
)
Expand All @@ -196,10 +270,12 @@ class App extends Component {

将 `<KeepAlive />` 的 `children` 属性传递到 `<AliveScope />` 中，通过 `<Keeper />` 进行渲染

`<Keeper />` 完成渲染后通过 DOM 操作，将内容转移到 `<KeepAlive />` 中
`<Keeper />` 完成渲染后通过 `DOM` 操作，将内容转移到 `<KeepAlive />` 中

由于 `<Keeper />` 不会被卸载，故能实现缓存功能

<img src="./docs/reactActivationPrinciple.gif">

- - -

## Breaking Change 由实现原理引发的额外问题
Expand Down Expand Up @@ -238,7 +314,7 @@ class App extends Component {

`ClassComponent` 中上述错误可通过利用 `withActivation` 高阶组件修复

`FunctionComponent` 目前暂无处理方式，可使用 setTimeout 或 nextTick 延时获取 ref
`FunctionComponent` 目前暂无处理方式，可使用 `setTimeout` 或 `nextTick` 延时获取 `ref`

```javascript
@withActivation
Expand Down Expand Up @@ -292,8 +368,9 @@ class App extends Component {

修复方式任选一种

- 使用从 `react-activation` 导出的 `createContext` 创建上下文
- 使用从 `react-activation` 导出的 `fixContext` 修复受影响的上下文
- 使用从 `react-activation` 导出的 `createContext` 创建上下文

- 使用从 `react-activation` 导出的 `fixContext` 修复受影响的上下文

```javascript
...
Expand All @@ -315,7 +392,7 @@ class App extends Component {

3. 对依赖于 React 层级的功能造成影响，如下

- [x] ~~Error Boundaries（已修复）~~
- [ ] React.Suspense & React.lazy（待修复）
- [x] ~~Error Boundaries~~（已修复）
- [x] ~~React.Suspense & React.lazy~~（已修复）
- [ ] React 合成事件冒泡失效
- [ ] 其他未发现的功能
Binary file added docs/reactActivationPrinciple.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-activation",
"version": "0.0.2",
"version": "0.1.0",
"description": "<KeepAlive /> for React like <keep-alive /> in vue",
"main": "index.js",
"scripts": {
Expand Down
Loading

0 comments on commit 02c191d

Please sign in to comment.