我有一个useEffect,我想避免第一轮.所以我做了一个钩子来判断它是否是第一个渲染:

使用FirstRender

import { useRef, useEffect } from 'react';

export function 使用FirstRender() {
  const firstRender = useRef(true);

  useEffect(() => {
    firstRender.current = false;
  }, []);

  return firstRender.current;
}

我想像那样使用它

  const firstRender = 使用FirstRender();
  const [isOpen, setOpen] = useState<boolean>(false);
 
  useEffect(() => {
    if (firstRender) {
      return;
    }

    /* Rest of logic using `isOpen` dependency */

  }, [isOpen, firstRender]);

Choice 1: With firstRender as useEffect's dependency

firstRender变为False时,此依赖项将重新呈现useEffect,因此将使其毫无用处.

Choice 2: Without firstRender as useEffect's dependency

这将使逻辑工作正常,但构建它将导致警告:

警告:Reaction Hook useEffect缺少依赖项:‘FirstRender’.包括它或删除依赖项array.react 钩子/穷举式警戒.

最好的解决方案是什么?!

  • 我是否有只使用逻辑和开发的解决方案?
  • 我知道我可以添加 comments // eslint-disable-line来禁用它.但这样做正常吗?我觉得不得不这样做是很奇怪的,而这是意料之中的行为.或者,我是否可以定义要禁用的字段(并保留原始行为)

我错过了什么吗?!为什么埃斯林特规则会阻止你go 做一些有用的事情?我知道我不想要这种依赖!?

推荐答案

firstRender是不触发重新渲染的ref值.在dependencies数组中不需要它.但是,Eslint Plgin不知道它是一个引用,直到引用在同一个组件中,而不是在一个单独的可重用钩子中.

const firstRender = useRef(true)

useEffect(() => {
  if (firstRender.current) doSomething();
  // Here Eslint knows the source of `firstRender` so it won't complain
}, [])
export function useFirstRender() {
  const firstRender = useRef(true);

  useEffect(() => {
    firstRender.current = false;
  }, []);

  return firstRender.current;
}

function Component() {
  const firstRender = useFirstRender();
  const [isOpen, setOpen] = useState<boolean>(false);
 
  useEffect(() => {
    if (firstRender) {
      return;
    }

    /* Rest of logic using `isOpen` dependency */

  }, [isOpen, firstRender]);
}

在第二个代码片段中,Eslint可以访问当前文件.它不知道firstRender是什么.它会抱怨,以防它是一个州.如果您确定钩子的输出是一个引用.你可以安全地做eslint-ignore-next-line react/ex.....号.或者你可以go 掉钩子,直接使用裁判.

Reactjs相关问答推荐

REACTJS:在Reaction中根据路由路径更改加载器API URL

App.js中的H2组件不会动态呈现.这可能是什么问题?

Google Firestore无法读取图像-react

react 挂钩-使用有效澄清

在构建或部署Reaction应用程序时出错

Reaction路由DOM v6不包含上下文(Supabase)

React-React中是否完全支持基于类的组件?

svg每条路径上的波浪动画

无法设置 null 的属性(设置src)

我应该如何将字符串作为props 传递给 React 组件?

FlatList 不在 React Native 中呈现项目

React - 添加了输入数据但不显示

如何在react 中正确销毁上下文?

RTK 查询Mutations 在 StrictMode 中执行两次

@react-three/postprocessing 没有匹配的从 three.module.js 导出以导入WebGLMultisampleRenderTarget

单击按钮或文本从一个组件移动到另一个组件

我刚刚部署了我的 Vite React 站点,但我的图标/图像没有部署

调用 Statsig.updateUser 时 UI 不呈现

如何用实际的br标签替换axios响应中的br标签?

哪个 PrivateRouter 实现更好:高阶组件还是替换?