七爪源码：你是否在 React 中使用 useEffect 犯了这个错误？--粉丝服务平台-粉丝头条-fensifuwu.com

七爪源码：你是否在 React 中使用 useEffect 犯了这个错误？

科技 09-11 来源：庄志炎

React 函数组件有一个最常用的钩子。该钩子称为 useEffect 钩子。这个钩子用来告诉 React 你的组件在渲染后需要做一些事情。

使用 useEffect 时常犯一个错误。一开始它看起来并不多，但它产生的问题很难调试。

useEffect 依赖的奥秘

useEffect 挂钩接受依赖项列表。它告诉 React 每当任何依赖项发生变化时，都会执行传递的回调函数。

这就是犯错的地方。 React 提供了一个称为 useRef 钩子的钩子。当您想要跟踪一个值时，使用 useRef 挂钩。这个钩子的特别之处在于它不会在值更新时触发重新渲染。

使用 useRef 钩子，React 保证返回的对象将被存储并与组件的当前实例相关联，只要该组件存在。

在传递给 useEffect 的依赖项列表中使用 useRef 值不是一个好习惯。由于只要组件存在，useRef 对象实例就永远不会改变，因此在依赖项列表中使用它不会执行 useEffect 回调。

在依赖项列表中使用 ref.current 也不是一个好主意，因为它会导致难以调试的令人惊讶的行为。

仔细查看使用 useEffect 创建的错误

下面的应用程序在 useEffect 的依赖项列表中使用 ref.current。查看导致错误的令人惊讶的行为。代码在顶部看起来很简单，但在底层，它只是因为依赖列表中的 ref.current 而创建了一个错误。当使用 ref.current 作为依赖项时，useEffect 挂钩不会执行和更新状态。

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [heading, setHeading] = useState("");
  const [heading2, setHeading2] = useState("");
  const [minus, setMinus] = useState(2);
  const ref = useRef(null);

  const handleClick = () => {
    setMinus(minus - 1);
  };

  useEffect(() => {
    setHeading(`First Heading Value: ${minus}`);
  }, [ref.current]);

  // #2 uesEffect
  useEffect(() => {
    console.log("Ref current is: ", ref.current);
    setHeading2(`Secone Heading Value: ${minus}`);
  }, [minus]);

  return (
    
      {minus}
      {heading}
      {heading2}
      
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);