Hooks解决了什么问题？

编写React代码的时候通常会遇到以下问题：

1、在组件之间复用状态逻辑很难

2、复杂组件变得难以理解

3、难以理解的 class

在组件之间复用状态逻辑很难。如果你使用过 React 一段时间，你也许会熟悉一些解决此类问题的方案，比如 render props 和高阶组件。

但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。

如果你在 React DevTools 中观察过 React 应用，你会发现由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。

你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。这使得在组件间或社区内共享 Hook 变得更便捷。

复杂组件变得难以理解。我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。

例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。

在多数情况下，不可能将组件拆分为更小的粒度，因为状态逻辑无处不在。为了解决这个问题，Hook 将组件中相互关联的部分拆分成更小的函数。

难以理解的 class。除了代码复用和代码管理会遇到困难外，我们还发现 class 是学习 React 的一大屏障。你必须去理解 JavaScript 中 this 的工作方式，这与其他语言存在巨大差异。还不能忘记绑定事件处理器。

Hooks解决了什么问题？相关推荐

利用useRef hooks 解决定时器关闭不到的问题
开发记录-20220328 原实现方式 import { useRef, useState } from 'react'export default function Page() {const [t ...
peewee mysql自动断开_flask+mako+peewee(下)(解决了Error 2006: MySQL server has gone away)
这篇主要介绍在这次项目中使用的peewee 首先我们要初始化一个数据库连接对象.这里我使用了peewee提供的链接池.当然你也可以直接指定连接例如: db = SqliteDatabase('base ...
react hooks使用_何时使用React Suspense和React Hooks
react hooks使用 React Suspense对Monad就像钩子对应用符号一样 (React Suspense is to a Monad as Hooks are to Applicat ...
Hooks中的useState
Hooks中的useState React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中,实际上在任何应用中,数据都是必不可少的,我们需要直接的改变页面上一 ...
React中的Hooks是什么？
大家跟大家聊一聊React中的Hooks是什么: Hooks:钩子.钩住,是 React@16.8 提供的新功能. 作用:为函数组件提供状态.生命周期等原本 class 组件中才有的功能,可以理解为通 ...
react hooks useEffect副作用钩子使用
react框架开发作为入门,我们首先学到的是自定义组件,然后编写相关处理逻辑,绑定事件等等.一般自定义组件,我们是通过编写一个class继承React.Component,然后编写最主要的render ...
一、Hooks入门介绍
1.什么是Hooks? React Hooks是16.8之后新增一个React特性,它可以让你在函数组件中使用state等其它class组件的特性. 2. 为什么要有Hooks? Class组件: 学 ...
React中的Hooks
一.概念 Hooks 是 React v16.8 的新特性,可以在不使用类组件的情况下,使用 state 以及其他的 React 特性: Hooks 是完全可选的,无需重写任何已有代码就可以在一些组件 ...
React Hooks介绍
Hooks在React 16.8版本中正式被引入.它可以让你在不用写class的条件下使用state以及其他的React特性. const fn = () => {const [ ...

Hooks解决了什么问题？

Hooks解决了什么问题？相关推荐

最新文章

热门文章