Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] lifecycle #118

Open
fantasticsoul opened this issue Jan 9, 2024 · 2 comments
Open

[Feature] lifecycle #118

fantasticsoul opened this issue Jan 9, 2024 · 2 comments
Labels
enhancement New feature or request

Comments

@fantasticsoul
Copy link
Contributor

fantasticsoul commented Jan 9, 2024

新增lifecycle api,提供给用户需要根据组件挂载情况来触发逻辑的场景来使用,设计如下:

以下钩子函数均可按需定义在lifecycle

defineLifecycle(someAtom)({
  // first ins of current atom will mount
  // 第一个使用当前共享对象的组件实例将要挂载时触发 willMount
  willMount(params){ // params: { state, stateRoot, setState, setDraft  }
     
  },
  // first ins of current atom mounted
  mounted(params){

  },
  // last ins of current atom unmount
  willUnmount(params){

  },
  // any ins changed behavior(willMount, mounted, willUnmount) will trigger this method
  onInsChanged(params){
    // params:
    // { op: 'willMount', mountedCount: 0 }
    // { op: 'mounted', mountedCount: 1 }
    // { op: 'willMount', mountedCount: 1 }
    // { op: 'mounted', mountedCount: 2 }
    // { op: 'willUnmount', mountedCount: 2 }
    // { op: 'willUnmount', mountedCount: 1 }
  },
});
@zhangfisher
Copy link
Collaborator

zhangfisher commented Jan 10, 2024

作为一个状态库,原则上我认为没必要实现这样的API,

helux下一阶段应该优先API,做一下减法,合并一些API,否则太多API并不是好事。

比如或许只需要一个Atom就可以了,就没必要现加一大堆的atomx,share,sharex等,对用户来说,带来了认知障碍,如真有必要则可以同第三方库来扩展会更好。

另外,具体的使用场景是什么?

@fantasticsoul
Copy link
Contributor Author

fantasticsoul commented Jan 10, 2024

解决react的useEffect在共享状态里的使用局限性,举个例子,有些状态需要组件初始前willMount或首次挂载后mounted去获取,卸载后清理willUnmount , 如果按照传统思路

willMount

function Demo(){
   const fetchRef = useRef(false);
   if(!fetchRef.current){
      fetchRef.current = true;
      fetchData().then(...);
   }
}

mounted

function Demo(){
   useEffect(()=>{
     fetchRef.current = true;
      fetchData().then(...);
   }, []);
}

willUnmount

   useEffect(()=>{
     return ()=> console.log('clear logic');
   }, []);
}

对于非共享状态这样做没问题,但是提升为状态后,这样的代码就行不通了,因为只需要第一个组件发起请求即可,其他的复用,通常我们可以认为使用顶层组件来做这个事情,但这是一个极其脆弱的约定,同时共享状态何时该清理以便减轻内存消耗也是一个问题。

框架层面提供lifecycle接口可完美解决上述问题(框架内部很容易知道共享状态被多少组件使用中),用户不需要关注组件位置在哪里,如何设计第一个请求再哪里发起,或者改造底层fetch请求只允许同一时间发起一个,只需要定义lifecycle. willMount或者lifecycle.mounted来告诉框架,当前共享状态存在有第一个组件开始将要挂载时或者第一个组件挂载完毕时去做对应的事情(例如请求数据),存在最后一个组件将要卸载时去做对应的事情(例如状态清理),将用户彻底从react自身的生命周期里解放出来(react的生命周期只能服务于本地状态,应对共享状态存在天然的不足)。

helux最终的目标是做一个保姆级的状态引擎,竭尽可能的为用户提供便利,帮助用户驾驭大型前端架构,而不只局限于如何共享状态😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants