什么是Hooks?

顾名思义,Hook就是“钩子”的意思。
在React中,Hooks就是把某个目标结果钩到某个可能会变化的数据源或者事件源上,那么当被钩到的数据或者事件发生变化时,产生这个目标结果的代码会重新执行,产生更新后的结果。

对于函数组件,这个结果是最终的DOM树;
对于存在缓存的useCallback、useMemo组件,则是在依赖项发生变化时去更新缓存。

Hooks的好处:

- 简化逻辑复用: 在之前的React使用中难以实现逻辑的复用,必须借助于高阶组件等复杂的设计模式。但是高阶组件会产生冗余的组件节点,让调试变得困难。所以Hooks的好处就是简化了逻辑复用。

- 有助于关注分离: 意思是说Hooks能够让针对用一个业务逻辑的代码尽可能聚合在一块。在过去的Class组件中是很难做到的。因为Class组件中,不得不把同一个业务逻辑的代码分散在类组件的不同生命周期的方法中。所以通过Hooks的方式,把业务逻辑清晰地隔离开,能够让代码更加容易理解和维护。

小结:
Hooks是React的一个新功能,成为了React开发的主流方式。也在一定 的程度上更好地体现了React的开发思想,即从State => View的函数式映射。
此外,Hooks也解决了Class组件存在的一些代码冗余、难以逻辑复用的问题。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. Hooks 是 React 16.8 引入的新特性,它可以让函数组件拥有类组件的状态和生命周期管理能力。使用 Hooks 可以将状态管理和副作用的处理逻辑与 UI 逻辑分离,代码变得更加简洁。 2. 纯函数是指输入相同的参数,总是返回相同的结果,并且没有副作用的函数。纯函数对于函数式编程非常重要,因为它可以避免出现不可预测的结果,也方便进行测试和调试。 3. 副作用是指函数对外部环境产生的影响,例如修改全局变量、发送网络请求、修改 DOM 等。副作用会增加代码的复杂性,也会导致代码难以测试和调试。 4. 有状态组件(Class Component)是指使用 class 关键字创建的组件,可以通过 this.state 存储和修改组件的状态,可以使用生命周期方法处理组件的生命周期。无状态组件(Functional Component)是指使用函数创建的组件,没有自己的状态和生命周期方法,只能通过 props 接收数据和回调函数。 5. 可以通过 props 属性在组件之间传递数据。如果需要跨越多层组件传递数据,可以使用 Context 或 Redux 等状态管理库。 6. HOC(Higher-Order Component)是指一个函数,它接受一个组件作为参数,返回一个新的组件。HOC 可以在不修改组件代码的情况下,增强组件的功能,例如添加生命周期方法、状态管理、路由守卫等。HOC 常用于代码复用和逻辑复杂的组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值