React中的Hooks是什么?

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

Hooks:钩子、钩住,是 [email protected] 提供的新功能。

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

  • [email protected] 以前,class 组件(提供状态和生命周期) + 函数组件(展示内容)。

  • [email protected] 以后,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。

おすすめ

転載: blog.csdn.net/SunFlower914/article/details/121864680
おすすめ