Skip to content

Commit

Permalink
Merge pull request #56 from CJY0208/develop
Browse files Browse the repository at this point in the history 
Fix #53,#54
  • Loading branch information
@CJY0208
CJY0208 authored Nov 7, 2019
2 parents 47b4d0e + 0ad596b commit 62f6b4f
Show file tree
Hide file tree
Showing 9 changed files with 58 additions and 42 deletions.
26 changes: 17 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,15 @@ export default App

## CacheRoute props

| name | type | default | description |
| -------------------------------- | --------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| when | `String` / `Function` | `"forward"` | Decide when to cache |
| className | `String` | - | `className` prop for the wrapper component |
| behavior | `Function` | `cached => cached ? { style: { display: "none" }} : undefined` | Return `props` effective on the wrapper component to control rendering behavior |
| cacheKey | `String` | - | For imperative control caching |
| multiple (React v16.3+) | `Boolean` / `Number` | `false` | Allows different caches to be distinguished by dynamic routing parameters. When the value is a number, it indicates the maximum number of caches. When the maximum value is exceeded, the oldest updated cache will be cleared. |
| unmount (UNSTABLE) | `Boolean` | `false` | Whether to unmount the real dom node after cached, to save performance (Will cause losing the scroll position after recovered, fixed with `saveScrollPosition` props) |
| saveScrollPosition (UNSTABLE) | `Boolean` | `false` | Save scroll position |
| name | type | default | description |
| ----------------------------- | --------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| when | `String` / `Function` | `"forward"` | Decide when to cache |
| className | `String` | - | `className` prop for the wrapper component |
| behavior | `Function` | `cached => cached ? { style: { display: "none" }} : undefined` | Return `props` effective on the wrapper component to control rendering behavior |
| cacheKey | `String` | - | For imperative control caching |
| multiple (React v16.2+) | `Boolean` / `Number` | `false` | Allows different caches to be distinguished by dynamic routing parameters. When the value is a number, it indicates the maximum number of caches. When the maximum value is exceeded, the oldest updated cache will be cleared. |
| unmount (UNSTABLE) | `Boolean` | `false` | Whether to unmount the real dom node after cached, to save performance (Will cause losing the scroll position after recovered, fixed with `saveScrollPosition` props) |
| saveScrollPosition (UNSTABLE) | `Boolean` | `false` | Save scroll position |

`CacheRoute` is only a wrapper component that works based on the `children` property of `Route`, and does not affect the functionality of `Route` itself.

Expand All @@ -106,6 +106,14 @@ When the type is `Function`, the component's `props` will be accepted as the fir

---

## CacheSwitch props

| name | type | default | description |
| ----- | ---------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| which | `Function` | `element => element.type === CacheRoute` | `<CacheSwitch>` only saves the first layer of nodes which type is `CacheRoute` **by default**, `which` prop is a function that would receive a instance of React Component, return `true/false` to decide if `<CacheSwitch>` need to save it, reference [#55](https://github.com/CJY0208/react-router-cache-route/issues/55) |

---

## Lifecycles

Component with CacheRoute will accept one prop named `cacheLifecycles` which contains two functions to inject customer Lifecycle `didCache` and `didRecover`
Expand Down
10 changes: 9 additions & 1 deletion README_CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default App
| className | `String` | - | 作用于包裹容器上的样式类名 |
| behavior | `Function` | `cached => cached ? { style: { display: "none" }} : undefined` | 返回一个作用于包裹容器的 `props`，控制包裹容器的渲染方式 |
| cacheKey | `String` | - | 增加此属性用于命令式控制缓存 |
| multiple （React v16.3+） | `Boolean` / `Number` | `false` | 允许按动态路由参数区分不同缓存，值为数字时表示最大缓存份数，超出最大值时将清除最早更新的缓存 |
| multiple （React v16.2+） | `Boolean` / `Number` | `false` | 允许按动态路由参数区分不同缓存，值为数字时表示最大缓存份数，超出最大值时将清除最早更新的缓存 |
| unmount （实验性） | `Boolean` | `false` | 缓存时是否卸载 dom 节点，用于节约性能（单独使用将导致恢复时滚动位置丢失，可配合 saveScrollPosition 修复） |
| saveScrollPosition （实验性） | `Boolean` | `false` | 用以保存滚动位置 |

Expand All @@ -108,6 +108,14 @@ export default App

---

## CacheSwitch 属性说明

| 名称 | 类型 | 默认值 | 描述 |
| ----- | ---------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| which | `Function` | `element => element.type === CacheRoute` | `<CacheSwitch>` 默认只保存第一层子节点中类型为 `CacheRoute` 的节点, `which` 属性是一个将获得待渲染 React 节点实例的方法, 通过返回 `true/false` 来决定 `<CacheSwitch>` 是否需要保存它，参考 [#55](https://github.com/CJY0208/react-router-cache-route/issues/55) |

---

## 额外的生命周期

使用 `CacheRoute` 的组件将会得到一个名为 `cacheLifecycles` 的属性，里面包含两个额外生命周期的注入函数 `didCache` 和 `didRecover`，分别在组件 **被缓存** 和 **被恢复** 时触发
Expand Down
13 changes: 7 additions & 6 deletions dist/cacheRoute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,7 @@
};

var body = get(globalThis, 'document.body');
var screenScrollingElement = get(globalThis, 'document.scrollingElement', get(globalThis, 'document.documentElement', {}));

function isScrollableNode() {
var node = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
Expand All @@ -298,7 +299,7 @@
}

function saveScrollPosition(from) {
var nodes = [].concat(toConsumableArray(new Set([].concat(toConsumableArray(flatten((!isArray(from) ? [from] : from).map(getScrollableNodes))), toConsumableArray([get(globalThis, 'document.documentElement', {}), body].filter(isScrollableNode))))));
var nodes = [].concat(toConsumableArray(new Set([].concat(toConsumableArray(flatten((!isArray(from) ? [from] : from).map(getScrollableNodes))), toConsumableArray([screenScrollingElement, body].filter(isScrollableNode))))));

var saver = nodes.map(function (node) {
return [node, {
Expand Down Expand Up @@ -398,7 +399,7 @@
}, {});
};

var __isUsingNewLifecycle = Number(get(run(React__default, 'version.match', /^\d*\.\d*/), [0])) >= 16.3;
var isUsingNewLifecycle = isExist(React__default.forwardRef);

var COMPUTED_UNMATCH_KEY = '__isComputedUnmatch';
var isMatch = function isMatch(match) {
Expand Down Expand Up @@ -499,7 +500,7 @@
* React 16.3 + 版本中替代 componentWillReceiveProps 的新生命周期
*/
};
_this.componentWillReceiveProps = !__isUsingNewLifecycle ? function (nextProps) {
_this.componentWillReceiveProps = !isUsingNewLifecycle ? function (nextProps) {
var nextState = getDerivedStateFromProps(nextProps, _this.state);

_this.setState(nextState);
Expand Down Expand Up @@ -696,7 +697,7 @@
} : undefined;
}
};
CacheComponent.getDerivedStateFromProps = __isUsingNewLifecycle ? getDerivedStateFromProps : undefined;
CacheComponent.getDerivedStateFromProps = isUsingNewLifecycle ? getDerivedStateFromProps : undefined;

var Updatable = function (_Component) {
inherits(Updatable, _Component);
Expand Down Expand Up @@ -972,7 +973,7 @@
var _location = _this.props.location || route.location;

return {
location: _this.props.location || route.location,
location: _location,
match: route.match
};
}
Expand Down Expand Up @@ -1064,7 +1065,7 @@

CacheSwitch.defaultProps = {
which: function which(element) {
return value(get(element, 'type.componentName'), get(element, 'type.displayName')) === 'CacheRoute';
return get(element, 'type') === CacheRoute;
}
};

Expand Down
Loading

0 comments on commit 62f6b4f

Please sign in to comment.