react hook初探 | 青训营笔记

Hooks是 React 16.8 中的新增功能。它们让您无需编写类即可使用状态和其他 React 功能。

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Hooks 解决了 React 中我们在编写和维护数万个组件的五年中遇到的各种看似无关的问题。无论是在学习 React、每天使用它，还是更喜欢具有相似组件模型的不同库，都可能会发现其中的一些问题。

很难在组件之间重用有状态逻辑

React 不提供将可重用行为“附加”到组件的方法（例如，将其连接到商店）。如果您使用过 React 一段时间，您可能熟悉render props)和试图解决此问题的高阶组件等模式。但是这些模式要求您在使用它们时重新构造您的组件，这可能很麻烦并且使代码更难遵循。如果您在 React DevTools 中查看一个典型的 React 应用程序，您可能会发现组件的“包装地狱”被提供者、消费者、高阶组件、渲染道具和其他抽象层包围。虽然我们可以在 DevTools 中过滤掉它们，但这指向了一个更深层次的潜在问题：React 需要一个更好的原语来共享有状态逻辑。

使用 Hooks，您可以从组件中提取有状态逻辑，以便对其进行独立测试和重用。挂钩允许您在不更改组件层次结构的情况下重用有状态逻辑。 这使得在许多组件之间或与社区共享 Hooks 变得容易。

为了解决这个问题，Hooks 允许您根据相关部分（例如设置订阅或获取数据）将一个组件拆分为更小的功能，而不是基于生命周期方法强制拆分。您还可以选择使用 reducer 管理组件的本地状态，以使其更具可预测性。