
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
3.2 Hooks
React Hooks是React v16.8正式引入的特性,旨在解决与状态有关的逻辑重用和共享等问题。
在React Hooks诞生前,随着业务的迭代,在组件的生命周期函数中,充斥着各种互不相关的逻辑。通常的解决办法是使用Render Props动态渲染所需的部分,或者使用高阶组件提供公共逻辑以解耦各组件间的逻辑关联。但是,无论是哪一种方法,都会造成组件数量增多、组件树结构修改或者组件嵌套层数过多的问题。在Hooks诞生后,它将原本分散在各个生命周期函数中处理同一业务的逻辑封装到了一起,使其更具移植性和可复用性。使用Hooks不仅使得在组件之间复用状态逻辑更加容易,也让复杂组件更易于阅读和理解;并且由于没有类组件的大量polyfill代码,仅需要函数组件就可运行,Hooks将用更少的代码实现同样的效果。
React提供了大量的Hooks函数支持,如提供组件状态支持的useState、提供副作用支持的useEffect,以及提供上下文支持的useContext等。
在使用ReactHooks时,需要遵守以下准则及特性要求。
·只在顶层使用Hooks。不要在循环、条件或嵌套函数中调用Hooks,确保总是在React函数组件的顶层调用它们。
·不要在普通的JavaScript函数中调用Hooks。仅在React的函数组件中调用Hooks,以及在自定义Hook中调用其他Hooks。