NaNoWriMo Promotes Manuscription
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@rcp/c.keepalive

1.0.12 • Public • Published

@rcp/c.keepalive

NPM version NPM Downloads

Keep react component view / store when switched view rather than unmount it.

Installation

npm install @rcp/c.keepalive
# or use yarn 
yarn add @rcp/c.keepalive

Usage

import KeepAlive, { bindKeepAliveLifeCycle } from '@rcp/c.keepalive'
import '@rcp/c.keepalive/style.less'
 
@bindKeepAliveLifeCycle
class Content extends React.Component {
    // 新增的生命周期
    componentWillActive({newValue, oldValue}) {}
    componentDidActive({newValue, oldValue}) {}
    componentWillUnactive({newValue, oldValue}) {}
    componentDidUnactive({newValue, oldValue}) {}
}
 
<KeepAlive uniqKey="/home" >
    <Content>Home</Content>
<KeepAlive>
// LifeCycle
// componentWillActive => {newValue: '/home'}
// componentDidActive => {newValue: '/home'}
 
// Components
// <>
//   <Content>Home</Content>
// </>
 
// Update
<KeepAlive uniqKey="/detail" >
    <Content>Detail</Content>
<KeepAlive>
// LifeCycle
// componentWillUnactive => {newValue: '/detail', oldValue: '/home'} (Home)
// componentWillActive => {newValue: '/detail', oldValue: '/home'} (Detail)
// componentDidUnactive => {newValue: '/detail', oldValue: '/home'} (Home)
// componentDidActive => {newValue: '/detail', oldValue: '/home'} (Detail)
 
// Components
// <>
//   <Content (display: none)>Home</Content>
//   <Content>Detail</Content>
// </>

Props

uniqKey

  • Type: string

disabled

  • Type: boolean

Related

Authors

This library is written and maintained by imcuttle, moyuyc95@gmail.com.

License

MIT

Install

npm i @rcp/c.keepalive

DownloadsWeekly Downloads

9

Version

1.0.12

License

MIT

Unpacked Size

35.8 kB

Total Files

12

Last publish

Collaborators

  • avatar