ReactHooks(一)

136 阅读1分钟

hook基本概念

hook:可以在不使用class的情况下使用react的特性(state等)

Hook 允许我们按照代码的用途分离他们,在vue中,经常会出现业务逻辑代码写在生命周期钩子函数中,以及业务逻辑写在单文件组件的函数中,造成很多业务逻辑代码的冗余以及业务逻辑复杂时单文件组件过于庞大的问题。react也有业务逻辑重复出现在生命周期函数的问题。

useState

类似vue3中的useRef()

useEffect

react和vue都提供了对于这些问题的解决方案,在react中,提出了hook的概念。在react中,优先推荐将状态的复用以提升状态的方式解决,当提升状态解决不了的时候,使用hook来解决。

在react中,需要对更新过的dom进行操作时,用useEffect,在vue中有$nextTick,nextTick接受一个回调函数对更新后的dom进行操作,effect中也是接收一个回调。

react将在组件卸载的时候执行清除操作(effect中返回的函数)

使用hook的注意事项

  • 只在最顶层使用hook,不在循环、条件或者嵌套函数中调用hook。确保react函数的最顶层以及任何return之前调用他们
  • 不在普通函数中使用hook

//todo 自定义hook以及实践,最好实践之后代码同步github