React中的Hooks是什么?

大家跟大家聊一聊React中的Hooks是什么:

Hooks:钩子、钩住,是 React@16.8 提供的新功能。

  • 作用:为函数组件提供状态、生命周期等原本 class 组件中才有的功能,可以理解为通过 Hooks 为函数式组件钩入了 class 组件的特性。

  • React@16.8 以前,class 组件(提供状态和生命周期) + 函数组件(展示内容)。

  • React@16.8 以后,class 组件(提供状态和生命周期) + 函数组件(展示内容),Hooks(提供状态和生命周期) + 函数组件(展示内容),也可以混用这两种方式,即部分功能用 class 组件,部分功能用 Hooks + 函数组件。

  • 注意:Hooks 只能在函数组件中使用,虽然有了 Hooks,但 React 官方并没有计划从 React 库中移除 class。

为什么要有 Hooks?

  • Hooks解决了组件的状态逻辑复用问题

    a,在 Hooks 之前,组件的状态逻辑复用经历了:mixins(混入)、HOC(高阶组件)、render props 等模式。

    b,(早已废弃)mixins 的问题:数据来源不清晰;命名冲突。

    c,HOC、render props 的问题:重构组件结构,导致组件形成 JSX 嵌套地狱问题。

  • Hooks解决了class 组件自身的问题

    a,选择:函数组件和 class 组件之间的区别以及使用哪种组件更合适。

    b,需要理解 class 中的 this 是如何工作的。

    c,同一业务的状态和业务逻辑被拆分到不同位置。

需要注意的是: Hooks 和之前 class 的写法是可以共存的。React官方没有计划从 React 中移除 class 组件,但不能在 Hooks 组件中,使用 class 组件相关的 API。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值