solid-alive v0.0.7

solid-alive

安装(install)

• pnpm add solid-alive ／ npm i solid-alive / yarn add solid-alive

描述(describe)

• 用于 solid 组件缓存,只测试过2级路由缓存
• 在 useAlive 中有 onActivated, onDeactivated,removeAliveElement 三个函数使用
  • removeAliveElement: 函数, 可传一个参数, 不传就删除所有缓存 : removeAliveElement('/home')
  • onActivated / onDeactivated: 函数,只能传一个函数,多次调用只有最一个会调用. onActivated(()=> console.log('actived') )
• 可记住body的高度,但要在 AliveProvider 中加 saveBodyScrollTop参数,但组件内部的滚动条问题自己解决
• 子父 缓存/删除 问题
  • 如果某组件下有子组件,在父的 AliveTransfer中, 第三个参数,为数组 写上子组件的唯一id: '/childrenId','asf',...
  • 使用见下图, 也可用 removeAliveElement 删除

使用(use)

1 /index.tsx,AliveProvider将app 包裹, saveBodyScrollTop : 记住body滚动高度

import { render } from 'solid-js/web'
import App from './App'
import { AliveProvider } from  'solid-alive'
const root = document.getElementById('root')

render(() => 
 <AliveProvider saveBodyScrollTop>
   <App />
 </AliveProvider>
, root!)

2 /App.tsx ,在 solid-alive 中 有 AliveTransfer, 参数: JSX , id:string, children?:string..

import { Route, Router } from '@solidjs/router';
import { AliveTransfer } from 'solid-alive';

import Home from './views/Home';
import Client from './views/Client';
import About from './views/About';
import Team from './views/Blog/Team';
import Blog from './views/Blog';
import Single from './views/Blog/Single';

// 单个
const AboutTsf = () => AliveTransfer(About, '/about');

// 当Blog 下有子组件时, 第三个参数一定要, 与子组件的
const BlogTsf = (props: any) =>
 AliveTransfer(Blog.bind(null, props), '/blog', ['single', '/team']);
// blog 下的子组件
const SingleTsf = () => AliveTransfer(Single, 'single');
const TeamTsf = () => AliveTransfer(Team, '/team');

export default function App() {
 return (
   <Router>
     {/* 这个Client 只是用于标签加跳转的,使用时可不用 */}
     <Route component={Client}>
       <Route component={Home} path={'/'} />
       {/* 单个缓存 single */}
       <Route component={AboutTsf} path={'/about'} />
       {/* 父子 缓存 Parent Child Nesting */}
       <Route component={BlogTsf} path={'/blog'}>
         <Route component={TeamTsf} path={'team'} />
         <Route component={SingleTsf} path={'single'} />
       </Route>
     </Route>
   </Router>
 );
}

3 父 /views/Blog/index.tsx

export default function Blog(props: any) {
  return (
    <div>
      <h2>Blog</h2>
      <div>{props.children}</div>
    </div>
  );
}

• 子 /views/Blog/Single/index.tsx 中

import { useAlive } from "solid-alive"

export default function Single() {
  const { onActivated,onDeactivated,removeAliveElement } = useAlive()

  const click = () => {
    removeAliveElement('/about') // delete '/about'; 删除 /about
    // removeAliveElement() // delete all alive element; 会删除所有缓存的组件
  }

  // not call 这个不会被调用
  onActivated(()=>{
    console.log('Single-activeated-1')
  })
 
  // call 这个会被调用, 这个是最后一个才会被调用,缓存进入
  onActivated(()=>{
    console.log('Single-activeated-2')
  })
  // 缓存离开,
  onDeactivated(()=>{
    console.log('Single-deactivated')
  })
  return (
    <div>
      <h2>Single</h2>
      <input type="text" style={{border:'2px solid red'}} />
    </div>
  )
}