美文网首页
React Hook - 简介

React Hook - 简介

作者: 前端小白的摸爬滚打 | 来源:发表于2022-02-08 22:09 被阅读0次

可以在不编写 class 的情况下使用 state 以及其他 React 特性

为什么要引入 hooks?

  • 在组件之间复用状态逻辑很难。类组件中我们的状态复用只能通过高阶组件/render props 来实现。但是这种方式需要重新组织组件结构,会很麻烦而且使得代码变得难以理解。Hook 可以使你在无需修改组件结构的情况下复用状态逻辑。

  • 复杂组件变得难以理解。一个组件最开始可能很简单,但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。相互关联且需要对照修改的代码被进行了拆分(在不同的生命周期中),而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug,并且导致逻辑不一致。Hook 将组件中相互关联的部分拆分成更小的函数(比如设置订阅或请求数据),而并非强制按照生命周期划分。

  • 难以理解的 class。我们需要学习 class。还必须去理解 JavaScript 中 this 的工作方式。还不能忘记绑定事件处理器。而Hook 使你在非 class 的情况下可以使用更多的 React 特性。

总结

这一章我们主要需要了解引入 Hooks 的原因:

  1. class 组件状态逻辑复用困难

  2. 复杂组件难以理解。因为不想关的逻辑被写在同一个生命周期中而相关的逻辑却被拆分在不同的生命周期中

  3. 需要学习 class 和了解 this,成本较高

相关文章

  • React HooK简介

    Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他...

  • React Hook简介

    本文引自 https://zh-hans.reactjs.org/docs/hooks-intro.html Ho...

  • React Hook - 简介

    可以在不编写 class 的情况下使用 state 以及其他 React 特性 为什么要引入 hooks? 在组件...

  • React Hook

    Hook 简介 State Hook React 假设当你多次调用 useState 的时候,你能保证每次渲染时它...

  • react hook

    hook 简介 Hook 是一个特殊的函数,它可以让你“钩入” React 的特性,常见的hook如下: useS...

  • hook的使用总结

    hook简介 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 sta...

  • React hook 10种 Hook

    React hook 10种 Hook (详细介绍及使用) React Hook是什么?React官网是这么介绍的...

  • react hook - 简介 & 概览

    简介 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以...

  • react hook 新特性汇总

    Hook 简介 Hook是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数, 是 ...

  • 学习react hook的总结

    react16推出了react hook,react hook使得functional组件拥有了class组件的一...

网友评论

      本文标题:React Hook - 简介

      本文链接:https://www.haomeiwen.com/subject/kaeikrtx.html