React Hooks（useContext、useEffect、useState、useRef）疯狂总结（短小精悍的文章）

嘿，React 工程师们！在本文中，我将讲解 React 中你需要了解的 4 个最重要的 Hook。别担心，我不会写一篇长篇大论让你感到无聊。如果你喜欢简洁明了、直奔主题的文章，那么这篇文章就是你理解这些 Hook 的必读之作。

[1] useState

useState 是我将在本文中解释的 4 个 Hook 中最简单的一个。它允许你在函数式组件中使用状态变量。如果你感到困惑，它只是一个普通的变量，当变量值发生变化时（确切地说，在大多数情况下），组件会重新渲染。例如：

import { useState } from "react";

function demo() {
  const [isVisible, setIsVisible] = useState(true);

  return <>{isVisible && <h1>I'm visible</h1>}</>;
}

export default demo;

在函数组件中使用 useState。参数（初始值）可以是任何值，例如数字、布尔值等。在本例中为 true（布尔值）。这样做会在数组中生成两个值：第一个是实际变量本身，第二个是用于更新该变量值的函数。在本例中，我们按照惯例立即解构这两个值。现在，它只是一个普通变量。要设置它的值，请使用我们之前解构的专用函数，如下所示：

setIsVisible(false);

就是这样。唯一需要注意的是，状态变量允许你在数据改变时重新渲染组件（大多数情况下）。

[2] useEffect

用于以下两种情况之一。一种是当其所在的函数被渲染时触发某些操作。另一种是当其被指派监视的特定数据发生更改时触发某些操作。
情况 1：

import { useEffect } from "react";

function demo() {
  useEffect(() => {
    console.log("Like my post!");
  }, []);
}

export default demo;

请注意，第二个参数是依赖项数组。在这种情况下，useEffect 不会监控任何数据，因此它不会被执行（除非该组件第一次渲染）。因此，我们只会在控制台中第一次看到“Like my post!”。

案例 2：

import { useEffect } from "react";

function demo() {
  const data = [1, 2, 3];

  useEffect(() => {
    console.log("Like my post!");
  }, [data]);
}

export default demo;

在这种情况下，useEffect 会监视名为 data 的变量。因此，如果你修改这个数据一百万次，你就会在控制台中看到一百万次“赞我的帖子！”。

编辑：感谢下方评论区的 Harsh Wardhan，因为他建议我为 useEffect 添加第三个用例，即清理函数。简单来说，在 useEffect 的最后一个右花括号之前，你可以写一个“return”关键字，后跟用于清理的函数。例如，你可能在 useEffect 中有一个计时器，用于刷新组件，比如每 5 分钟刷新一次。当组件卸载时，你需要停止该计时器，否则会发生内存泄漏。顺便说一下，类组件中与此函数等效的函数是 componentWillUnmount()，其基本含义是如果组件即将卸载，则清理它（当然，你需要自己实现清理逻辑）。

[3] useContext

这个 Hook 的意思是，你可以将数据从一个组件发送到所有子组件。现在，所有子组件都有资格获取该数据，并且如果它们愿意，它们可以选择使用 useContext 来使用该数据。例如：

const whateverContext = React.createContext();

<whateverContext.Provider value={whateverValue}>
   <>
     <ChildComponent1 />
     <ChildComponent2 />
     <ChildComponent3 />
   </>
</whateverContext.Provider>

在这里，创建上下文后，父组件会包装子组件（确保附加 .Provider 以向子组件提供数据），并将 whatValue 作为值传递。此时，所有子组件都有资格获取数据。假设 ChildComponent3 想要使用这些数据。它会这样做：

const whateverValue = useContext(whateverContext);

就是这样。基本上，useContext 是一个优雅的解决方案，可以替代 prop 钻取。请注意，useContext 并非 Redux 的替代品。具体原因将在后续文章中解释。不过，请放心，你几乎可以使用 useContext 轻松构建任何应用程序。

[4] useRef

每个人都在谈论它，但没有人真正使用它。首先，让我们看看问题所在：

<ScrollView onContentSizeChange={() => }>
// ...
</ScrollView>

现在，不知何故，我们得到了一个名为 ScrollView 的组件，但它的 onContentSizeChange() 属性不完整。问题在于，
在 onContentSizeChange() 内部，我们需要引用这个 ScrollView 并调用一个名为 scrollToEnd() 的函数。这个组件该如何引用自身呢？我想 useRef 应该能帮上忙。解决方案如下：

function abc() {
  const scrollView = useRef();

  return (
    <View>
      <ScrollView
        ref={scrollView}
        horizontal
        onContentSizeChange={() => scrollView.current.scrollToEnd()}
      >
// ...

瞧，首先调用 useRef ，并将输出赋值为 scrollView 。然后，ScrollView 组件通过 useRef (ref={scrollView}) 与 scrollView 引用建立连接。最后，既然我们获得了该组件的引用并将其连接起来，我们就可以在 onContentSizeChange 中调用我们想要的函数，即 scrollView.current.scrollToEnd() ，其中 current 引用的是当前的 ScrollView 组件。

就是这样。如果您觉得这篇文章有用，请点赞，因为我写这篇文章花了一个小时（不得不回顾我的笔记）。